Pongin 2.5D

A Pong game with a nice 3D(2.5D) effect.

Return to the experiments gallery

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Dowload source code

Game tip: you can affect the horizontal velocity of the ball, by moving the paddle quicky as the ball hits it.

The 3D (aka 2.5D) effect was achieved by creating duplicates of the paddles, ball and score textfield. To those duplicates different colors were given, were blurred and given a larger z-depth (z coordinate) than than the z-depth of the 'main' game elements. This gives the illusion that the 'main' elements cast shadows on the canvas, hence faking a 3d effect.

The background lines may be the most interesing thing of this simple pong game. As you must have noticed by now, the background gridlines are not evenly distributed, but are denser at the edges and more sparse towards the center. This makes the 3D illusion more realistic. The lines were generated by means of a Cosine function.

for (var i:uint = 0; i <windowWidth; i+=20)
{
    angle = (i/windowWidth) * Math.PI;   //this normalizes the angle from 0 to Pi.
    newXPosition = (Math.cos(angle)) * w * 0.5 + w * 0.5;  //position of next line
    graphics.moveTo(newXPosition, 0);
    graphics.lineTo(newXPosition, windowHeight);
}
Return to the experiments gallery