Posted on by

gfx2-iconCorona’s Graphics 2.0 engine allows you to simulate 2.5D effects that appear to be three-dimensional (3D) without the complexity of working in the third dimension. This includes quadrilateral distortion, billboarding, skybox/skydome, Mode 7, and more.

Corona lets you achieve these 2.5D effects in an intuitive and simple manner, keeping display objects in their respective z-axis plane. Thus, the familiar method of layering objects and display groups remains intact, but now you can to add 2.5D effects with just a few lines of code.

Quadrilateral Distortion Using Corner Points

(x1, y1) (x4, y4)
25D-corner-points
(x2, y2) (x3, y3)

All display objects — including snapshots — can be distorted into general quadrilaterals (quads). Each corner has an associated x and y property that specifies how the corner of the object’s bounding box should be distorted. By default, these properties are (0, 0), meaning there is no offset. These corner points are progressively numbered from (x1, y1) to (x4, y4), starting at the top-left corner and working around in a counter-clockwise direction.

Adjusting the Corner Points

To access these points — the corners of the bounding box — simply reference the path property of the object and then the specific x or y point:

print( object.path.x1 )
print( object.path.y3 )

As noted, these properties all begin with a value of 0. To distort the object in a quadrilateral manner, you just need to adjust the desired point(s) to achieve the desired 2.5D effect:
25D-distortion

local logo = display.newImage( "corona-logo.png" )
logo.x = display.contentCenterX
logo.y = display.contentCenterY

logo.path.x4 = -110
logo.path.y3 = -55

Corner Point Relation

Although it may seem obvious, it’s worth noting that the corner points are related to the object, not the content space. If you rotate an object, the corner points rotate with it.

The same basic rule applies to scaling. If you begin with an object that is 300×300 pixels in size and you move the x4 corner point to -150 (the object’s vertical mid point), this shift is related to the object, not the content space. If you scale the object up 200% and give it the same x4 shift of -150, the corner point will move to the same object-related mid point — it will not shift just -150 pixels in content space.

Transitional Distortion

Just as individual corner points can be explicitly set to distort a display object, you can also transition the points for a gradual distortion effect.

Unlike normal transitions, you should not reference the actual display object as the first argument, but rather the path of the display object. Then, in turn, specify the specific corner points of the path as the target properties of the transition.

--IMPORTANT: Use 'logo.path' as the first argument (not 'logo')
transition.to( logo.path, { time=2000, x2=20, y2=-20, x4=-40, y4=40 } )

The following video shows some of the interesting effects you can achieve using transitional distortion. As you can see, Corona’s Graphics 2.0 engine introduces powerful 2.5 effects with just a few lines of code.


Posted by . Thanks for reading...

9 Responses to “Tutorial: 2.5D Perspective in Graphics 2.0”

  1. Mo

    FANTASTIC tutorial Brent.

    1- Could you talk a little bit about skybox/skydome mode? Would this mode allow us to make sky /starfield effect where the player seems to be inside a dome looking up at the sky (or stars) in a game for instance? If yes, any snipets we could use?

    2- I will assume 2.5D will allow us at the minimum to make like “Clash of Clans” type game where there are 3D looking terrain (not really 3D) and where you can place buildings on so on. In that case as simple 2D image of a terrain could deform to look like a 3D terrain?

    In any event THANK YOU. That seems simple enough!

    MO

    Reply
    • Brent

      Hi Mo,
      Yes, this would allow you to render a skybox/skydome. If you read the Wiki on this (link is in the tutorial, and here: http://en.wikipedia.org/wiki/2.5D#Skyboxes_.26_skydomes), you can see what this basically does. As for snippets, I don’t have any yet, but keep an eye out in the Graphics 2.0 forum… perhaps somebody will tackle a basic demo of this soon. Remember that you can basically use “meshes” to apply textures to a series of side-by-side objects, then adjust the points of neighboring objects to make it look like the surface bends inward slightly. I may experiment with a quick demo on this after I get some other tutorials completed.

      Reply
  2. Vasant

    Thanks for the new features in Graphics 2.0

    For those of us not in 3D design, can you include some predefined effect library that we can just use with minimal tweaking? similar to storyboard effects..object curl (maybe for specified corner or sides), flip etc
    Any other standard cool effects found in 3D games?
    example: Define a cube effect where you specify 6 images for each face, size of the cube and then Corona or the library function applies the correct 2.5D effects and renders a cube that can be turned in 3D (with whatever limitations).
    another one: sunlight is reflected off a balloon and as it goes away/goes higher the reflection point moves to mimic a real outdoor balloon.
    Something like this would open up 3D effects for corona developers without calculating intricate coordinates and trying multiple effects.
    or just simply going around a multi-faced object (a building, terrain etc)

    Maybe somebody in community has a better idea on how to build something like this?

    I know you gave the full customization power but sometimes easier to start with predefined effects.

    Vasant

    Reply
  3. Mo

    @David: fantastic looking game! I guess you can just use 3D looking terrain and 3D assets (houses…) for this type of game. I did not know you could do this type of games with Corona. I will search for any blog the developer may have wrote about his/her game. Cool looking game!

    @Brent. Thanks so much for sharing that link. So I am really look for is sky dome since I am trying to simulate a sky. Thanks for the info too. If you get a chance that will super but I know you are super busy doing these type of great tututorials so please no rush.

    Cool stuff :)

    Mo

    Reply
  4. Teodor

    I used this tutorial to create a card game that swipes the 5 cards in 3d! works fine on some devices but on a galaxy tab2 my app crashes with no error message when it has to swipe the cards! My cards are made with snapshots and when i tried the same project with display.newRect() instead of the cards work fine even on the galaxy tab2. I get the same issue when i substitute the rectangle with some card images!!!
    Does anybody has any idea why?
    I also tried the sample project on the Galaxy Tab2 and it works

    Reply
  5. Marcos

    Dear sirs,

    Could you, please, show me how to develop a page curl effect (book turn page), with Graphics 2.0 ?

    Thank you!

    Reply

Leave a Reply

  • (Will Not Be Published)