How to fold a image like

Hi,

I have a question about this tutorial

http://coronalabs.com/blog/2013/10/31/tutorial-2-5d-perspective-in-graphics-2-0/#comment-49439

In the video demonstration, what was done to fold the image?

Hi @BogeyBox Studio,

To do this, I used a few “tricks”, but it’s not too complicated either. The image can’t just be “folded” along any arbitrary line, so you need to use the concept of meshes to accomplish it. The folded part is actually another image placed over the entire image… just the upper-right corner, or the lower-left half in the second folding sequence. I manipulate these images separately using 2.5D perspective, making it appear as if they’re folding into the back, or over the front. When doing this, the background part (entire image) needs to be either masked in certain places, or a solid overlay put over the part that should be obscured while the fold occurs.

For other effects like the “colored light” shining on the image, I transitioned a monotone filter effect during the same folding transition, to make it look like the light intensity increased a bit when the image was facing in a certain direction.

Hope this helps,

Brent

Thx for the information! :smiley:

You can share the code?

Igor

Hi @BogeyBox Studio,

To do this, I used a few “tricks”, but it’s not too complicated either. The image can’t just be “folded” along any arbitrary line, so you need to use the concept of meshes to accomplish it. The folded part is actually another image placed over the entire image… just the upper-right corner, or the lower-left half in the second folding sequence. I manipulate these images separately using 2.5D perspective, making it appear as if they’re folding into the back, or over the front. When doing this, the background part (entire image) needs to be either masked in certain places, or a solid overlay put over the part that should be obscured while the fold occurs.

For other effects like the “colored light” shining on the image, I transitioned a monotone filter effect during the same folding transition, to make it look like the light intensity increased a bit when the image was facing in a certain direction.

Hope this helps,

Brent

Thx for the information! :smiley:

You can share the code?

Igor

+1 for sample code  :slight_smile:

Hi @BogeyBox Studio, @sunmils,

This project is actually one of the Corona demo projects in your local application folder:

CoronaSDK > SampleCode > Graphics-Premium > Perspective

If you examine the code, note that it could be improved somewhat, in terms of using masks to hide the the “invisible” parts, instead of black overlays. But for general purposes, you can see the approach I took in building that demo.

Brent

very nice, thanks!

+1 for sample code  :slight_smile:

Hi @BogeyBox Studio, @sunmils,

This project is actually one of the Corona demo projects in your local application folder:

CoronaSDK > SampleCode > Graphics-Premium > Perspective

If you examine the code, note that it could be improved somewhat, in terms of using masks to hide the the “invisible” parts, instead of black overlays. But for general purposes, you can see the approach I took in building that demo.

Brent

very nice, thanks!