We are now on Twitter!


Penguin wearing teacher's hatGame Development With FlashDevelop Part 1

Introduction

Welcome to our tutorial which will teach you how to create a simple arcade game based on the classic Space Invaders using ActionScript 3.

This tutorial isn't an introduction to programming in general and assumes a basic familiarity with object orientated programming and ActionScript 3 although it shouldn't be hard for anyone with knowledge of similar languages such as Java or C# to follow what is going on. Whilst this tutorial is focusing on creating Flash games, the same approach can easily be adapted to creating games in other programming languages and for other platforms.

There are a number of tools available which can be used to create Flash games. We will be using the freely available FlashDevelop IDE.

If you've not already got FlashDevelop then get it from http://www.flashdevelop.org/

Now download the zip file containing the graphics that we will be using:

Resources zip file


Creating the basic framework

To start off, open up FlashDevelop, go to the Project menu and create a new Flex 3 project.

Open up main.mxml. This is the starting point of a Flex application - an xml document defining the user interface. You'll see some code that looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Application>

Modify the contents of the <mx:Application> tag as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
height="400"
width="600"
layout="absolute"
frameRate="60"
enterFrame="enterFrame(event)"
initialize="init()"
creationComplete="creationComplete()"
click="click(event)"
activate="activate(event)">
<mx:Canvas x="0" y="0" width="100%" height="100%" id="canvas"/>
</mx:Application>

These changes define a few self explanatory attributes and specify some functions to call in response to various events. Also a canvas element taking up all of the available space is added. This is where the application will be doing all of its rendering.

At this point the application will not compile as none of the functions exist. Add an mx:Script element inside the mx:Application element and add these functions in as follows:

<mx:Script>
<![CDATA[
public function init():void
{

}


public function creationComplete():void

{

}


public function click(event:Event):void

{

}



public function enterFrame(event:Event):void

{

}


public function activate():void
{

}

]]>
</mx:Script>

The application should run now although it doesn't do anything yet. To rectify this, we'll add a bit of code into the enterFrame function which will clear and redraw the contents of the canvas element every frame. To start off with, let's make it flood the canvas with red so that we can see that the code is indeed updating the canvas...

public function enterFrame(event:Event):void 
{
canvas.graphics.clear();
canvas.graphics.beginFill( 0xFF0000, 1 );
canvas.graphics.drawRect(0, 0, this.width, this.height);
canvas.graphics.endFill();
}

Run the program and you should see that the screen is now red.

The next step is to add the classes we will need in order to make the application do something more interesting.

Add a new class called State (in the project browser, right click on the src folder and Add -> New Class).

Although abstract classes are not directly supported in ActionScript, this class will be functioning as an abstract class. For different game states, e.g. the menu screen, actually playing the game, the game over screen etc. a subclass of state could be created.

First we need to add a couple of import statements inside the package but outside of the class definition to load in some of the libraries that the State class will need to use:

import flash.display.*;
import mx.core.Application;

Next we'll add a BitmapData variable to the State class called buffer and initialize it within the State() constructor to have the same height and width as the application:

public var buffer:BitmapData;

public function State()

{
buffer = new BitmapData(Application.application.width, Application.application.height, false);
}

Every frame, a State object will render any game objects that need to be displayed onto the buffer and then the contents of the buffer will be copied onto the application's canvas.

The State class also needs a few functions adding - we'll call them Update() and Render().

public function Render():void
{

}


public function Update():void

{

}

These functions don't need to do anything as we will only ever be creating instances of subclasses of State(). These subclasses can override the Update and Render functions to provide whatever functionality is necessary for that particular State.

We'll also add a static variable to the State class which we will use to keep track of which State object the game should currently be using:

public static var currentState:State;

Next we'll create a subclass of State. Add a new class to the project called PlayState that extends State and add in some functions to override the Update and Render functions of State as shown below:

package  
{
import State;

public class PlayState extends State
{
public function PlayState()
{

}

public override function Render():void
{

}

public override function Update():void
{

}
}
}

First thing to do is to make the Render function do something. To start with, we'll just make it fill the buffer with a black rectangle.

public override function Render():void
{
buffer.fillRect( buffer.rect, 0x000000 );
}

Returning to the Main.mxml file, add to the Init function this line to create a new instance of PlayState and store it within the State class currentState variable

State.currentState = new PlayState();

In the enterFrame function. replace canvas.graphics.beginFill( 0xFF0000, 1 ); with

canvas.graphics.beginBitmapFill(State.currentState.buffer, null, false, false);

Also at the start of the enterFrame function add the following:

State.currentState.Render();

Every frame, the contents of the canvas will now be filled with whatever is in the current state's buffer.

Compile and run the app and you should see a black screen.

Although it doesn't appear to do anything to speak of, we now have a basic framework to which we can add some more interesting functionality. In the next installment, we'll add in a graphic of a spaceship and make it move around the screen and then go on to build the application into a simple space invaders style shooter.