Displaying the title screen

We have done a lot of work by now, but still there is nothing going on. It is time to add some graphics. First we will implement title screen and meanwhile explore basics of graphics programming in Flex.

Title screen will be displayed as soon as the game starts. I've made simple picture for the title screen background, but I bet you can do better picture yourself, just make sure it has the same size as game frame. If you wish to use my picture anyway, download complete project for this chapter. Title screen image can be found inside Images directory, under the name TitleScreen.png.

Embedding image into SWF file

We will embed all content files into SWF files, which will make distribution of the game easier. Embedded files become part of the SWF file during the compilation process. Alternative approach, that we won't use, is to load external content files at runtime from disk, web...

There are three things we have to do, to embed the title screen image into SWF file. First you need image file inside project folder. Put the TitleScreen.png into Images folder under project root.

Next, create empty file in text editor and add this line of code at the beginning:

[Embed(source="Images/TitleScreen.png")] private var titleScreenImg:Class;

and save file into project folder under the name Images.as. In this file we defined new class that represents content file.

Now we have to include Images.as into SnakesAdventure.as. Add the following line under the import statements at the beginning of the file:

include "Images.as";

At this point you can recompile the application, but before you do, check the size of SnakesAdventure.swf file. When compilation is complete, size of new SnakesAdventure.swf file should increase according to the size of embedded image file. In my case size, where TitleScreen.png file is almost 130KB, but size of SWF is increased by more than 150KB. I also experienced slight increase of compilation time. Anyway, increase of SWF file size indicates that image file was successfully embedded into application.

Displaying the image

There are many different ways to display images in ActionScript. Performance in game development is crucial, that is why we will use fastest approach. For every image, we will create new BitmapData object and copy content of embedded image into it. This way we can use copyPixels routine to copy pixels directly from image into screen buffer. You can find all you need to know about copyPixels function in Flex online reference manual.

Open SnakesAdventure.as in text editor and add the following source code at the end of the file:

private var titleScreenBitmap:BitmapData = null;

private function Draw_TitleScreen():void
{
  if (titleScreenBitmap == null)
  {
    titleScreenBitmap = new BitmapData(SCREEN_WIDTH,SCREEN_HEIGHT);
    titleScreenBitmap.draw(new titleScreenImg());
  }

  screenBuffer.copyPixels(titleScreenBitmap,
                          new Rectangle(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT),
                          new Point(0,0));
}

In the first line we declared global variable titleScreenBitmap. This variable will be the reference to BitmapData object with copy of embedded title screen image. The reference will be set when the object is create, null value indicates that variable does not have reference yet.

In the first line of Draw_TitleScreen function we check if titleScreenBitmap already has reference. If not (null), object was not made yet, so we have to create it first. In constructor of BitmapData we have to specify image size, that is same as game frame size, so we can safely use SCREEN_WIDTH and SCREEN_HEIGHT constants. Next line of code creates embedded title screen image object and copies content of image into BitmapData object. Now we have copy of embedded image that we can use.

Last instruction copies pixels from image copy on the screen buffer and eventually on the gamePanel. As you can see, copyPixels routine requires at least three parameters defined:
- source bitmap image
- area of source image that will be copied. Area is defined with Rectangle object. First two parameters represent top left pixel in source image, last two represent width and height of area
- top left position on destination image (in our case screen buffer) where pixels will be copied.

In our case, title screen image and screen buffer have equal size and we have to copy all 480x480 pixels from source image into the buffer of the same size.

Now that we implement Draw_TitleScreen function, we have to call it. Insert this line into Draw function:

Draw_TitleScreen();

Recompile the project and open SnakesAdventure.swf again. If you did everything right, you should see the title screen image displayed right after the application starts.

In case you have trouble understanding the code so far, I recommend that you take some time and experiment on the existing code. Change values of source image area or destination position in copyPixel function call, use different images for the background... Just don't forget to recompile and rerun after you make changes.