Creating a Asteroids Flash Game Part 2: Creating the Game Class and rendering the background

In the previous section, we planned out what we are going to accomplish with the game, and setup the flashdevelop environment for creating our asteroids game,.

The game can’t be asteroids without being in space. For this, we’ll create and add the background bitmapdata to our stage, and create a game class to handle everything associated with creating and handling the game.

Creating the Game class

First, lets create the game class. Right click on the ‘src’ folder and go to “Add-> New Class”, and name it ‘Game’ and click ‘ok’.

Now that you have your Game class, we’ll start filling it in. To be able to draw on the screen, we’ll need to have a bitmap to be able to add to the stage, and a bitmapdata to add to the bitmap.
For the game constructor, we’ll want to pass in the size and width of the screen, so that we can draw on it. So we change Game.as to:

package
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;

    public class Game
    {
	 public var bitmap:Bitmap;
   	 public static var Renderer:BitmapData;
   	 public function Game(stageWidth:int, stageHeight:int)
   	 {
   		 trace("Game created");
   		 Renderer = new BitmapData(stageWidth, stageHeight, false, 0x000000);
   	 	 bitmap = new Bitmap(Renderer);
   	 }
    	public function Render():void
   	 {
   	 }
    	public function Update():void
	{
	}
   }
}

First we create a bitmap for the class, and a bitmapdata (renderer) static variable for the class. We make it static so that other classes will have access to the bitmapdata to be able to draw directly to it.

We only need the bitmap to be able to add it to the stage- after that we’ll just be using the bitmapdata (renderer) for all the drawing.

Next we need to go back to the ‘Main.as’ to create the game object, and create the main game loop.

package
{
    import flash.display.Sprite;
    import flash.events.Event;

    public class Main extends Sprite
    {
   	 private var game:Game;
   	 public function Main():void
   	 {
   		 if (stage) init();
   		 else addEventListener(Event.ADDED_TO_STAGE, init);
   	 }

   	 private function init(e:Event = null):void
   	 {
   		 removeEventListener(Event.ADDED_TO_STAGE, init);
   		 // entry point

		//create the game object passing in the swf width and height
   		 game = new Game(stage.stageWidth, stage.stageHeight);

		//add the game bitmap to the screen/ Main.as Sprite to make it visible
   		 addChild(game.bitmap);

		//Create the main game loop
   		 addEventListener(Event.ENTER_FRAME, Run);
   	 }
   	 private function Run(e:Event):void
   	 {
   		 game.Update();
   		 game.Render();
   	 }
    }
}

We create the game object, passing it the stage size so we can render the bitmap out full sized, and we create out main game loop “Run”, which is setup to run on “ENTER_FRAME”, which means every time is a frame is rendered, it will call our ‘Run’ function, which in turn call our game class ‘Update’ and ‘Render’ functions.

Right now if you compile (ctrl+enter) – you’ll get a black screen, which means the bitmap is being added successfully to the stage, and it is using the bitmapdata we created.

This may not look very exciting, but it is the basic way of creating a continuously repeating game loop, and creating the background to render all of our objects onto.

In the next section we will add a base game sprite to use to draw all of our game objects and create a vector based ship

Download the source Code and please leave me any comments or feedback you have.

Creating the Game class

Other Articles in this Series

10 thoughts on “Creating a Asteroids Flash Game Part 2: Creating the Game Class and rendering the background”

Leave a Comment Cancel Reply