Implementing game options

Game menu will be displayed on the lower part of of the frame and will have only three options:
- new game: start new game from the beginning
- continue: resume playing the game in progress
- settings: display game settings

Each option requires one image, but "continue" option can also be disabled (when there is no game in progress) and requires one extra image. As you can see on the picture bellow, all labels were put in one file. To draw required option, we will have to set appropriate source area for copyPixel function. If you are making your own version of options, you can, put each image into its own file, but you will have to make few adjustments in the source code.

If you wish to use my version anyway, download project for this chapter and copy GameOptions.png from Images folder into your own project folder. Unfortunately, downloading image directly from this page is not recommended, because transparency of the image is not preserved.

When your or my version of GameOptions.png is stored inside Images folder, embed it the same way as we did TitleScreen.png in the chapter 6. Add this line at the end of file Images.as:

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

Draw_GameOptions function that paints all three options in screen buffer does not look much different from Draw_TitleScreen function we implemented in chapter 6. Put the following piece of code at the end of SnakesAdventure.as file:

private var gameOptionsBitmap:BitmapData = null;

private function Draw_GameOptions():void
{
  if (gameOptionsBitmap == null)
  {
    gameOptionsBitmap = new BitmapData(260,200,true,0x00000000);
    gameOptionsBitmap.draw(new gameOptionsImg());
  }

  screenBuffer.copyPixels(gameOptionsBitmap,
                          new Rectangle(0, 0, 260, 50),
                          new Point(110,250));

  screenBuffer.copyPixels(gameOptionsBitmap,
                          new Rectangle(0, 50, 260, 50),
                          new Point(110,320));

  screenBuffer.copyPixels(gameOptionsBitmap,
                          new Rectangle(0, 150, 260, 50),
                          new Point(110,390));
}

As before we first check if Bitmap object was already created and if it was not, we create it.
This time we have specified fourth parameters in BitmapData constructor and set it to 0x00000000 (set all bits in the bitmap to zero). By default all bits are set to one (non-transparent white colour), but they have to be set to zero for transparent images, otherwise transparency channel of original image is lost.

Three calls of copyPixels function draw all three options into screen buffer. In my version of GameOptions.png width and height of each option is 260x50 pixels, that is why size of each rectangle area is also 260x50 pixels.

First call draws new game option slightly bellow the centre of the frame. To set the correct position, you specify location (third parameter) of the upper-left corner (not the centre) where the copy of source bitmap begins. That is why you have to subtract centre position of the source bitmap from destination location. If you wish to place new game option in the centre of the frame (remember, frame size is 480x480 pixels so the centre is at 240,240), substract 130 from horizontal position and 25 from vertical (130,25 is the centre of the each option bitmap area). Position 110,215 will draw the new game option in the centre of the frame. Because in my version of title screen game, the title text is very big, I had to move new game option slightly bellow the centre of the frame, by setting vertical position to 255.

Second call of copyPixels function draws the (enabled) continue option. We use the same bitmap here, but we have to specify different source area rectangle and different location in the screen buffer. Source area is 50 pixels bellow new game option (vertical position set to 50) and the vertical location in the screen buffer is increased by 70 pixels. As you can see on the picture above, vertical gap between first and second option is a little bit bigger (extra 20 pixels) than on the original image.

Last call of copyPixels function draws the settings option. Source image area is set to the bottom of the image (vertically from pixel 150-199) and location on the screen buffer is set 70 pixels bellow continue option.

To actually draw game options, you have to add Draw_GameOptions function call into Draw function, after Draw_TitleScreen(). Don't insert it before Draw_TitleScreen(), because in that case title screen will be drawn over game menu options.

Options background

If you have my version of project for this chapter on your disk, you probably noticed GameOptionBackground.png file in Images folder. This file has three versions of options background, one for disabled, one for enabled and one for selected option. Maybe the second and third background image look the same, but selected one is a little bit smaller and has white glow.

Before we implement the code that paints background of the game options, we have to do all the stuff we did for title screen and game options image:

- embed (file Images.as):

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

- define: (file SnakesAdventure.as) add the line after definition of gameOptionsBitmap variable:

private var gameOptionBackgroundBitmap:BitmapData = null;

- create: (file SnakesAdventure.as) insert this piece of code into Draw_GameOptions function, before or after the code that creates gameOptionsBitmap object. The only thing that matters is that object is created before it is used.

if (gameOptionBackgroundBitmap == null)
{
  gameOptionBackgroundBitmap = new BitmapData(340,240,true,0x00000000);
  gameOptionBackgroundBitmap.draw(new gameOptionBackgroundImg());
}

Now we are ready to implement the code that actually paints background of game options. As you can see on the picture, each option has its own background, enabled options has different background than disabled. We will also change the code that paints continue option, so that the grey (disabled) label is drawn instead of blue one.

Insert the code bellow into Draw_GameOptions function, before the code that paints options labels.

screenBuffer.copyPixels(gameOptionBackgroundBitmap,
                        new Rectangle(0, 80, 340, 80),
                        new Point(70,235));

screenBuffer.copyPixels(gameOptionBackgroundBitmap,
                        new Rectangle(0, 0, 340, 80),
                        new Point(70,305));

screenBuffer.copyPixels(gameOptionBackgroundBitmap,
                        new Rectangle(0, 80, 340, 80),
                        new Point(70,375));

As you can see, this block of code is similar to one that draws the labels. There are, of course three differences: different source bitmap is used, different source areas are set and locations are slightly different.

Background image is 60 pixels wider and 30 pixels higher than labels, that's why the location in copyPixel function has to be set 30 pixels left and 15 up from label. Vertical offset between backgrounds is the same as offset between labels.

To display disabled continue option, we have to make a minor change in the code that paints continue option. Change vertical position in the source area rectangle from 50 to 100.