main.mxml
GameObjectManager.as
GameObject.as
package
{
import flash.display.*;
import flash.events.*;
import flash.geom.*;
/*
The base class for all objects in the game.
*/
public class GameObject
{
// object position
public var position:Point = new Point(0, 0);
// higher zOrder objects are rendered on top of lower ones
public var zOrder:int = 0;
// the bitmap data to display
public var graphics:GraphicsResource = null;
// true if the object is active in the game
public var inuse:Boolean = false;
public function GameObject()
{
}
public function startupGameObject(graphics:GraphicsResource, position:Point, z:int = 0):void
{
if (!inuse)
{
this.graphics = graphics;
this.zOrder = z;
this.position = position.clone();
this.inuse = true;
GameObjectManager.Instance.addGameObject(this);
}
}
public function shutdown():void
{
if (inuse)
{
graphics = null;
inuse = false;
GameObjectManager.Instance.removeGameObject(this);
}
}
public function copyToBackBuffer(db:BitmapData):void
{
db.copyPixels(graphics.bitmap, graphics.bitmap.rect, position, graphics.bitmapAlpha, new Point(0, 0), true);
}
public function enterFrame(dt:Number):void
{
}
}
}
This class is designed to be extended to create more specific game elements like bullets, the player, the enemies etc. It has 4 properties. The position property simply defines the position of the GameObject on the screen. The coordinates (0,0) indicate a position in the top left of the screen, and the coordinates (1,1) indicate a position on the bottom right. The zOrder property defines the “height” of the object on the screen. A GameObject with a low zOrder (like a building on the ground) will be drawn beneath a GameObject with a higher zOrder (like the player). The graphics property is a reference to a graphics resource, which will be described later. This graphics resource is the picture that gets drawn to the back buffer. And finally the inuse property simply flags the object as being active in the game. We will use this property to allow the use of resource pooling later on.
The startupGameObject and shutdown functions should start to look familiar. The startup and shutdown pair of functions will be a common theme as we add more classes. In the GameObject they simply initialise variables, and add or remove the GameObject from the collection maintained by the GameObjectManager. The copyToBackBuffer function takes the pictures stored in the graphics property and copies them to the back buffer. The enterFrame function here is empty. This is because the GameObject is designed to be extended by more specialised classes, and it’s these specialised classes that will add logic inside the enterFrame function. The Bounce class is an example of how this is done.
Bounce.as
package
{
import flash.geom.*;
import mx.core.*;
public class Bounce extends GameObject
{
// movement speed of the bouncing object
protected static const speed:Number = 100;
// direction that the bouncing object should move (1 for right/down, -1 for left/up)
protected var direction:Point = new Point(1, 1);
public function Bounce()
{
super();
}
public function startupBounce():void
{
super.startupGameObject(ResourceManager.BrownPlaneGraphics, new Point(0, 0));
}
override public function shutdown():void
{
super.shutdown();
}
override public function enterFrame(dt:Number):void
{
super.enterFrame(dt);
position.x += direction.x * speed * dt;
position.y += direction.y * speed * dt;
if (position.x >= Application.application.width - graphics.bitmap.width)
direction.x = -1;
else if (position.x <= 0)
direction.x = 1;
if (position.y >= Application.application.height - graphics.bitmap.height)
direction.y = -1;
else if (position.y <= 0)
direction.y = 1;
}
}
}
The Bounce class is an example of a class that extends the base GameObject class to add some specialised logic to game element. In this case that logic is to simply bounce around on the screen.
Bounce has 2 properties. Speed defines how quickly the object will bounce around on the screen, and direction defines the x and y directions that the object is currently moving in.
Once again we have a pair of functions to startup and shutdown the object. I told you they would be a common theme. In this case we simply defer back to the GameObject startup and shutdown functions.
The enterFrame function is where the object updates itself during the render loop. The Bounce object simply moves in a straight line until it hits the edge of the screen, at which point it reverses direction. It’s not very smart, but the Bounce class will not play a part in the final game; its only purpose is as a simple demonstration how a GameObject is extended.
The final two classes that have been created to allow us to start drawing to the screen are the Resourcemanager and GraphicsResource.
Resource management is an important aspect of any game. How will you package the graphics and sound effects used by your game? How do you load them? Where are they stored? These are simple questions that can have big implications. Roughly speaking Flex gives you three options for accessing graphics and sound resources. The first is to load them from the local disk. While this is the traditional way to load resources it is not practical for a game that will be run from the web. For that Flex also allows you to load resources stored on a web server. But while this does eliminate the need to save anything to the end users local drive, it does mean that the game SWF file and the other game resources need to be stored as separate files. Thankfully Flex offers a 3rd option: embedding the resources directly into the final SWF file.
To embed a resource you use the Embed tag. As long as the file your are embedding is recognised by Flex (and that includes a huge range of graphics formats, as well as MP3s for sound) Flex will compile the file directly into the final SWF file, and expose the contents of the file through a class.
The ResourceManager is used as a place to embed and access the game resources. It has no functions at all: it’s only purpose is to expose properties that represent the embedded resources. Here we have defined 1 graphics resource: the brownplane.png image.
ResourceManager.as
package
{
import flash.display.*;
public final class ResourceManager
{
[Embed(source="../media/brownplane.png")]
public static var BrownPlane:Class;
public static var BrownPlaneGraphics:GraphicsResource = new GraphicsResource(new BrownPlane());
}
}
In order to use the embedded graphics we need to separate the alpha (or transparent) layer from the original picture. If you look back to the copyToBackBuffer function in the GameObject class you will see that the copyPixels function uses both the bitmap and alphaBitmap properties of a GraphicsResource object. Extracting and exposing these elements from an embedded picture is the sole purpose of the GraphicsResource class. Lets take a look at the GraphicsResource class now.
GraphicsResource.as
package
{
import flash.display.*;
public class GraphicsResource
{
public var bitmap:BitmapData = null;
public var bitmapAlpha:BitmapData = null;
public function GraphicsResource(image:DisplayObject)
{
bitmap = createBitmapData(image);
bitmapAlpha = createAlphaBitmapData(image);
}
protected function createBitmapData(image:DisplayObject):BitmapData
{
var bitmap:BitmapData = new BitmapData(image.width, image.height);
bitmap.draw(image);
return bitmap;
}
protected function createAlphaBitmapData(image:DisplayObject):BitmapData
{
var bitmap:BitmapData = new BitmapData(image.width, image.height);
bitmap.draw(image, null, null, flash.display.BlendMode.ALPHA);
return bitmap;
}
}
}
GraphicsResource has the two properties mentioned above: bitmap and bitmapAlpha. These are extracted from an embedded image passed into the constructor by the createBitmapData and createAlphaBitmapData functions. Once extracted they are in a form that is convenient to use with the copyPixels function used in the GameObject’s copyToBackBuffer function.
So what have we achieved here? We have built on the groundwork laid in parts 1 and 2 of the series to embed some resources (ResourceManager and GraohicsResource), created the base class for more specific game objects (GameObject), and then finally combine it all to add a moving object to the screen (Bounce).
In part 4 of the series we will add an object that the player can control, as well as create a scrolling background for the player to fly over.