In 1972 Atari pioneered the video game industry with the release of Pong. If you think of classic games, Pong is almost always near the top of the list. So it is fitting that Pong should be at least one of your first flash games you make. In this tutorial, we are going to create a complete Pong game from start to finish.
This is intended for beginners, but if you have never programmed at all before you should check out my Getting Started tutorial first.
This is what we are going to create over the next 6 tutorials:
Step One: Set up the Flash project, and create the game pieces.
The first thing to do is to create a new Flash project (make sure your select the actionscript 3 version) and name it something like “Pong Tutorial”. I recommend creating a central “Flash” folder, and then creating a new folder inside that for each of your projects. This will keep things neat and organized.
Now what you want to do is to go into the properties panel of your new project, and next to where it says “Size” hit the edit button.
In here are 3 important things that we might want to change: The dimensions of your game, the FPS (frames-per-second), and the background color. Make sure that your project size is 550px wide by 400px tall – this should already be the default. Then change your background color to black. We’ll use white game pieces on a black background, just like the original. Finally, set your FPS to 60. This is the number of times the game will update its display every second that you play. So the higher your FPS, the smoother the visuals will be. 30 is a pretty standard FPS, but 60 gives even smoother gameplay. The only downside is that if your FPS is too high your game might lag and be worse off than using a lower FPS. Enough said.
Now that our project is set up, the first thing we are going to do is create the main game pieces for our Pong game. These will include 2 paddles and the ball. So first, let’s make the ball. Using the circle tool, create a white, 10 x 10 pixel circle. Tip: Hold down shift while using the Oval Tool to draw circles. Edit the size to be exactly what you want by using the “Position and Size” section of the properties panel.
And now use Modify –> Convert to Symbol and turn it into a new Movie Clip object. You can name it “Ball”, or anything else that takes your fancy. One thing to be careful about is the Registration section. Click on the center block of the grid. This will make the center of the ball become the center of the object instead of one of the corners.
Next up is are the two paddles. Since they are the same we can just make one paddle Movie Clip, and create two instances of it.
Use the rectangle tool to draw a paddle 10 pixels wide by 50 pixels tall.
Then convert it to a symbol, name it Paddle, and set its registration to the center.
Alright, that was easy. Now all we have to do is set up the stage with the game pieces. Go to your Library panel and drag two paddles onto the main stage, and 1 ball (if the library isn’t open go to Window –> Library or hit Command+L).
Set the position of one paddle to (20, 200), the other to (530, 200), and the ball to (275, 200). You want your screen to look like this:
Step One — COMPLETE!
If you run your game (Command+Return), you will see these graphics show up. But… they don’t do anything yet :(
Download the source code here!
Thanks for following along — read the next tutorial to add code to the game and make things work!
Just to let you know the demo doesn’t show up.
Thanks so much for alerting me… I didn’t realize it, but the site I had hosted some of my earlier files on just went down. I’ll try to fix it immediately.
Awesome work man totally best :) I am new at programming and i wish i would be like you some day :)
Thanks! All I can say is to keep practicing. The more you practice, the better you get. Good luck :-)
just playing for a little bit, i quickly recognised how you setup your ai, once the puck had gotten on to the ai’s side of the stage, you had it move towards the y value of the puck constantly at step sizes determined by it’s distance to the puck divided by a constant number. And while the puck was on your side of the stage, you had the ai go into and idle phase in which it would go either up or down and switch directions when it hit the top or bottom. when i made my pong game, i used a different method, having it constantly switch directions in it’s idle phase, and move by the distance to the puck divided by a constant number. your way does make more sense, but the best way to do it is to use trigonometry to determine where the puck will end up, then add r subtract from that, then have your puck move in step sizes defined by the distance to that location divided by a constant number. if you were to do that, you could easily adjust the difficulty by changing the constant number you divide the step size by, and also by changing the offset you apply to trigonometric approximation of where the puck is going to end up. i tried to do that, but it seems my understanding of trigonometry is not up to par. Good game though.
I played a little with some programming languages before (mostly PHP and JavaScript, but just a little) and, recently, I became interested in learning a bit more about programming and chose AS3.
Lots of people told me about AS3 and I’ve had my eyes on things like FlashPunk and Flixel before, so I thought I’d give it a try.
Since I don’t have Flash Pro (my trial has expired and no money to buy it =/), just mixed a few tutorials I’ve found on the web (for textField, drawRect, movieClips and etc.) with this tutorial to build the example on Flashdevelop and the result was great!
I thought it was fairly easy to build functions and make a (very) simple title screen and a game over screen.
Great Tutorial! Hope I can finish at least one original game soon. =P
Thanks from Brazil! =P
Awesome! Good luck :-)
[...] http://as3gametuts.com/2011/03/19/pong-1/ [...]
I am using Macromedia Flash MX (because it was a smaller download size), which generally seems fine, except for the mysterious changes of colour during creation. When I run it, the colours are all fine, but it is rather annoying to have the ball and paddles appearing as blue in the creation screen. Is it just this version of Flash, or am I doing something wrong?
there is no source code in the link..just the game setup!