Create an Atari Inspired Boxing Game With AS3


In this Premium Tutorial, you'll learn to create an entertaining retro game using Flash and ActionScript 3.0. Check out the demo - the result is based on the classic Boxing for the Atari.

Step 1: Brief Overview

Using the Flash drawing tools we'll create the graphic interface that will be powered by several ActionScript 3 classes.

The player will be able to move and fight against the opponent within the given time.

Step 2: Flash Document Settings

Open Flash and create a 320 pixels wide, 480 pixels tall document. Set the Frame rate to 24fps.

Step 3: Interface

A colorful nice looking interface will be displayed, this involves multiple shapes, MovieClips and more.

Continue to the next steps to learn how to create this GUI.

Step 4: Background

A simple green rectangle will fill the stage.

Select the Rectangle Tool (R) to create a 320x480px #649428 rectangle and center it in the stage.

Step 5: Boxing Ring


Using the same tool create a series of #FF9A2E rectangles to build a 290x213px ring.

Step 6: Characters

To get the pixelated effect on the characters, use the rectangle tool to create small rectangles and squares to match the image above. You might like to download this image and put it on a lower layer in your timeline, then place rectangles over it.

Step 7: Dynamic TextFields

Three Dynamic TextFields are placed in the stage, they will be used as hit counters and a timer. Check the image above and place them accordingly.

Step 8: Embed Font

In order to use a custom font in a Dynamic Textfield we will need to embed it first.

With the textfield selected, go to the Properties Panel and click on the embed button, a dialog will be presented where you can select the necessary characters used in your game. Alternatively, just check "Uppercase", "Lowercase", "Numerals", and "Punctuation".

Step 9: Instance Names

Convert the stage shapes to MovieClip and give them the instance names shown in the image.

Step 10: Tween Nano

We'll use a different tween engine from the default included in Flash, this will increase performace as well as being easier to use.

You can download Tween Nano from its official website.

Step 11: Create a New ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as in your class folder.

Step 12: Class Structure

Create your basic class structure to begin writing your code.

Step 13: Required Classes

These are the classes we'll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.

Step 14: Variables

These are the variables we'll use, read the comments in the code to know more about them; some of their names are self-explanatory so there will be no comment there.

Step 15: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object, or runs when the SWF loaded if part of the Document Class.

It calls the necesary functions to start the game. Check those functions in the next steps.

Step 16: Stop Characters

We'll start by calling the addListeners function and stopping the characters' animations.

Step 17: Add Listeners

Next we add the necessary key and enterframe listeners.

Step 18: Add Timers

...Followed by the required timers:

Step 19: Time Counter

This function runs every second, it handles the timer in the stage.

Step 20: Two Digit Timer

We'll add a 0 to the left of the seconds if the number is below 10 (so the timer will always have two digits).

Step 21: Move Player

Here we detect the key pressed and change the variable accordingly. We could move the player using this same function but the movement won't be smooth as if we used an enterframe event.

Step 22: Stop Player

This function detects the released key to stop the player's movement.

Step 23: Set Main Class

Let's stop here to make a quick test and make sure that our game code is working.

Add the class name to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.

Now try it out. The timer should count down and the images should appear, but movement will not work yet:

Keep in mind that some lines have been commented as some functions haven't been created yet.

Remember that the Milestones are included in the source files, so if for some reason your file doesn't mimic this one take a look at the source to see what could be causing that.

Step 24: Player Attack

This function changes the frame in the player's MovieClip to the attack frame.

Step 25: Stop Player Attack

Stops the player attacks.

Step 26: Update Function

One of the principal functions in the class, contains the logic code that will be executed on enterframe. I've broken up the explanation across the next few steps.

Step 27: Controls

Check for the movement variables to move the player.

Step 28: Stage Borders (Player)

Prevent the player from leaving the ring.

Step 29: Stage Borders (Opponent)

Prevent the enemy from leaving the ring.

Step 30: Player-Opponent Collisions

The characters are repelled if a collision occurs (not attacking).

Let's make another pause to see how our code works at this point. Use arrow keys to move, and Z/X to punch:

Step 31: Player-Opponent Hits

A hit will be added to the counter when the player/enemy fist hits the head of the enemy/player.

Step 32: Enemy AI Function

The second principal function, this time handling the enemy AI.

Step 33: Enemy Movement

This lines control the enemy movement.

Step 34: Enemy Attack

This code handles the enemy's attack. It basically checks its position and punches when the fist can hit the player's head.

Step 35: Remove Listeners

The listeners will be removed when the time is over.

Step 36: Stop Timers

...As will the timers.

Step 37: Show Alert

An alert will be shown after that, this code instantiates the alert.

Step 38: Check for Win or Lose

In order to display the correct text in the alert, we check the hits counters to determine the result.

Step 39: Restart

The next function will reload the SWF, resetting all variables and returning to the first screen.

Step 40: Test

We are now ready to test our game and check that everything works as expected.


You've created a very entertaining game, try to add your own features and graphics. I hope you liked this tutorial, thank you for reading!