Creating a Flash Game “Main Loop” Example

A very typical game programming approach is to have a main loop that executes once per frame.  After playing around for a few hours with Flash CS4, I figured out how to do it with flash+actionscript.

1. Get the Flash CS4 trial, it’s good for 30 days.

2. Start a new Flash File (ActionScript 3.0)

3. Save the (empty) file.  I named mine “MattTest”.

4. Change the class under properties to code.Game.  This connects the movie we’re editing, with the actionscript we’re about to create.
flash_properties

5. Create a directory named code in the same location (important!) you saved your flash file.
flash_dir_struct

6. In the code directory, create a file named Game.as with the following text.  Actionscript files are just plain text files, so any editor can be used.  To use the Flash editor, choose File->New->Actionscript File.

package code
{

Actionscript allows developers to encapsulate code in namespaces with the package keyword–very useful for component developers. In Actionscript, Namespaces must align with the filesystem! That’s why it’s important that we created the code directory in an earlier step, and why we same Game.as there. We didn’t have to use a package name–we could have saved Game.as in the same directory as the .fla file, but doing so allows a “cleaner” project directory structure.

    import flash.events.Event;
    import flash.display.MovieClip;

Some imports which allow us to reference other namespaces.

    public class Game extends MovieClip
    {
        var frame:int = 0;

Because we set our flash file to be of class code.Game, the code.Game class must be a subclass of MovieClip.

In this simple example, we’ll just count the frames as they go by, so the frame class variable will store the frame count.

        public function Game()
        {
            addEventListener(Event.ENTER_FRAME,enterFrameHandler);
        }

The constructor is a function named the same as the class. As far as I can tell, the file needs to be named the same as the class, too. The ENTER_FRAME event is fired at the start of every frame. So, adding an event callback for that will create the “main loop” for the game.

        protected function enterFrameHandler(event:Event):void
        {
            frame++;
            frameNumber.text = "Frame " + frame;
        }

Right now, the main loop (the callback function for the ENTER_FRAME event) just increments the frame count and updates a text control named frameNumber.

The whole Game.as file looks like this:

package code
{
	import flash.events.Event;
	import flash.display.MovieClip;

	public class Game extends MovieClip
	{
	    var frame:int = 0;

		public function Game()
		{
			addEventListener(Event.ENTER_FRAME,enterFrameHandler);
		}

		protected function enterFrameHandler(event:Event):void
		{
		    frame++;
			frameNumber.text = "Frame " + frame;
		}

	} // end of class Game

} // end of package code

7. Finally, we need to add the text field that gets updated in the main loop. In the flash file, choose the text tool and drag a field onto the stage. Use the selection tool to select the text field. I typed “frame counter” into my control on the stage so that I know what that field is used for at a glance.

flash_framecounter

With the field selected, go to the properties tab. Set the name to “frameNumber” (the name we used in code above) and the type to “Dynamic Text.”

flash_framecounter_props

8. Save the file (ctrl+S) and preview it (ctrl+enter).  You should see a blank screen with an increasing frame counter.  Now the many game code examples for main loops on the internets are useful for your flash game development!

I suppose this code will s-plode once the frame count exceeds the sizeof int.  I haven’t waited that long to find out…

Advertisements
This entry was posted in code, flash, games. Bookmark the permalink.

4 Responses to Creating a Flash Game “Main Loop” Example

  1. lala says:

    cool, i like explanation, but how can i limit this ?? force to set my own frame rate, so it works same on slow or fast computers??

    • Steven says:

      Flash controls the frame rate so you don’t need to worry about it having a consistent speed. You can change the frame rate it uses in the properties box.

  2. Ryan says:

    Great tutorial, this is exactly what I was looking for. Perfect for someone who is familiar with game programming in other languages and is looking into Flash for the first time.

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