Pong ~Part 1~ Setting up the Project

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!

Advertisements

19 comments on “Pong ~Part 1~ Setting up the Project

  1. Vincent Del Vecchio says:

    Just to let you know the demo doesn’t show up.

  2. Fikret Şahban says:

    Awesome work man totally best :) I am new at programming and i wish i would be like you some day :)

  3. imrealnow says:

    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.

    • kaustubh says:

      Not sure how you plan to use trigo. I mean, you’d have to figure out a way to constantly have the paddle try to figure out the angles (loop function?) and have itself adjust? And make sure it can miss so you add a constant, right?
      Well, if you can show me how to plan to have it calculate angles, i’d be glad to make the necessary trig functions. As long as i dont have to wrile algs to have the computer compute trig values for things like sin11 or 32 . I mean writing one for something like sin15 is still okay, just use sin (45-30), but as long as the computer cna do that, ill do the functions.

  4. Fabio Goto says:

    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

  5. Ruaridh WIlson says:

    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?

  6. manOtitanium says:

    there is no source code in the link..just the game setup!

  7. solaris says:

    it is true, there is no code in the source fla

  8. Heath says:

    You do realize the human eye can only process about 27 fps right? So anything higher then that only take up CPU processor speed and is completely pointless…. I like your tut except for the 60 fps thing. Sorry man, but get rid of that and use a lower FPS (30 FPS) and I will completely recommend your tutorial to my students here at the Art Institute of California.

    • Wrong fps says:

      That’s wrong. The human eye can process about 52 Fps.

    • kaustubh says:

      Trust me, this is coming from an experienced gamer. Anything under 45 fps will look extremely choppy.
      Myelinated nerves can fire between 300 to 1000 times per second in the human body and transmit information at 200 miles per hour. What matters here is how frequently these nerves can fire (or “send messages”).

      The nerves in your eye are not exempt from this limit. Your eyes can physiologically transmit data that quickly and your eyes/brain working together can interpret up to 1000 frames per second.

      However, we know from experimenting (as well as simple anecdotal experience) that there is a diminishing return in what frames per second people are able to identify. Although the human eye and brain can interpret up to 1000 frames per second, someone sitting in a chair and actively guessing at how high a framerate is can, on average, interpet up to about 150 frames per second.

      The point: 60 fps is not a ‘waste’. 120 fps is not a ‘waste’ (provided you have a 120hz monitor capable of such display). There IS a very noticable difference between 15 fps and 60 fps. Many will say there IS a noticeable difference between 40 and 60 fps. Lastly, the limit of the human eye is NOT as low as 30-60 fps. It’s just not.

      The origin of the myth: The origin of the myth probably has to do with limitations of television and movies. Movies, when they were recorded on film reel, limited themselves to 24 frames per second for practical purposes. If there is a diminishing return in how many frames people can claim to actually notice, then the visual difference between 24 fps and 60 fps could not justify DOUBLING the amount of film reel required to film a movie.

      With the advent of easy digital storage, these limitations are mostly arbitrary anymore.

      The numbers often cited as the mythological “maximum” the eye can see are 30 fps, 40 fps, and 60 fps.

      I would guess the 60 fps “eye-seeing” limit comes from the fact that most PC monitors (and indeed many televisions now) have a maximum refresh rate of 60hz (or 60 frames per second). If a monitor has that 60 fps limit, the monitor is physically incapable of displaying more than 60 fps. This is one of the purposes of frame limiting, Vsync and adjusting refresh rate in video games.

      tl;dr: The human eye can physiologically detect up to 1000 frames per second. The average human, tasked with detecting what framerate he/she is looking at, can accurately guess up to around 150 fps. That is, they can see the difference in framerates all the way to 150 fps.

      Phew.

      The USAF, in testing their pilots for visual response time, used a simple test to see if the pilots could distinguish small changes in light. In their experiment a picture of an aircraft was flashed on a screen in a dark room at 1/220th of a second. Pilots were consistently able to “see” the afterimage as well as identify the aircraft. This simple and specific situation not only proves the ability to percieve 1 image within 1/220 of a second, but the ability to interpret higher FPS.

  9. heathb says:

    You do realize the human eye can only process about 27 fps right? So anything higher then that only take up CPU processor speed and is completely pointless…. I like your tut except for the 60 fps thing. Sorry man, but get rid of that and use a lower FPS (30 FPS) and I will completely recommend your tutorial to my students here at the Art Institute of California.

  10. […] started with a the Pong tutorial from AS3 Game Tutorials. That tutorial is a good start, but will only give you the basic functions of the game. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s