• September 23, 2014
• 0
• by jose

Parallax 3D effect with Corona

This morning I implemented a simple parallax system that creates the illusion of depth by using gravity data from the accelerometer with Corona SDK

First, I start to poll the accelerometer 100 times per second.

system.setAccelerometerInterval( 100 ) -- 100 hz is max

Gravity data from the accelerometer is then used to offset the angle of view. Illusion of depth is created by slightly moving the layers in the right direction, the magnitude of the movement depending on the distance to the eye.

To manage the scene I created 10 different layers. I placed the smaller shark in the front layer (layer 0), the larger shark in the middle (layer 5) and the back image to the background (layer 10).

Layer 0 has 0% displacement according to gravity, and Layer 10 has 100% displacement.

local displacementX = display.contentCenterX + (gravity.x * movementFactor)
local displacementY = display.contentCenterY + ((gravity.y - calibrateY) * movementFactor)

layer_10.x = displacementX
layer_10.y = displacementY

layer_5.x = displacementX * 0.5
layer_5.y = displacementY * 0.5

I like to use a calibrateY variable so I can reset the ‘default’ position for the phone. This way you can get a confortable angle when standing and sitting to use the demo.

Demo

Touch the small shark to calibrate and center the view.

Screenshot

 

Download

– Android APK
– Github