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.

Other Articles in this Series

Bookmark the permalink.

10 Comments

  1. I figured out how to get the compiler to work. It will test movie now.

    However, on section 2, after I copied and pasted the game.as code you provided, after altering the main.as section, I get an error “expecting identifier before package”. Are there really supposed to be two packages? I tried putting a { or } somewhere in there but to no avail.

    • Whoops, no – thats a typo- just need one ‘package’ on there (package will normally just be telling what folder the fiel is in- if under src, it will just say: package{} – if under sar src/game/characters, it will be ‘package game.characters{}’

      I’ll update it-

      Thanks!

  2. Hi Chris,

    first of all: thanks for sharing your knowledge.

    To my question:
    what if I want to load a jpeg file showing a cool picture of a stary deep space instead of just a black screen generated via code? Do I still have to use a BitmapData (and maybe a loader too)?

    Thanks in advance
    Ivano

  3. For some reason it’s not rendering anything. So every time I compile it, it shows the original background instead of the one that’s supposed to be rendering (it shows white instead of black). I even copy/pasted the code you have, but it’s still not rendering! In every debugging program I’m using it’s just not rendering!

    • OK, this is stupid, it’s not even tracing “Game’s working!”

      Help, please.

      • Are you using flashdevelop? Did you get the flash debug version for ie/ firefox? (Right click on your flash window when it is showing, and see if it shows something about ‘debug version’ there).

        You can always send me the code/project. I can test it on my end, but it sounds like a problem with something not being setup right- tracing should work.

  4. Whenever I do Ctrl + enter it says “23 col:19 Error: Function does not have a body.” there isn’t even anything on line 23, it’s blank. What do I need to do to fix this?

  5. hey

    i am doing this but i am not using bitmaps but SWF( if i am correct ) so does any one know what to change or… what do i need to do ( i am doing a school project i need to make an astroid game so i would appreciate any help )

Leave a Reply

Your email address will not be published. Required fields are marked *