This week my company Atomik Studios finished the Desperado City website. It is a Flash website for the Belgian theme park Bobbejaanland to promote their new attraction. I programmed one of the games featured on the website. The briefing was a simple point and click shooter (actually the player has to throw bottles), but I always like a little extra. So the bottles are thrown in a 3D space, which is projected onto the 2D illustration. In a case like this, when there is a fixed camera and all the boundaries are straight a perspective projection isn't all that difficult. This is how a perspective projection works:
The figure below depicts the top view of a 3D space. All light rays reflected by objects in the 3D space converge into the user's eye at point (0, 0). This is more or less what happens in reality. Now before the rays reach the eye, the're intercepted by a virtual plane at a certain distance (focus) from the eye.(In our real eye, the rays are intercepted by the retina in the back of our eye.) By drawing the intersection of the ray and the projection plane, we create a perspective and give the viewer the illusion of depth.
You don't need advanced math to calculate the intersection, a good tutorial will do. As you can see from the figure, the triangles origin-x-z and origin-x'-focus are similar, thus the focus distance is proportional to z and x is proportional to x'. This gives us: x / z = x' / focus => x' = x * focus / z The same goes for the y coordinate: y / z = y' / focus => y' = y * focus / z In actionscript: var focus = 200; var bottle3DPoint = {x: 100, y:30, z:-400}; var bottleX = bottle3DPoint.x * focus / bottle3DPoint.z; var bottleY = bottle3DPoint.y * focus / bottle3DPoint.z; The bottle is at point {x: 100, y:30, z:-400} in the virtual 3D space, to get it's position on the stage just apply the 2 formulas. Of course you will need to experiment with the focus distance and use an offset to match your perspective with the perspective of the illustration. As with many things in life, the principle is simple but the implementation is a little more complicated. |