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)
(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:

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:

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.

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.

Read original article: 

Tutorial: 2.5D Perspective in Graphics 2.0