1. Code
  2. Games

Create Your Own Pseudo 3D Pong Game


Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published a long time ago in May, 2009.

In this tut I'll describe how to create a basic 3D scene using the native 3D options of Flash Player 10. Then I'll explain how to add interactivity to the elements and set up a basic pong game. Let's go..

Step 1: Setting the Scene

Let's set up the stage and create the 3D scene. In a regular pong game the ball bounces off the top and bottom of the screen, but since we're adding some perspective to the mix we'll need to provide these borders too. There are five movieclips needed: the floor and the four walls (two of which are actually paddles). The registration points of the walls should all be located against the floor. You can create all of these simply with the rectangle tool or use an imported bitmap image (remember to turn on "Allow smoothing" in the properties). Make a movieclip out of each of the walls and give them an instance name (I named them "wallTop", "wallBottom", "wallLeft" and "wallRight" and will refer to them later). Name the background "floor".

Select all the walls and the floor, create one big movieclip out of those and name it "bg".

To display the score later on we'll also need two dynamic text fields. If you place these within the "bg" movieclip they'll also have the 3D perspective. Name these "scoreLeft" and "scoreRight" then embed the fonts.

Step 2: Ball Creation

Create the ball using the oval and gradient tool on the stage. Don't place the the ball inside the "bg" movieclip or it will be distorted by the perspective. We won't give the ball actual 3D properties but make it act as if it was 3D. Place the ball in the center of the screen and give it an instance name like "ball".

Step 3: Document Class

Now we'll set up the 3D scene by using the new rotationX, Y and Z properties that were added in Flash Player 10. However, before we can execute some ActionScript code we need to create the document class. Create an empty and fill it with the code below.

Now to use this as the main class we can fill in "Main" in the "Class:" input box of the documents properties.

Step 4: Rotation

Let's try out the rotation. Add this line to the Main() function to give everything some perspective:

As you can see, all movieclips are now rotated 30° around the x-axis.

Each of the walls needs a 90° rotation to stand up. As you can see I've also changed the blending mode of the walls to "screen" so the gradients look better. The following code is only for preview purpose as we'll replace it by tweens in the next step (so take it out after testing).

Step 5: Start Function

To add an effect to the walls we'll first need to create a start button. Create a movieclip with the text "Click here to start". Again, you can place this inside "bg" if you want it to have perspective too. Give it an instance name like "startText". We can now reference it in the code and add an eventlistener to it. Also set buttonMode to true which will return a hand cursor when the mouse hovers over the button. When clicked, the start function is called and the button is hidden. We also hide the mouse pointer because the user will control the right wall with the mouse.

Step 6: Tweening

We can use TweenLite to tween the walls from 0 to 90° rotation. Of course any tweening engine will do, but I prefer this one. The following code will tween the walls in 2 seconds and use the "Bounce.easeOut" easing function. To tween the alpha value of the walls as well we need to set it to 0 first. You can do this in Flash by setting the alpha to 0 in the color settings. After these tweens are completed the game should start, so add an "onComplete" property to one of the tweens and attach a function name to it (you can leave this out for testing since the function doesn't exist yet).

Step 7: Paddles

Before we can actually start the game we'll need to add interactivity to the left and right walls and the ball. Let's start with the player's paddle. Create a new class "" and add the following code.

In the constructor (the Player function) we add an eventlistener to the stage to check when the mouse moves and call the "moveAlong" function whenever it does. In the moveAlong function we calculate the local position of the mouse (just the y position since we're only moving vertically). Next we check whether the mouse goes out of bounds and reset the position if it does. I found the 340 value by trial and error since "parent.height - height" does not return the expected value when we use 3D perspective.

Next change the properties of the wallRight movieclip; check "Export for ActionScript" and set the Class to "Player". Leave "Base Class" empty.

Step 8: Opponent (AI)

Creating the AI is very similar to creating the player. Only this time we'll make it move towards the y value of the ball but with a slightly lower speed than the ball. Create another class "":

First we need to be able to reference the ball. Since the wallLeft movieclip is inside the "bg" movieclip, calling "parent" would reference to "bg". For this reason we need to use "parent.parent". The first "if" statement checks if the ball has an x or yspeed. These are public variables of the ball we'll set later. The check prevents the AI from moving before the game starts. The "newy" value holds the y value of the ball minus the height of wallLeft. This is the value to which it should move to hit the ball. As before, change the Class of wallLeft to "AI".

Step 9: Ball Functionality

The ball needs the most functionality: it needs to move around, bounce off walls, check for a hit with the paddles and update its own depth since it's not a 3D object.

First off we give the ball an x and yspeed. These are set to public so we can check from other objects whether the ball is moving. Next add an "onenterframe" eventlistener to the start function. When the start function is called the ball will start moving every frame. I gave the ball a starting speed of 12 pixels per frame. You can change this to speed up the game but you could also up the framerate. The moveBall function actually hightens the x and y values of the ball based on the x and yspeed. It also calls the depth and collision functions on every frame.

Step 10: Ball Perspective

Because the ball is not a 3D object and has no z value it will not appear smaller once the y value changes. The higher the ball gets on screen (low y value), the smaller it should appear. We can change this by simply scaling it based on its position:

Step 11: Collision Course

The "collision" function will decide how and when the ball will bounce off other objects. In the first "if" statement we simply check the y value to find out if the ball hits the top or bottom wall. Again I found these values by trial and error because the ball needs to bounce off in a plausible fashion. If the check is true it results in changing the yspeed so the ball changes vertical direction.

Checking the x borders isn't as easy because of the perspective and paddles that move around. We can perform a "hitTest" with the walls and send the ball back if true. HitTests are a bit cpu heavy so it's best not to overuse them. However, because we're dealing with a simple pong game it won't noticeably slow down the game. I did add an extra check though; to see if the ball's x value is on the left or right side of the stage and check the wall accordingly. This makes sure there's only one hitTest needed per frame instead of two.

Lastly we need to find out if the ball is still on the platform. We can find out by checking if a point on the bottom of the ball is still located on the "floor". The exact point has the ball's x value and the y plus radius value. If this is true we find out whether the ball went off on the left or right side (again by comparing the x value to the center of the screen) and update the score accoringly. At the end, set the x and y values of the ball back to the center so the game can continue.

Change the Class of the ball to "Ball".

Step 12: Action!

Now that we've created both the paddles and the ball, all that's needed is to set the game in action. Add this function to the Main class and make sure the onComplete we used in step 6 references this function.

Step 13: Adding Bounce

After the score has been updated, the ball just returns to the center and starts rolling again. We need to animate the ball slightly when coming back before the game starts again.

Replace this code in the collision function of the ball:


This will stop the ball from moving first. Next it sets the position of the ball just above the screen but horizontally centered. If we then use the Bounce easing function it will appear as if the ball drops down from above just before restarting the game.


I hope you were able to follow along without too many problems. The game as it is now is very basic and can use some improvements. The ball, for example, always bounces 90° corners which makes the movement very predictable.

If you'd like to take it further you could try varying the x and yspeed based on where the ball hits the paddle (compare the y values). The collision detection with the paddles is nowhere near perfect but does show you a basic way of checking for a hit. Lastly, if you didn't use gradients for the walls you will notice the ball seems to roll over the bottom wall instead of dissapearing under it. To fix this, you can easily seperate objects that should appear over the ball and place those in a new movieclip which you distort as much as the "bg" movieclip and arrange higher than the ball in Flash.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.