Flex game development

Keyboard controls

2010-04-29T10:15:00.000-07:00

In chapter 24 it was explained how to handle keyboard events. In this chapter, we will add new functionality into existing code, that will allow player to control the snake with cursor keys.

If you wish to find out the difference between controlling the snake with cursor keys or with the mouse, try the final version of the game, embedded bellow.

KeyDown

In chapter 24 we added keyUp event handler to application, which called functions KeyUp (SnakesAdventure.as) and KeyUp_Game (Game.as), whenever any key on the keyboard was released. In case user pressed Escape key, game paused right after the key was released and program switched to GAME_MENU state.

When the player intends to change direction of the snakes motion, he would expect that direction will change right after the key was pressed, not released. That's why we have to implement new event handler, that will handle keyDown events.

New event handler is defined in file SnakesAdventure.mxml inside mx:Canvas element:

keyDown="KeyDown(event)"

Whenever any key on the keyboard is pressed, program calls KeyDown function, implemented in file SnakesAdventure.as:

private function KeyDown(event:KeyboardEvent):void  
{
  switch (state)
  {  
  case GAME:  
    KeyDown_Game(event);
    break;
  }
}

We've used the same approach here, that was used in KeyUp. Whenever the event occurs, the event handling routine executes the appropriate KeyDown_Game, if the GAME state is active. KeyDown_Game function can be found in Game.as:

private function KeyDown_Game(event:KeyboardEvent):void 
{   
  switch (gameState)
  {  
  case GAME_PLAYED:
    var direction:int = snake.getDirection(); 

    switch (event.keyCode)
    {
    case Keyboard.UP:
      if ((direction == Snake.EAST) || (direction == Snake.WEST))
        snake.setDirection(Snake.NORTH);
      break;
    case Keyboard.DOWN: 
      if ((direction == Snake.EAST) || (direction == Snake.WEST))
        snake.setDirection(Snake.SOUTH);
      break; 
    case Keyboard.LEFT: 
      if ((direction == Snake.NORTH) || (direction == Snake.SOUTH))
        snake.setDirection(Snake.WEST);    
      break; 
    case Keyboard.RIGHT:
      if ((direction == Snake.NORTH) || (direction == Snake.SOUTH))
        snake.setDirection(Snake.EAST);       
      break;       
    } 
    break;
  }
}

When the player presses any key during the game (while GAME_PLAYED state is active), function KeyDown_Game checks if it was one of cursor keys. If it was, if statement verifies if direction of motion can be changed to desired direction. For instance, player cannot change direction from north to south by pressing the down key. Only east and west directions are legal in this case.

If you download project package of the final version of the Snake's adventure, and open Game.as file, you will see that final version of KeyDown_Game function is much more complex. This is because in final version of the game, it can be activated by pressing one of the cursor keys.

If you implemented the similar keyboard event handler in your own game, you most probably noticed one problem, which are related with this new functionality.

Focus

When the game is embedded into web page, game panel does not have focus by default, which means the program will not receive events when key is pressed. Game panel is focused whenever user clicks on game panel with the mouse button. This is one of the reasons that something like "Click here..." is displayed at the beginning of almost any Flash game.

The following situation is much harder to deal with: game panel lost focus while the game is running and again, program stopped receiving key events. Situations like this happen rarely, but when they are, it can be quite frustrating for the player. One solution for situations like this, is to pause the game, and display the banner that says, for example, "Game paused, click here when you are ready".

All you have to do, is to define two event handlers in the root element (mx:Application) of mxml file. This is the example from SnakesAdventure.mxml:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    name="SnakesAdventure"
    backgroundColor="#000000"
    horizontalAlign="center"
    creationComplete="Init();"
    enterFrame="UpdateFrame();"    
    activate="Activated(event);"
    deactivate="Deactivated(event);"
    paddingLeft="0"
    paddingTop="0"
    paddingBottom="0"
    paddingRight="0"
    width="480" height="480"
    preloader="Classes.PreLoader">
...

Attribute deactivate creates new event handler, that executes Deactivated function. deactivate events occur whenever player clicks outside the game panel, browser is minimized, new window or tab becomes active... Attribute activate creates event handler, that executes Activated function. Event is dispatched when application becomes active and has focus. You can find example of both functions in file SnakeAdventures.as.

Custom progress bar

2010-04-28T11:01:00.000-07:00

Previous 24 chapters teaches you, how to make your own game with Flex. In the following few chapters I will focus mostly on the alternatives, that should considered, before you submit or publish your own product. I call them alternatives, because there are some disadvantages, you should consider, before you implement them. Of course both advantages and disadvantages will be mentioned in the tutorial.

In chapter 10 it was explained, how to embed SWF file into the HTML web page. Now let's presume you have made a web page where you have publish the demo of your game. Everything works fine, even the progress bar is displayed, while the game is downloading. This is the default progress bar that appears in many Flex applications. Player will most probably see it only the first time he/she enters the web page. The next time, demo will load immediately, because it was stored on the local file system, after it was downloaded for the first time.

You may be asking, why bother implementing custom progress bar, that will be visible only for few seconds and will not affect the players experience at all. Well, the best answer, I can give you, is: because you can. Snake's Adventure is my third game made with Flex, and I got a little tired of watching the same progress bar, I have also seen in numerous other games and demos. I just had to do something about it.

I hope that you have noticed, how the new progress bar in game, embedded above, works. If you did not pay attention before, you can reload the page and you will most probably see the progress bar for one or two seconds, because the SWF file is already cached. If you wish to see the slower version (depends on the bandwidth of your internet connection) you can clear the browsers cache or open this page in different browser. You can also visit Snake's Adventure official web page on my website.

Anyway, let's focus on implementation of the custom progress bar. Custom progress bar has to be implemented in its own class. Class and all embedded resources, that are required to display the progress bar, are stored at the beginning of SWF file. Until this part of SWF file is downloaded, area taken by embedded file in the web page, remains blank. It is wise to keep the size of embedded resources at minumum (use JPEG format for background image and please, do not try to play mp3 files, while the game is downloading).

Application preloader attribute

Unless it is not defined, that custom progress bar should be displayed during download, default progress bar will be displayed. Inside the main source file (.mxml) we have to define, which class contains the implementation of the custom progress bar. preloader attribute inside mx:Application element at the top of SnakesAdventure.mxml, defines the class:

preloader="Classes.PreLoader"

class PreLoader

Implementation of custom progress bar can be found in PreLoader.as file, which is located inside Classes folder. You can view complete file with additional comments, if you download the project package of the final version of the Snake's adventure. This is the short (but fully functional) version of PreLoader.as:

package Classes 
{
  import flash.geom.*;
  import flash.display.*;
  import flash.utils.*;
  import flash.events.*;
  import flash.net.*;
  import mx.preloaders.*; 
  import mx.events.*;
  import mx.controls.*;

  public class PreLoader extends Sprite implements IPreloaderDisplay
  {
    protected var _msecMinimumDuration:Number = 1000;
    protected var _IsInitComplete:Boolean = false;
    protected var _timer:Timer;
    protected var _bytesLoaded:uint = 0;
    protected var _bytesExpected:uint = 1;
    protected var _fractionLoaded:Number = 0;

    public function PreLoader()
    {
      super();
    }

    private var screenBuffer:BitmapData = null;

    virtual protected function draw():void
    {          
      screenBuffer.copyPixels(titleScreenBitmap,
                    new Rectangle(0, 0, 480, 480),
                    new Point(0,0));  

      screenBuffer.copyPixels(progressBitmap,
                    new Rectangle(21, 8, 286 * _fractionLoaded, 36),
                    new Point(96,305));                               

      screenBuffer.copyPixels(progressBitmap,
                    new Rectangle(0, 50, 330, 70),
                    new Point(75,290)); 

      graphics.clear();    
      graphics.beginBitmapFill(screenBuffer, null, false, false);
      graphics.drawRect(0, 0, 480, 480);
      graphics.endFill();   
    }

    [Embed(source="../Images/TitleScreen.jpg")] private var titleScreenImg:Class;
    private var titleScreenBitmap:BitmapData = null;     

    [Embed(source="../Images/ProgressBar.png")] private var progressBarImg:Class;
    private var progressBitmap:BitmapData = null;  

    virtual public function initialize():void
    {
      screenBuffer = new BitmapData(480, 480, false, 0x00000000);    

      titleScreenBitmap = new BitmapData(480,480,true);
      titleScreenBitmap.draw(new titleScreenImg()); 

      progressBitmap = new BitmapData(330,120,true,0x00000000);
      progressBitmap.draw(new progressBarImg()); 

      _timer = new Timer(1);
      _timer.addEventListener(TimerEvent.TIMER, timerHandler);
      _timer.start();
    }

    protected var _preloader:Sprite;

    virtual public function set preloader(value:Sprite):void
    {
      _preloader = value;

      value.addEventListener(ProgressEvent.PROGRESS, progressHandler);    
      value.addEventListener(Event.COMPLETE, completeHandler);

      value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
      value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
    }

    virtual public function set backgroundAlpha(alpha:Number):void{}
    virtual public function get backgroundAlpha():Number { return 1; }

    protected var _backgroundColor:uint = 0xffffffff;
    virtual public function set backgroundColor(color:uint):void { _backgroundColor = color; }
    virtual public function get backgroundColor():uint { return _backgroundColor; }

    virtual public function set backgroundImage(image:Object):void {}
    virtual public function get backgroundImage():Object { return null; }

    virtual public function set backgroundSize(size:String):void {}
    virtual public function get backgroundSize():String { return "auto"; }

    protected var _stageHeight:Number = 480;
    virtual public function set stageHeight(height:Number):void { _stageHeight = height; }
    virtual public function get stageHeight():Number { return _stageHeight; }

    protected var _stageWidth:Number = 480;
    virtual public function set stageWidth(width:Number):void { _stageWidth = width; }
    virtual public function get stageWidth():Number { return _stageWidth; }

    virtual protected function progressHandler(event:ProgressEvent):void
    {
      _bytesLoaded = event.bytesLoaded;
      _bytesExpected = event.bytesTotal;
      _fractionLoaded = Number(_bytesLoaded) / Number(_bytesExpected);

      draw();
    }

    virtual protected function completeHandler(event:Event):void
    {
    }

    virtual protected function initProgressHandler(event:Event):void
    {
      draw();
    }

    virtual protected function initCompleteHandler(event:Event):void
    {
      _IsInitComplete = true;
    }

    virtual protected function timerHandler(event:Event):void
    {
      if (_IsInitComplete && getTimer() > _msecMinimumDuration)
      {    
        _timer.stop();
        dispatchEvent(new Event(Event.COMPLETE));
      }
      else
        draw();
    }  
  }
}

Even without comments, PreLoader class contains a lot of code. There are only few parts, that you need to understand, if you wish to create a different version of progress bar.

Embed statements take care of compiling all required resources (images) into SWF file.

Function initialize is executed right after class and resources are download. This is the perfect place to create screen buffer and all BitmapData objects with copies of embedded images. At the end, we create a Timer object, that will trigger every millisecond (only in theory, in practice it will trigger approximately every ten milliseconds) and execute timerHandler function, implemented at the bottom of the class.

In preloader function we assigned four event listeners:
- ProgressEvent.PROGRESS will execute progressHandler function from time to time as the SWF is downloading. Event has two properties bytesLoaded (size of SWF file, that has already been downloaded) and bytesTotal (total size of SWF file)
- Event.COMPLETE will execute completeHandler function, when download is finished
- FlexEvent.INIT_PROGRESS will execute initProgressHandler function from time to time as the initialization continues
- FlexEvent.INIT_COMPLETE will execute initCompleteHandler function when initialization is complete.

Function draw will be called frequently from progressHandler and timerHandler functions. Whenever draw is called, background image (TitleScreen.jpg) is copied into screen buffer, first. After that, fraction of upper portion of progress bar image (ProgressBar.png) is copied. Lower portion of progress bar image is copied over the progress bar. This is the reason that progress bar is maybe not so obvious as it should be, but you can fix this in your own version.

Finally, the content of screen buffer is copied into the graphics object of the container, that takes care of displaying progress bar on the screen.

Pause, continue and settings

2010-03-21T08:45:00.001-07:00

There is not much more to say about Flex game development, at least from the technical point of view. If you followed this tutorial from the beginning, you should have enough knowledge to make a great game. You just need a good idea and will to realize it.

As far as programming is concerned, Snake's Adventure is almost complete. But overall, it is still far from finished. It requires more content, graphics, sound effects and music.

There are still few things to do, before this tutorial is complete. At the beginning of this tutorial, we were working on game menu. While we were exploring the basics of graphics and event handling, we implemented new game option in the game menu, but continue and settings options still remain unimplemented.

Pausing the game

When the player has to pause the game for a moment, he will most probably press Escape or Space key on the keyboard. Our program is currently able to detect when mouse key is pressed or released. If we wish it would be able to detect key events, we have to implement Keyboard event handler. Piece of cake...

Open file SnakesAdventure.mxml and add new event handler to mx:Canvas element:

keyUp="KeyUp(event)"

Whenever any key on the keyboard is released, program executes KeyUp function, implemented in file SnakesAdventure.as:

private function KeyUp(event:KeyboardEvent):void  
{
  switch (state)
  {  
  case GAME:  
    KeyUp_Game(event);
    break;
  }
}

We've used the same approach here, that was used in all other event handlers. Whenever the event occurs, the event handling routine executes the appropriate function, according to value of state variable (active state). KeyUp_Game function belongs at the end of the file Game.as:

private function KeyUp_Game(event:KeyboardEvent):void  
{ 
  if (event.keyCode == Keyboard.ESCAPE)
  {
    saveState = gameState;
    ChangeState_Game(GAME_FADE_OUT);    
  }
}

KeyboardEvent has many properties, one of them is keyCode - the index of key that caused the event. For example, ESCAPE key has index 27, SPACE key has index 32... but I prefer using public constants, defined in the Keyboard class.

When ESCAPE key is pressed, active game state (gameState) is stored into saveState variable and GAME_FADE_OUT state becomes active. Add definition of saveState variable to other definitions, at the beginning of the file.

private var saveState:int = 0;

Value of variable needs to be reseted, whenever the game begins. Add this statement into New_Game function:

saveState = 0;

In the current version, Reset_Game function is executed, after the game state GAME_FADE_OUT ends. Now, the program needs to distinguish whether the screen faded out because the player made the mistake or because the ESCAPE key was pressed. We can use saveState variable for this. In the Draw_Game function, replace the GAME_FADE_OUT case in switch statement, with this version:

case GAME_FADE_OUT: 
  Apply_FadeEffect(gameTime); 

  if (gameTime >= 1)
    if (saveState == 0)
      Restart_Game();  
    else
    {
      state = GAME_MENU;
      ChangeState_GameMenu(TITLE_SHOW);      
    }
  break;

If the value of saveState variable is zero, function Reset_Game is executed, otherwise active state of the program is changed to GAME_MENU.

Recompile and run the program and press ESCAPE key, while the game is running. Key should trigger screen fade-out event and after few seconds game menu should become visible. But it doesn't, because the game panel does not have the focus. Adding this statement at the end of UpdateFrame function in file SnakesAdventure.as, should solve the problem:

gamePanel.setFocus(); 

Continue the game

To be honest, the functionality that we implemented so far, does not pause the game. The player cannot return into the game, because continue option is disabled. We will make some changes in file GameMenu.as, that will enable continue option, when value of saveState variable is set (not zero).

In Draw_GameMenu function, change the statement:

if (i == OPTION_CONTINUE)
  srcY = 0;

if ((i == OPTION_CONTINUE) && (saveState == 0))
  srcY = 0;

In the switch statement, replace:

case OPTION_CONTINUE:
  srcY = 100;
  break;

with

case OPTION_CONTINUE:
  srcY = saveState != 0 ? 50 : 100;
  break;

From now on, continue option will be displayed as enabled, whenever the "paused" mode is active. To activate the option in the "paused" mode, we have to make a change in function MouseDown_GameMenu. Replace the second if statement:

if (i != OPTION_CONTINUE)

with

if ((i != OPTION_CONTINUE) || (saveState != 0))

When the "paused" mode is active, the continue option looks active and responds to mouse events. We just have to implement the transition from game menu, back into the game.

Add new case into inner switch statement in MouseUp_GameMenu function:

case OPTION_CONTINUE:    
  selectedOption = OPTION_CONTINUE;      
  ChangeState_GameMenu(GAMEOPTIONS_OUT);      
  break;

This will activate GAMEOPTIONS_OUT game menu state, after mouse button is released. Eventually, game menu options will disappear and title screen will fade out. At this point we have to reactive GAME program state in Draw_GameMenu function. Add new case into switch statement under case TITLE_HIDE block:

case OPTION_CONTINUE:
  state = GAME;
  ChangeState_Game(GAME_CONTINUE);
  break; 

GAME_CONTINUE game state is new in the project. During this state, game screen will fade in and after one second, game state index, that was previously stored into saveState variable, will become active again.

Add the definition of constant GAME_CONTINUE, at the beginning of Game.as file.

private static const GAME_CONTINUE:int       = 8;

and new case into switch statement inside Draw_Game function:

case GAME_CONTINUE:   
  Apply_FadeEffect(1 - gameTime); 

  if (gameTime >= 1)
  {
    ChangeState_Game(saveState);       
    saveState = 0;
  }
  break; 

Settings

This is the last option in the game menu that still remain unimplemented. In this section we will enable the option to display settings menu with sound and music volume control. Menu will also feature option that will close settings menu and reactivate game menu.

Settings menu functionality will be implemented is implemented in separate file - SettingsMenu.as. This file is part of project package for this chapter, the content of the file will be explained later. For now, just add new include statement at the beginning of SnakesAdventure.as:

include "SettingsMenu.as";

Implementation of settings menu will be similar to implementation of game menu. SETTINGS_MENU constant value will represent 'settings menu' state of the program. Add the definition to definitions of other program state constants:

private static const SETTINGS_MENU:int    = 2;

Value two is already used in GAME constant, that is why you have to change its value to 3. Before we focus on the implementaton of settings menu, we have to call appropriate functions in event handling routines, the same way we did for all other states.

We have to add new cases into switch statement inside:
- Draw function:

  case SETTINGS_MENU:
    Draw_SettingsMenu(ellapsedTime);
    break;  

- MouseDown function:

  case SETTINGS_MENU:
    MouseDown_SettingsMenu(event);
    break;  

- MouseUp function:

  case SETTINGS_MENU:
    MouseUp_SettingsMenu(event);
    break;  

- MouseMoved function:

  case SETTINGS_MENU:
    MouseMoved_SettingsMenu(event);
    break;  

All four functions are implemented in SettingsMenu.as. The file contains almost two hundred lines of code, that is not much different from the code in GameMenu file. I will display and explain all the code in this tutorial, I will rather focus on important parts.

Settings menu contains its own state automaton with three possible sub-states:
- SETTINGSOPTIONS_IN becomes active first and it last only one second. Within this second, all three options move from the left edge of the frame to the centre.
- while SETTINGSOPTIONS_WAIT state is active, player can change the sound and music volume. When 'Return' option is selected, it activates
- SETTINGSOPTIONS_OUT state and all three options move from the centre of the frame to the right edge, until they disappear. At this moment, program activates GAME_MENU state and eventually, game menu options become visible again.

Draw_SettingsOptions takes care of displaying settings menu options. It is not much different from Draw_GameMenu, even the same algorithm is used to shift the options to the centre and away from the centre of the frame.

Image file SettingsOptions.png contains option labels and two volume bars. This image is part of the project package and has to be embedded into the project, before it can be used (Images.as).

Options and labels inside each option are drawn the same way, that was used to draw game menu options. The only important difference is the code, that displays volume control at the bottom of sound and music volume option. This code can be found at the end of Draw_SettingsOptions function:

switch (i)
{
case OPTION_SOUNDVOLUME:
  screenBuffer.copyPixels(settingsOptionsBitmap,
                        new Rectangle(0, 150, 260, 25),
                        new Point(110 + srcX,277 + i * 70));  

  screenBuffer.copyPixels(settingsOptionsBitmap,
                        new Rectangle(24, 183, int(212 * soundVolume), 7),
                        new Point(134 + srcX,285 + i * 70));                               
  break;
case OPTION_MUSICVOLUME:
  screenBuffer.copyPixels(settingsOptionsBitmap,
                        new Rectangle(0, 150, 260, 25),
                        new Point(110 + srcX,277 + i * 70)); 

  screenBuffer.copyPixels(settingsOptionsBitmap,
                        new Rectangle(24, 183, int(212 * musicVolume), 7),
                        new Point(134 + srcX,285 + i * 70));                                 
  break;
}  

The same approach is used to draw both controls, but different variables are used to display the volume bar and they are displayed in different locations, of course. Variable soundVolume was introduced in chapter 12 - Playing sound effects and it is declared in file Sounds.as. Variable musicVolume is the copy of this variable, and it contains the value that will be used to control the volume of music played.

The complete image, that represents the empty bar, is copied into the screen buffer first. Afterwards, the image of blue bar is copied into the screen buffer. The portion of image, that is used in the process, is calculated from value of soundVolume or musicVolume variable. Value of both variables can range from 0.0 to 1.0, value is multiplied by 212 (the length of the bar image) and calculated value defines the width of the source image that is copied into screen buffer.

Whenever the player clicks inside the sound/music volume control, the bar in the control should change its size and volume of sound or music should change accordingly. MouseDown_SettingsMenu function takes care of this:

private function MouseDown_SettingsMenu(event:MouseEvent):void  
{ 
  var mx:int = event.localX;
  var my:int = event.localY;

  if (settingsMenuState == SETTINGSOPTIONS_WAIT)
  { 
    if ((mx >= 130) && (mx <= 341) && (my >= 283) && (my <= 293))
    {
      soundVolume = (mx - 130) / 211;
      StoreData(SOUND_VOLUME);
      PlaySound(OPTIONSELECTED_SOUND);
    }

    if ((mx >= 130) && (mx <= 341) && (my >= 353) && (my <= 363))
    {
      musicVolume = (mx - 130) / 211;
      StoreData(MUSIC_VOLUME);
      PlaySound(OPTIONSELECTED_SOUND);
    }

    if ((mx >= 110) && (mx < 370) && (my >= 390) && (my < 440))
    {
      pressedOption = OPTION_EXIT;
      PlaySound(OPTIONSELECTED_SOUND);
    }
  }
}  

When mouse button is pressed and SETTINGSOPTIONS_WAIT state is active, function performs three checks. First it checks, if mouse cursor is positioned inside sound volume bar. If it is, value of soundVolume variable is calculated from horizontal position of the left edge of bar, mouse cursor position and bar length. New value of soundVolume variable is stored into SharedObject, the same way we stored highest score in chapter 21. Second check takes care of music volume control and works the same way. Finally, the function checks if mouse cursor is inside "Return" option and if it is, option index is stores into pressedOption variable. Each time user clicks inside one of this areas, sound effect is played.

Now, that we have settings menu implemented, we just have to activate it, whenever user chooses "Settings" option. In file Game.as add new case into inner switch statement in MouseUp_GameMenu function:

case OPTION_SETTINGS:    
  selectedOption = OPTION_SETTINGS;      
  ChangeState_GameMenu(GAMEOPTIONS_OUT);      
  break;

This will activate GAMEOPTIONS_OUT game menu state, after mouse button is released. After one second, game menu options will disappear and at this point, SETTINGS_MENU program state has to be activated in Draw_GameMenu function. Inside switch statement, change the if statement in case of GAMEOPTIONS_OUT:

if (gameMenuTime >= 1)
  if (selectedOption == OPTION_SETTINGS)
  {
    state = SETTINGS_MENU; 
    ChangeState_SettingsMenu(SETTINGSOPTIONS_IN);
  }
  else
    ChangeState_GameMenu(TITLE_HIDE);

Finally, we have to update LoadData and StoreData functions in SnakesAdventure.as.

private function LoadData():void  
{
  var so:SharedObject = SharedObject.getLocal("SnakesAdventure");

  if (so.size > 0)   
  {           
    if (so.data.hiscore != null)
      hiscore = so.data.hiscore;

    if (so.data.soundVolume != null)
      soundVolume = so.data.soundVolume;

    if (so.data.musicVolume != null)
      musicVolume = so.data.musicVolume;      
  }
}

private static const HISCORE:int     = 1;
private static const SOUND_VOLUME:int = 2;
private static const MUSIC_VOLUME:int = 3;

private function StoreData(what:int):void  
{
  var so:SharedObject = SharedObject.getLocal("SnakesAdventure");

  switch (what)
  {
  case HISCORE:
    so.data.hiscore = hiscore; 
    break;
  case SOUND_VOLUME:
    so.data.soundVolume = soundVolume; 
    break;
  case MUSIC_VOLUME:
    so.data.musicVolume = musicVolume; 
    break;
  }

  so.flush();   
} 

From now on, LoadData function, that is called during initialization phase, will also restore value of sound and music volume from SharedObject. StoreData function is now capable of storing the value of global variable soundVolume or musicVolume into SharedObject. This will happen whenever user changes volume of sound or music in settings menu.

Per-pixel collision

2010-03-17T10:33:00.001-07:00

In previous chapter we implemented tiled background and now the background image does not repeat as much as it did in older versions. But there is still something missing: it is just an image. Nothing happens when snakes runs into the rock and eggs can float over the pit just like it wasn't there.

We have to implement collision detection again, but none of the methods that we have learned in chapter 19, will be of much use here. We have to somehow distinguish between the dangerous and non-dangerous parts of each tile, before we can detect collision.

There are many was to do this. We could write the list of tiles that will trigger the death of the snake, whenever it enters the area, where tile is displayed. This would be quite simple to implement, but not precise enough. If we could provide the same information for small chunks of the tile, let's say 4x4, precision would be very much increased, but the whole process would require to much work. We will use the approach, that is the most precise and does not require to much extra work.

Per-pixel collision

To implement per-pixel collision, we first need information, which pixels in the tile set can trigger the collision and which can't. This information will be stored in the copy of the original image, where only pixels that matter, are visible. The rest of the pixels are transparent.

Bellow is the image that will be used in this chapter, to detect collision. If you download project package for this chapter, you can find the image inside Images folder, under the name Background.png.

I am making tiles for the game with image editor, that supports layers (I guess all good image editors supports them). To create such an image, I disable all layers, that don't matter, and remove colour information to decrease the size of the file.

Background.as

Image file has to be embedded, before it can be used:

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

We need additional BitmapData object, where pixels from embedded image will be copied:

private var bitmapCollision:BitmapData = null; 

Function checkCollision works similar to draw function, but instead of copying pixels from Background.jpg into screen buffer, it checks if the pixels on the same location, but from different image - Background.png, are transparent or not.

public function checkCollision(bounds:Rectangle):Boolean
{
  if (bitmapCollision == null)
  {
    bitmapCollision = new BitmapData(300,600,true,0x00000000);
    bitmapCollision.draw(new collisionsImg());
  }

  for (var y:int = bounds.y; y > bounds.y - bounds.height; y--)
    for (var x:int = bounds.x; x < bounds.x + bounds.width; x++)
    {
      var tileX:int = x / TILE_SIZE;
      var tileY:int = y / TILE_SIZE;

      if ((tileX < 0) || (tileX > 9) || (tileY < 0))
        return true;

      var cells:Array = rows[tileY % rows.length];
      var tile:Point = cells[tileX];

      var pix:uint = bitmapCollision.getPixel32(x % TILE_SIZE + (tile.x - 1) * TILE_DIST, tile.y * TILE_DIST - y % TILE_SIZE);

      if ((pix >> 24 & 0xFF) > 0)
        return true;            
    }

  return false;
}

Data from embedded image is copied into BitmapData object, but only the first time the function is called. The code inside for loops, scans the entire area of the game world, that is specified within bounds parameter. Area is checked pixel by pixel and within each iteration, game world coordinates are transformed into tile coordinates and vertical and horizontal index of the tile are obtained from rows Array.

Function getPixel32 in BitmapData class, returns ARGB colour value of the pixel on specified location. Returned value is uint (unsigned integer) which is 32-bit numeric value: 8 bits for alpha channel, 8 bits for red, green and blue colour. There are only first 8 bits, that we are interested in. If all those bits equal to zero, pixel is fully transparent and collision is not detected; the search continues. If value is greater than zero, pixel is not transparent, collision is detected and function immediately exits and returns true.

Now that we have a tool to detect collision, we can use it.

Game.as

First, we will update CheckCollision function. You can append this statement to the end of the function:

//check snake and the background
if (background.checkCollision(headBounds))
{
  snake.kill();
  return snake;     
}

It cannot be more simple than that: headBounds object represents the area in the game world, where head of the snake is currently position. This is the area that checkCollision function in Background class will have to check. When function returns true, the head of the snake is positioned over at least one pixel, that is non-transparent in the copy of background image, that is used for collision detection.

If you recompile the game and play it, the snake will die whenever it hits the rocks. The problem is, that eggs are sometimes randomly positioned on the rocks and they cannot be eaten by the snake. We have to update CreateRandomEgg function, to fix this problem.

Replace the return statement at the end of the CreateRandomEgg function, with:

var newEgg:Egg = new Egg(x,y,initial);

//check the background
if (background.checkCollision(newEgg.getBounds2(20)))
  return CreateRandomEgg(initial); 

return newEgg;

The previous version of CreateRandomEgg function, made new egg on random location in the game world, within the visible area of the player If the egg was positioned to close to the snakes body, function was called again, until correct location was not found.

The new version works the same, but it also makes sure that new egg is not positioned on the rock, over the pit... In fact it checks the area, that is much bigger than the area, which is returned by getBounds function from Egg class. New egg is generated at least 25 pixels away from nearest dangerous area. This area is returned by new function in Egg class - getBounds2. The implementation of this function has to be added to Egg.as file:

public function getBounds2(margin:int):Rectangle    
{ 
  return new Rectangle(position.x - 5 - margin, position.y + 9 + margin, 11 + 2 * margin, 16 + 2 * margin);
}

Tiled background

2010-03-13T08:04:00.000-08:00

In chapter 20 we implemented scrolling background, which was big improvement compared to the previous version, which had solid colour background only. Because the grass image is only 640 pixels high, it soon starts to repeat itself and becomes boring. Of course, bigger image with nicer and more diverse graphics would certainly make the game look much better, but at what cost?

Let's make some calculations. Background scrolls by one pixel per frame, which makes 24 pixels per second or 1440 per minute. Let's say that average time to complete each stage in the game, would be five minutes. In case it is required, that background image does not repeat itself, it must be more than 7200 pixels high. In case JPEG compression is used and quality is not to low, file size of the image would be somewhere between one and two megabytes. For one stage...

If you are developing a web game and you plan to keep the size of the game as small as possible, you should consider implementing tiled background.

Tiles

Tiles are small images which are used to create large images, maps or terrain. Tiles are not easy to make, creation of tile sets requires skill and lots of hard work. Fortunately, there are lots of free tile sets on the internet, that you can use in your own game.

There are different ways to create a background, map, terrain... from tiles. Game developers usually use a special editor to create them. Instead of complete bitmap, only location and index (or name) of each tile is stored into file. File size of even big maps is usually measured in kilobytes.

For this chapter, I made an image that contains 72 tiles. Size of each tile is 48x48 pixels and there are two pixels of empty space between each tiles. There are 12 rows of tiles in the image (600 pixels), each row consist of six tiles (300 pixels). Image Background.jpg can be found inside project package for this chapter under Images folder.

If you already tried to play the game, you most certainly noticed, that now it takes more time before background starts to repeat itself. By using tiles from new Background.jpg, which is a slightly smaller than previous version, background image is now almost three times bigger then before.

Implementation of tiles did not require many changes in the code. On the other hand, creation of tile set and creation of background map was not an easy task.

Level.xml

XML is probably not the best format to the store structure of the background, map or terrain. But XML documents are so well supported in ActionScript, that I just had to use it.

Bellow is the XML document that can be found inside project package for this chapter inside Levels folder under the name Level_1.xml.

<level>
  <row>05-6,01-2,01-3,01-1,01-2,01-3,01-1,01-2,07-1,07-2</Row>
  <row>02-1,02-2,02-3,02-1,02-2,02-3,02-1,02-2,02-3,08-2</Row>
  <row>03-1,03-2,03-3,03-1,03-2,03-3,03-1,03-2,03-3,09-2</Row>
  <row>10-2,10-2,10-3,01-1,01-2,01-3,01-1,10-1,10-2,10-2</Row>
  <row>11-2,11-2,11-3,02-1,02-2,02-3,02-1,11-1,11-2,11-2</Row>
  <row>11-2,11-2,11-3,03-1,03-2,03-3,03-1,11-1,11-2,11-2</Row>
  <row>12-2,12-2,12-3,01-1,01-2,01-3,01-1,12-1,12-2,12-2</Row>
  <row>02-1,02-2,02-3,02-1,02-2,02-3,02-1,02-2,02-3,02-1</Row>
  <row>04-3,03-2,03-3,03-1,03-2,03-3,03-1,03-2,03-3,03-1</Row>
  <row>04-6,01-2,01-3,01-1,01-2,01-3,01-1,01-2,01-3,04-2</Row>
  <row>06-3,06-4,02-3,02-1,02-2,02-3,02-1,02-2,02-3,05-2</Row>
  <row>07-3,07-4,03-3,03-1,03-2,03-3,03-1,03-2,06-1,06-2</Row> 
  <row>05-6,01-2,01-3,01-1,01-2,01-3,01-1,01-2,07-1,07-2</Row>
  <row>02-1,02-2,02-3,02-1,02-2,02-3,02-1,02-2,02-3,03-4</Row>
  <row>04-3,03-2,03-3,03-1,03-2,03-3,03-1,03-2,01-4,06-2</Row>
  <row>05-3,01-2,01-3,01-4,01-5,01-6,01-1,01-2,02-4,02-5</Row>
  <row>08-3,02-2,02-3,03-4,03-5,02-6,02-1,02-2,03-4,03-5</Row>
  <row>09-3,03-2,03-3,04-4,04-5,04-6,03-1,03-2,05-4,07-2</Row>
  <row>04-3,01-2,01-3,05-4,05-5,05-6,01-1,01-2,01-3,04-4</Row>
  <row>05-3,02-2,02-3,02-1,02-2,02-3,02-1,02-2,02-3,05-4</Row>
  <row>03-6,03-2,03-3,03-1,03-2,03-3,03-1,03-2,03-3,03-1</Row>
  <row>04-6,01-2,01-3,01-1,01-2,01-3,01-1,01-2,01-3,04-2</Row>
  <row>06-3,06-4,02-3,02-1,02-2,02-3,02-1,02-2,02-3,05-2</Row>
  <row>07-3,05-6,03-3,03-1,03-2,03-3,03-1,03-2,06-1,06-2</Row>
  <row>05-6,01-2,01-3,01-1,01-2,01-3,01-1,01-2,07-1,07-2</Row>
  <row>02-1,02-2,02-3,02-1,02-2,02-3,02-1,02-2,02-3,03-4</Row>
  <row>04-3,03-2,03-3,03-1,03-2,03-3,03-1,03-2,01-4,06-2</Row>
  <row>05-3,01-2,01-3,01-1,01-2,01-3,01-1,01-2,02-4,02-5</Row>
  <row>08-3,06-6,02-3,02-1,02-2,02-3,02-1,02-2,03-4,03-5</Row>
  <row>09-3,03-2,03-3,03-1,03-2,03-3,03-1,03-2,05-4,07-2</Row>
  <row>04-3,01-2,01-3,01-1,01-2,01-3,01-1,01-2,01-3,04-4</Row>
  <row>05-3,02-2,02-3,02-1,02-2,02-3,02-1,02-2,02-3,05-4</Row>
  <row>03-6,03-2,03-3,03-1,03-2,03-3,03-1,03-2,03-3,03-1</Row>
  <row>04-6,01-2,01-3,01-1,01-2,01-3,01-1,01-2,01-3,04-2</Row>
  <row>06-3,06-4,02-3,02-1,02-2,02-3,02-1,02-2,02-3,05-2</Row>
  <row>07-3,07-4,03-3,03-1,03-2,03-3,03-1,03-2,06-1,06-2</Row>
</Level>

Inside this document is the structure of the background for stage one. Because all tiles have size 48x48 pixels, there are exactly ten tiles required in one row. Columns are separated with commas, each tile is described with vertical and horizontal index, according to both values we know exactly which tile has to be displayed.

Elements row in the document are positioned in the same direction as the tiles will be displayed in the background. Element at the end of the document represents the bottom row, that will be visible at the beginning of the game. Top most row element represents the row at the top of the background, which will become visible after approximately one minute of play.

XML object

ActionScript 3.0 includes a group of classes for XML which feature powerful and easy-to-use functionality for working with XML data. Before we can use the Level_1.xml document, we have to embed it.

I put the statement, that embeds the XML document, inside Game.as file, just before the New_Game function.

[Embed(source="Levels\\Level_1.xml", mimeType="application/octet-stream")] private var level_1XML:Class;

This is not much different than the statement that takes care of embedding image files, but this time additional parameter mimeType is required.

Create_Level

This is the new function in the Game.as, that will take care of the creation of every stage. It will be called from New_Game and Restart_Game functions.

private function Create_Level():void
{ 
  var xml:XML = null;

  switch (level)
  {
  case 1:
    xml = XML(new level_1XML());   
    break;
  }

  scrollPos = 0;

  background = new Background(xml);  
  snake = new Snake(SCREEN_WIDTH / 2,SCREEN_HEIGHT / 3,20);     
  egg = CreateRandomEgg(true);
}

According to the value of level variable, new XML object is made from embedded XML documents. Because at the moment, there is only one stage implemented, switch statement with only one case looks kind of funny. But I hope it will help you understand how the system works: each stage has its own XML document, that contains all the data required to create a stage. XML documents have to be embedded before they can be used. At the beginning of the stage, XML object is made from XML document and data inside the document is used during initialization phase.

The code after the switch statement used to be part of the implementation of New_Game and Restart_Game functions. This code was replaced with single statement that calls Create_Level function. The only difference is the xml parameter in Background constructor.

Class Background ver.3

Class has been changed completely, again. Constructor will scan the row elements in XML document and extract the data from the elements value. This data will be used to display visible tiles during the game.

public class Background
{     
  private static const SCREEN_WIDTH:int     = 480;
  private static const SCREEN_HEIGHT:int    = 480; 
  private static const TILE_SIZE:int        = 48;  
  private static const TILE_DIST:int        = 50;    

  [Embed(source="../Images/Background.jpg")] private var backgroundImg:Class;

  private var bitmap:BitmapData = null;
  private var rows:Array = new Array();

  public function Background(xml:XML) 
  {      
    var rowCount:int = 0;
    var rowXML:XML = xml.Row[rowCount];

    while (rowXML != null)
    {    
      var cellStr:Array = rowXML.text().split(",");   
      var cells:Array = new Array();

      for (var i:int = 0; i < cellStr.length; i++)
      {
        var str:Array = cellStr[i].split("-");

        cells.push(new Point(int(str[1]),int(str[0])));
      }

      rows.unshift(cells);

      rowXML = xml.Row[++rowCount];
    }
  }

  public function draw(screenBuffer:BitmapData,visible:Rectangle):void
  {
    if (bitmap == null)
    {
      bitmap = new BitmapData(300,600,true,0x00000000);
      bitmap.draw(new backgroundImg());
    }

    var startRow:int = (visible.y - visible.height) / TILE_SIZE;
    var endRow :int = visible.y / TILE_SIZE + 1;

    for (var i:int = startRow; i <= endRow; i++)
    {
      var cells:Array = rows[i % rows.length];

      if (cells != null)
        for (var j:int = 0; j <= 9; j++)
        {
          var tile:Point = cells[j];

          screenBuffer.copyPixels(bitmap,
                                  new Rectangle((tile.x - 1) * TILE_DIST,(tile.y - 1) * TILE_DIST,TILE_SIZE,TILE_SIZE),
                                  new Point(j * TILE_SIZE,visible.y - TILE_SIZE - i * TILE_SIZE));
        }
    }
  }
}  

At the top of the file there are two new constant definitions: TILE_SIZE holds the value of horizontal and vertical size, TILE_DIST is the value of offset between tiles.

Data from row elements in the XML document are stored into rows Array. As you can see, class constructor now requires XML object. row elements from XML object are accessed inside the while loop until the element with rowCount index exist. Value of each element is split by comma separator, horizontal and vertical index of the tile are stored into Point object. All tiles for one row are stored into Array and inserted into rows Array.

At the beginning of draw function are calculated indexes of first and last visible row. All this rows are visible and tiles in the row have to be drawn. Horizontal and vertical index, that was stored into Point object, is transformed into coordinates of the top-left corner of the tile in the source image and area of 48x48 pixels is copied into screen buffer.

Background creation

If you tried to add new or change existing content of Level_1.xml file, you most probably soon found out, that it is not as simple as you thought it would be. Even small changes are sometimes hard to make. You need to know which tiles you wish to change, you have to count the vertical and horizontal indexes of new tiles and enter them on the right place in XML document. Each time you make a change, you have to recompile and restart the game. And finally you have to play the game until the changes become visible. If you make one mistake, you have to repeat the whole process until you are satisfied.

There is not much you can do to improve the whole process, unless you use an editor. I am sure there are lots of free editors on the internet, if you already found a good one that has all that you need, use it. You will most probably have to make some adjustments in the code, but it will make your life much easier.

There is one thing we can do to improve the process of background creation. We can implement the special mode that will allow us to preview the stage before the game begins, by using mouse wheel. This mode should be available only during development process.

First, new event listener is needed for Canvas object. Assign mouseWheel event listener to mx:Canvas element in SnakesAdventure.mxml file:

mouseWheel="MouseWheelMoved(event)"

Whenever mouse cursor is position inside game frame and mouse wheel is moved, MouseWheelMoved function will be executed. MouseWheelMoved belongs into SnakesAdventure.as file:

private var prevDate:Date = null; 

private function MouseWheelMoved(event:MouseEvent):void 
{ 
  if (prevDate == null) 
    prevDate = new Date(); 
  else 
    if (new Date().time - prevDate.time < 50)
      return;
    else
      prevDate = new Date();

  switch (state)
  {
  case GAME:
    MouseWheelMoved_Game(event);
    break;
  }

  event.preventDefault();
} 

Code at the beginning prevents the function to execute twice for one event. This sometimes happens when SWF file is embedded into HTML page, which is opened with Internet Explorer.

The rest of the code is quite simple: while GAME state is active, function MouseWheelMoved_Game is called. This function is implemented in Game.as file:

private function MouseWheelMoved_Game(event:MouseEvent):void  
{
  switch (gameState)
  {
  case GAME_START:  
    if (event.delta > 0)
      scrollPos += 48 * 2;
    else
      scrollPos -= 48 * 2;

    if (scrollPos < 0)
      scrollPos = 0; 
    break;
  }
} 

Mouse wheel event contains property delta. If its value is positive, mouse wheel was moved forward and value of scrollPos variable is increased for 96, which is exactly height of two tiles. When mouse wheel is moved backward, value of delta property is negative and value of scrollPos variable is decreased for the same amount.

Value of scrollPos variable must be reseted before the game begins. Add this statement at the end of ChangeState_Game function:

if (gameState == GAME_STARTED)
  scrollPos = 0;

From now on you can preview the stage before you test it. When game is embedded into web page, scrolling will most probably not work, because web browser scrolls the content of the page when mouse wheel is moved. Buy as I said, this mode should be used only during development process and removed in final version of the game.

Scoring points

2010-03-05T09:17:00.001-08:00

In this chapter we will add three variables in the game and display their values during the game. If you think this will be a simple task, you will be amazed how much additional work is sometimes required by a simple task.

score, hiscore, lives

Those are the names of new global variables, add their definition at the top of Game.as file:

private var score:int = 0;
private var hiscore:int = 0;
private var lives:int = 3;

Value of score variable will increase each time the snake eats the egg. This value will be assigned to hiscore variable at the end of the game, but only when value of score variable is greater than value of hiscore variable. Initial value of variable lives represents the number of fatal mistakes that allowed, before the game is over. Each time the snake hits something or the egg hits the bottom edge of the frame, value will be decreased by one. Value of those variables will be displayed during the game on the top of the game frame.

Draw_ScoreLives

Draw_ScoreLives function takes care of displaying current score, highest score and number of lives that are still available. We will use the similar approach to display numbers, that we've used in the chapter 14 to display the number of current stage at the beginning of each stage. All graphics that is required to display numbers, labels and icons is inside new file ScoreLives.png.

This image is part of the project package for this chapter, you can find it inside Images folder. Image has to be embedded before it can be used. Add this statement inside Images.as:

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

Implementation of Draw_ScoreLives funciton and two definitions, belong to Game.as file:

private var scoreLivesBitmap:BitmapData = null;
private static var scoreDigitPos:Array = new Array(123, 139, 151, 165, 179, 195, 209, 224, 238, 253, 270);

private function Draw_ScoreLives():void
{
  if (scoreLivesBitmap == null)
  {
    scoreLivesBitmap = new BitmapData(290,30,true,0x00000000);
    scoreLivesBitmap.draw(new scoreLivesImg());
  }

  //score
  screenBuffer.copyPixels(scoreLivesBitmap,
                          new Rectangle(37, 0, 80, 30),
                          new Point(4,0));

  var scoreStr:String = score.toString();
  var xpos:int = 90;

  for (var i:int = 0; i < 4; i++)
  {
    var digit:int = 4 - i > scoreStr.length ? 0 : scoreStr.charCodeAt(i - (4 - scoreStr.length)) - 48;
    var digitPos:int = scoreDigitPos[digit];
    var digitWidth:int = scoreDigitPos[digit + 1] - digitPos;

    screenBuffer.copyPixels(scoreLivesBitmap,
                            new Rectangle(digitPos, 0, digitWidth, 30),
                            new Point(xpos,0));

    xpos += 15;
  }

  //hiscore 
  screenBuffer.copyPixels(scoreLivesBitmap,
                          new Rectangle(0, 0, 117, 30),
                          new Point(SCREEN_WIDTH - 186,0)); 

  xpos = SCREEN_WIDTH - 66;

  var hiscoreStr:String = hiscore.toString();

  for (var i2:int = 0; i2 <  4; i2++)
  {
    var digit2:int = 4 - i2 > hiscoreStr.length ? 0 : hiscoreStr.charCodeAt(i2 - (4 - hiscoreStr.length)) - 48;
    var digitPos2:int = scoreDigitPos[digit2];
    var digitWidth2:int = scoreDigitPos[digit2 + 1] - digitPos2;

    screenBuffer.copyPixels(scoreLivesBitmap,
                            new Rectangle(digitPos2, 0, digitWidth2, 30),
                            new Point(xpos,0));

    xpos += 15;
  } 

  //lives
  xpos = SCREEN_WIDTH / 2 - 10 - lives * 10; 

  for (var i3:int = 0; i3 < lives; i3++)
  {
    if (((gameState != GAME_KILLED) && (gameState != GAME_FAILED)) || (i3 > 0) || (gameTime - int(gameTime) < 0.5))
      screenBuffer.copyPixels(scoreLivesBitmap,
                              new Rectangle(271, 0, 20, 30),
                              new Point(xpos,0));

    xpos += 20;
  }
} 

At the top of the section are definitions of two global variables:
- scoreLivesBitmap is reference to BitmapData object, the copy of the embedded ScoreLives.png image.
- scoreDigitPos Array contains horizontal position of each digit in the ScoreLives.png image.

First time the Draw_ScoreLives function is called, it creates new BitmapData object and copies the content of embedded image into the object. Reference to this object is assigned to scoreLivesBitmap variable.

Inside the body of Draw_ScoreLives function are three comments: score, hiscore and lives. Each comment indicates the beginning of the code that takes care of displaying value of the variable with the same name. "Score section" is displayed on the left side of the frame, "Hi-Score section" is on the right and "Lives section" in the middle.

The code that draws "Score section" and "Hi-Score section" is very similar. Even the same label from the source image, is used to draw "Score" and "Hi-Score" label in the game. Displayed value consist of four digits, each digit is drawn inside for loop from left to right. Just before the loop starts, new String object is made from value of the variable. If the String object has less than four digits, zeros are displayed in front of the actual number. Values of digitPos and digitWidth are calculated from horizontal position of the digits in the source image, defined in scoreDigitPos Array. When displaying zero, digitPos gets the value of first element in the Array and digitWidth is the difference between position of character one and zero. In the copyPixels statement, both values are used to define the area (Rectangle) of required digit in the source image.

Value of lives variable is displayed with the icons on the top-middle section of the game frame. Each icon is drawn inside the for loop, the if condition before copyPixels statement, makes left icon to blink, when the player makes the mistake.

Function Draw_ScoreLives will be called once per frame from Draw_Game function. Add this statement behind the code that draws background, egg and the snake (before the switch statement):

Draw_ScoreLives();  

Now you can compile and play the game. But no matter what you do, number of scored points and icons will not change.

Scoring points, loosing lives...

At the beginning of the game, we have to reset values of score and lives variable. The New_Game function is perfect place to do that:

score = 0;
lives = 3;

When the snake eats the egg, value of score variable will be increased by 5. Collision between the snake and the egg is checked in CheckCollision function. Add the following statement after snake.append(); statement:

score += 5;

You can select a different number, if you like, but big numbers will require more digits to display score/hiscore points.

When player makes the fatal mistake, value of lives variable will decrease by one. When it reaches zero, the game is over. Replace the current version of Restart_Game function with:

private function Restart_Game():void
{  
  lives--;

  if (lives == 0)
  {
    if (score > hiscore)
    {
      hiscore = score;

      StoreData(HISCORE);
    }

    state = GAME_MENU;
    ChangeState_GameMenu(TITLE_SHOW);
  }  
  else
  {
    scrollPos = 0;

    snake = new Snake(SCREEN_WIDTH / 2,SCREEN_HEIGHT / 3,20); 
    egg = CreateRandomEgg(true); 

    ChangeState_Game(GAME_FADE_IN);
  }
}

Restart_Game function was implemented in chapter 19. This function is called few seconds after player made a mistake. Previous version just made a new Snake and Egg objects, reseted scrollPos variable and restarted the game (state GAME_FADE_IN). New version does all the same, but only if value of lives variable, which is decreased by one at the start of the function, is more than zero.

If value is zero, it is game over. First, value of score variable is compared to value of hiscore variable. If values of score variable is greater, the player just broke new record, value of score variable is assigned to hiscore variable and StoreData function is called. This function will be implemented at the end of the chapter. Finally, GAME_MENU state becomes active and eventually, program displays title screen and game menu.

When the player enters game menu, mouse cursor needs to be replaced. Add new statement at the end of Draw_GameMenu function in GameMenu.as:

SetMouseCursor(0,false);

Load/StoreData

When the player sets the new score, value of hiscore variable has to be stored permanently, and available the next time, when the player starts the game. Shared Objects are the perfect place to store this kind of data. Data is actually stored on the local computer, within the user's home directory.

We called StoreData function from Reset_Game function, to store the value of hiscore variable. Add the implementation of this function at the end of file SnakesAdventure.as:

private static const HISCORE:int     = 1;

private function StoreData(what:int):void  
{
  var so:SharedObject = SharedObject.getLocal("SnakesAdventure");

  switch (what)
  {
  case HISCORE:
    so.data.hiscore = hiscore; 
    break;
  }

  so.flush();   
}

In front of StoreData function is definition of one global constant HISCORE (in the following chapters we will add more of them). This constant can be used in StoreData function call, as value of what parameter. If HISCORE constant is used as a parameter value, function knows that value of hiscore variable needs to be stored.

Function getLocal from SharedObject class, returns the reference to SharedObject named "SnakesAdventure". Value of hiscore variable is stored into data collection, under the hiscore attribute. If the attribute with this name does not exist, it is created; in case it exits, current value is replaced with new one. After all attributes are set, function flush writes data into file.

LoadData function will load the data from "SnakesAdventure" SharedObject and assign values of attributes to variables with the same name.

private function LoadData():void  
{
  var so:SharedObject = SharedObject.getLocal("SnakesAdventure");

  if (so.size > 0)   
  {           
    if (so.data.hiscore != null)
      hiscore = so.data.hiscore;
  }
}

Function getLocal always returns the reference to SharedObject object with name "SnakesAdventure". If it does not exist, it creates new - empty one. If attribute size is equal to zero, there is no data and we can skip the loading procedure. Existence of hiscore attribute in data collection has to be checked, before its value can be assigned to hiscore variable.

Init function at the beginning of the file SnakesAdventure.as is a good place to call LoadData function:

LoadData();

In the initialzation phase of the program, LoadData function is called and value of hiscore attribute, from the "SnakesAdventure" SharedObject, is assigned to hiscore variable. If the attribute does not exist, variable hiscore has default value - 0. When the player breaks new record, value of score is assigned to hiscore variable (in Restart_Game function) and stored into SharedObject. At the end, all data in the SharedObject is written into file.

Shared objects are application dependant: if you test the game in two different browsers, for example FireFox and Opera, both of them have its own "SnakesAdventure" SharedObject.

Background and scrolling

2010-02-28T07:06:00.001-08:00

In this chapter, we will make three changes in the game:
- single colour in the background will be replaced with an image
- vertical scrolling will be implemented
- instead of predefined positions of the eggs we will use random positions

Because of the background image, the graphics will look a lot less boring, vertical scrolling will improve the gameplay and random positions will make game less predictable.

Background

I made this background image from the grass texture from one of my older games. The image is part of the project package for this chapter, you can find it inside Images folder under the name Background.jpg.

So far, all images in the project were in PNG format, because it supports alpha transparency and employs lossless data compression. JPEG image format was so much more appropriate in this case, that I had to make an exception. File size of the same image in JPEG format is almost five times (130KB) less than if PNG format is used (700+KB).

Again, we will put all the functionality that takes care of embedding, drawing... into it's own class. Create new text file and store it, under the name Background.as, into folder Classes. Copy the following content into file:

package Classes 
{
  import flash.geom.*; 
  import flash.display.*; 

  public class Background
  {     
    private static const SCREEN_WIDTH:int     = 480;
    private static const SCREEN_HEIGHT:int    = 480; 
    private static const IMAGE_HEIGHT:int     = 640;    

    [Embed(source="../Images/Background.jpg")] private var backgroundImg:Class;

    private var bitmap:BitmapData = null;

    public function draw(screenBuffer:BitmapData,visible:Rectangle):void
    {
      if (bitmap == null)
      {
        bitmap = new BitmapData(SCREEN_WIDTH,IMAGE_HEIGHT,true,0x00000000);
        bitmap.draw(new backgroundImg());
      }

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

Because constants defined in SnakesAdventure.as are out of the scope of this package/class, SCREEN_WIDTH/HEIGHT constants had to be defined here, too. Background image width and game frame width are the same, but image height and game frame height are not. Image height is defined with IMAGE_HEIGHT constant. I made background image that is higher than game frame, to reduce repetition in vertical scrolling.

This class does not include definition of constructor, default constructor will be used when the class is instantiated. Implementation of draw function has nothing that we haven't seen before: BitmapData object is made from embedded image (only the first time) and pixels are copied from BitmapData object into screen buffer.

Now we can use Background class to display background image during the game. All we have to do is to define background variable, instantiate the Background class and call it's draw function once per frame.

Put background variable definition before definition of snake variable, at the beginning of Game.as:

private var background:Background = null;

Background object has to be made at the beginning of the game. Add this statement inside New_Game function:

background = new Background();

Background has to be drawn before the snake and the egg. Previously, background colour was painted with screenBuffer.fillRect... statement, which can now be replaced with:

background.draw(screenBuffer,new Rectangle(0,SCREEN_HEIGHT,SCREEN_WIDTH,SCREEN_HEIGHT)); 

Vertical scrolling

Because this game is called Snake's adventure, players will most certainly expect more that just a snake chasing the eggs on the static background. With implementation of vertical scrolling we will create the sense that snake is constantly moving in the northern direction. Of course, to create the sense of real adventure, the game needs much more than just vertical scrolling.

Implementation of vertical scrolling will not require so much work, because we have already done most of the work. If you remember from previous chapters, draw functions in all classes, already have visible parameter, which represent the area of the game world that is visible at the moment the function is executing. Snake and Egg classes already take into account the coordinates of visible area, when copying source images into screen buffer (visible.y - position.y).

Vertical scrolling will be active only while the game is played (GAME_PLAYED state). Once per frame, visible area of the game world will be moved by one pixel in the northern direction.

OK, let's start with the implementation. First, we need new variable, value of variable will be increased once per frame. Add new variable after definition of level variable at the top of Game.as:

private var scrollPos:int = 0;

Value of variable has to be reset at the beginning of the level. Add this statement into New_Game and Restart_Game functions:

scrollPos = 0;

Vertical position of visible area needs to be increased by value of scrollPos variable. Replace the second parameter in all three draw statements at the top of Draw_Game function, with:

new Rectangle(0,SCREEN_HEIGHT + scrollPos,SCREEN_WIDTH,SCREEN_HEIGHT)  

If you applied the changes correctly, the source code, should look like this:

background.draw(screenBuffer, 
                new Rectangle(0,SCREEN_HEIGHT + scrollPos,SCREEN_WIDTH,SCREEN_HEIGHT));   

if (egg != null)
  egg.draw(screenBuffer, 
           new Rectangle(0,SCREEN_HEIGHT + scrollPos,SCREEN_WIDTH,SCREEN_HEIGHT));  

if (snake != null)
  snake.draw(screenBuffer, 
             new Rectangle(0,SCREEN_HEIGHT + scrollPos,SCREEN_WIDTH,SCREEN_HEIGHT));   

Value of scrollPos variable will be increased inside Draw_Game function only while GAME_PLAYED state is active. Add the following statement inside the switch statement at the end of case GAME_PLAYED (before break):

scrollPos++; 

Although we have not finished the implementation, you can now compile and run the game to see how it works. Background is still static, but the egg is moving in the southern direction, which is OK. And so is the snake, but you can only notice this when it moves in the horizontal direction.

Now, open Background.as file and replace copyPixels statement in the draw function, with the code that supports vertical scrolling:

var start:int = IMAGE_HEIGHT - visible.y % IMAGE_HEIGHT;
var end:int = start + SCREEN_HEIGHT > IMAGE_HEIGHT ? IMAGE_HEIGHT - start : SCREEN_HEIGHT;

screenBuffer.copyPixels(bitmap,
                        new Rectangle(0,start,SCREEN_WIDTH,end),
                        new Point(0,0));

if (end < SCREEN_HEIGHT)
  screenBuffer.copyPixels(bitmap,
                          new Rectangle(0,0,SCREEN_WIDTH,SCREEN_WIDTH - end),
                          new Point(0,end));

This may be a little bit hard to understand, but let me try to explain why we have to copy pixels from source image into screen buffer, in two steps. Background image is by 160 pixels higher that visible area. In some cases source image fits inside the visible area, but in some cases doesn't.

At the start of the game, Rectangle(0,160,480,480) defines the area of source image that is copied into screen buffer. Vertical position is decreasing by one per frame and after 160 frames, area from the source image, defined by Rectangle(0,0,480,480), is copied. At this moment, background image is visible from top to bottom minus 160 pixels.

When the next time Background.draw function is called, background image is copied into screen buffer in two steps. First, the bottom row of source image is copied on the top of screen buffer. The rest of the screen buffer is filled with area from the source image, defined by Rectangle(0,0,480,479). And so on...

Unfortunately, grass image (Background.jpg) that is used for the background, doesn't help much to understand how this code works. Maybe it would help, if you temporary use a different image for the background. Rename Background.jpg to, let's say, Background2.jpg. Resize one of your photos to 480x640 pixels and add it to project inside Images folder under the name Background.jpg.

If you compile and run the game, vertical scrolling should work fine, but after few seconds you will notice, that controls and collision detection do not work correctly.

Let's fix this. Change the statement, that flips screen coordinates to game world coordinates in SetGameCursor and MouseDown_Game function, from:

my = SCREEN_HEIGHT - my;

my = SCREEN_HEIGHT + scrollPos - my;

This should fix problems with controls. Code that detects collision between the head of the snake and top and bottom edge of the frame will be fixed the same way. Vertical position of both edges has to be increased by the value of scrollPos variable. Change the code in CheckCollision function to:

//check snake and the edge of the screen
if ((headBounds.x <= 0) || 
    (SCREEN_WIDTH - headBounds.x - headBounds.width <= 0) || 
    (headBounds.y - headBounds.height <= scrollPos) ||
    (SCREEN_HEIGHT + scrollPos - headBounds.y <= 0))
{
  snake.kill();
  return false;
} 

Implementation of vertical scrolling is now complete, but one problem still remains: egg positions specified in Egg.position Array became useless. You can take into account the scrolling and adjust vertical positions, but after first iteration, coordinates will still be useless. We have to implement the mechanism, that will set random position of new egg, according to vertical position of visible area.

CreateRandomEgg

CreateRandomEgg is the new function in Game.as file, that creates new egg on random position inside the visible area of game world. Add implementation of the function into Game.as file:

private function CreateRandomEgg(initial:Boolean):Egg
{
  var x:int = (int)(Math.random() * (SCREEN_WIDTH - 40)) + 20;
  var y:int = initial ? (int)(Math.random() * (SCREEN_HEIGHT / 2)) + SCREEN_HEIGHT / 2 :
      (int)(Math.random() * (SCREEN_HEIGHT * 2 / 3)) + SCREEN_HEIGHT / 3 + scrollPos; 

  for (var i:int = 0; i < snake.getLength(); i++)
  {
    var partPosition:Point = snake.getPartPosition(i);

    if (Point.distance(partPosition, new Point(x,y)) < 30)
      return CreateRandomEgg(initial);
  }

  return new Egg(x,y,initial);
}

Function requires initial parameter that we already used in Egg class constructor. Variables x and y represent horizontal and vertical position of new egg. Both values are random, horizontal position can range from 20 to SCREEN_WIDTH - 20. Offset of 20 pixels ensures, that egg is not positioned to close to the left or right edge of the frame.

Vertical position of first (initial) egg is randomly selected in the upper section of visible area. Other eggs can be positioned a little be lower on the screen.

Position of new egg cannot be too close to snake's body. Code inside the for loop, checks if distance between the egg and each body parts is outside the range of 30 pixels. If all body parts are outside the range, new Egg object is created and returned.

Implementation of CreateRandomEgg function calls getPartPosition function from Snake class that is currently unimplemented. And so is the Egg class constructor that is used her. We will implement both of them later.

New Egg objects are made inside New_Game, Restart_Game and Draw_Game function. Replace all statements that creates Egg object from:

egg = new Egg(true); 

with

egg = CreateRandomEgg(true); 

Just be careful that you don't mix up true and false values. Before you can compile the project, we have to implement getPartPosition function and change the Egg class constructor.

Add implementation of getPartPosition function inside the Snake class (file Snake.as):

public function getPartPosition(part:int):Point
{
  return partPosition[part];
} 

Replace the current version of Egg class (file Egg.as) constructor with:

public function Egg(x:int,y:int,initial:Boolean) 
{      
  if (initial)
    phase = 10; 
  else
    phase = 1;     

  position = new Point(x,y);     
}

The code is much more simple now, because CreateRandomEgg function does most of the work. You can also remove definitions of positions Array and nextPosition variable, because it won't be needed any more.

You can compile and run the game now. As you can see, we've made a big progress in this chapter. But there is still one thing missing: the game does not check if the egg hits the lower edge of the game frame. If the egg is not eaten in time, it is game over.

CheckCollision

Improved version of this function now looks like this:

private function CheckCollision():Object
{
  var headBounds:Rectangle = snake.getBounds(0);

  //check egg and the bottom of the screen
  var eggBounds:Rectangle = egg.getBounds(); 

  if (eggBounds.y - eggBounds.height <= scrollPos)
    return egg;

  //check snake and egg
  if ((egg != null) && egg.active())
    if (headBounds.intersects(eggBounds))
    {
      egg.eat();
      snake.append();
    }

  //check snake and the edge of the screen
  if ((headBounds.x <= 0) ||
      (SCREEN_WIDTH - headBounds.x - headBounds.width <= 0) ||
      (headBounds.y - headBounds.height <= scrollPos) ||
      (SCREEN_HEIGHT + scrollPos - headBounds.y <= 0))
  {
    snake.kill();
    return snake;
  }

  //check snakes body
  for (var i:int = 7; i < snake.getLength(); i++)
  {
    var partBounds:Rectangle = snake.getBounds(i);

    if (headBounds.intersects(partBounds))
    {
      snake.kill();
      return snake;
    }
  }

  return null;
}

New version is not much different from previous version but there are two important differences:
- function first checks if bottom section of egg icon is outside the game frame
- function now returns Object instead of Boolean. If there is no collision, that causes the end of the game, function returns null. If head of the snake hits the edge of the screen or its own body, function returns snake object. If egg hits the lower edge of the screen, function returns egg object.

CheckCollision is called from Draw_Game function once per frame. Because new version of this function returns a different type, we have to also modify the code inside the Draw_Game function (inside case GAME_PLAYED):

var obj:Object = CheckCollision();

if (obj is Snake)
  ChangeState_Game(GAME_KILLED);

if (obj is Egg)
{
  egg.blink();
  ChangeState_Game(GAME_FAILED); 
}

When the Snake object is returned, state GAME_KILLED becomes active and animation of dying snake is displayed. If Egg object is returned, we have to perform different animation. Egg will blink during GAME_FAILED state, which will be active for only few seconds.

Add the definition of GAME_FAILED constant to other constant at the top of Game.as

private static const GAME_FAILED:int         = 6;

Currently, the GAME_FADE_OUT constant has value 6, change its value to 7. The following section belongs before case GAME_FADE_OUT statement inside Draw_Game function:

case GAME_FAILED:
  if (!egg.blink())
    ChangeState_Game(GAME_FADE_OUT);   
  break;

While the GAME_FAILED state is active, blink function of Egg object is called until it returns value false. Function blink will take care of blinking egg.

This new animation requires new variable in Egg class (file Egg.as):

private var blinking:int = 0;

This variable will be used as a counter, that will be set only the first time blink function is called, and decreased by one, during the execution of the function. According to the value of the variable, value of phase variable is set. Value of phase variable is used to display the egg icon with different levels of transparency.

Add the implementation of blink function inside the Egg class:

public function blink():Boolean
{
  if (blinking == 0)  
    blinking = 70;

  blinking--;

  phase = blinking % 10;

  if (blinking / 10 % 2 == 1)
    phase = 10 - phase;

  return (blinking != 0);
}

Collision detection

2010-02-24T06:20:00.001-08:00

This is not the first time that we are implementing collision detection in Snakes Adventure. First time we've made it in the game menu, where collision between mouse cursor and game options is detected on mouse events. In previous chapter we implemented CheckCollision function, which once per frame, detects collision between the head of the snake and the egg. In this chapter we will improve collision detection between the head of the snake and the egg and add new code that checks if the head collides with the edges of the frame or other body parts.

getBounds

We will implement getBounds function in both classes: Snake and Egg. Both functions will return position and size of the sensitive area of the object. Position and size will be stored inside Rectangle object.

Function getBounds for Egg class (Egg.as) is simple:

public function getBounds():Rectangle    
{ 
  return new Rectangle(position.x - 5, position.y + 9, 11, 16);
}

Function returns the area around the centre of the egg, which is a lot smaller than area, where pixels from the source image are copied to (because most of those pixels are transparent).

Function getBounds for Snake class (Snake .as) is far more complex, because it returns the area of one part of the body, not the whole body. Function requires parameter part - the index of the part.

public function getBounds(part:int):Rectangle
{
  var pos:Point = partPosition[part];
  var direction:int = partDirection[part];
  var phase:int = partPhase[part];
  var rectangle:Rectangle = null;

  if (part == 0) //head
  {        
    phase = partPhase[1];         

    switch (direction)
    {
    case NORTH:
      rectangle = new Rectangle(pos.x - 6 + northHeadOffset[phase],pos.y + 12,13,16);
      break;          
    case EAST:
      rectangle = new Rectangle(pos.x - 4,pos.y + 6 - eastHeadOffset[phase],16,13); 
      break;          
    case SOUTH:         
      rectangle = new Rectangle(pos.x - 6 + southHeadOffset[phase],pos.y + 4,13,16);
      break;          
    case WEST:
      rectangle = new Rectangle(pos.x - 12,pos.y + 6 - westHeadOffset[phase],16,13);
      break;                             
    }
  }
  else
  if (part == partPosition.length - 1) //tail       
    switch (direction)
    {
    case NORTH:         
      rectangle = new Rectangle(pos.x - 5 + northHeadOffset[phase],pos.y + 3,11,10);
      break;
    case EAST: 
      rectangle = new Rectangle(pos.x - 6,pos.y + 5 - eastHeadOffset[phase],10,11);
      break;
    case SOUTH: 
      rectangle = new Rectangle(pos.x - 5 + southHeadOffset[phase],pos.y + 7,11,10); 
      break;
    case WEST:
      rectangle = new Rectangle(pos.x - 5,pos.y + 5 - westHeadOffset[phase],10,11);
      break;
    }                          
  else  //body
    switch (direction)
    {
    case NORTH:         
      rectangle = new Rectangle(pos.x - 6 + northHeadOffset[phase],pos.y + 2,12,4);
      break;
    case EAST: 
      rectangle = new Rectangle(pos.x - 2,pos.y + 6 - eastHeadOffset[phase],4,12);
      break;
    case SOUTH: 
      rectangle = new Rectangle(pos.x - 6 + southHeadOffset[phase],pos.y + 2,12,4); 
      break;
    case WEST:
      rectangle = new Rectangle(pos.x - 2,pos.y + 6 - westHeadOffset[phase],4,12);
      break;
    }

  return rectangle;
}

Function returns rectangular area of each body part, position and size are similar to those, used in the draw function, but area is a lot smaller.

CheckCollision

Current version of collision detection between the head of the snake and the egg work like this: if horizontal or vertical distance between both positions was less than 12 pixels, collision was detected.

Now that we have both getBounds functions implemented, we can use them to improve collision detection between the head of the snake and the egg. Replace content of CheckCollision function in Game.as:

var headBounds:Rectangle = snake.getBounds(0);

//check egg
if ((egg != null) && egg.active())
  if (headBounds.intersects(egg.getBounds()))
  {
    egg.eat();
    snake.append();
  }

First, area of snakes head is stored into headBounds Rectangle and if egg is "active", intersects function checks if there is collision between two Rectangles. The rest of the source code is the same as in previous version.

Collision detection is more precise now, because snake's head movement and direction are now taken into account. But you will most probably not notice any difference while playing the game.

In the original game, the snake dies when the head hits the edge of the game area or body part. This is not hard to implement. Add this section at the end of CheckCollision function:

//check the edge of the screen
if ((headBounds.x <= 0) || (SCREEN_WIDTH - headBounds.x - headBounds.width <= 0) ||
    (headBounds.y - headBounds.height <= 0) || (SCREEN_HEIGHT - headBounds.y <= 0))
{
  snake.kill();
  return false;
} 

Simple, isn't it? The if statement checks if headBounds Rectangle is outside left, right, bottom or top edge of the game frame. If it is, snake dies. We are using unimplemented function kill from Snake class, that will be implemented at the end of the chapter. Statement return false; is currently illegal, because function declaration says that function doesn't return anything. Replace void with Boolean in the function declaration. From now on, we will use return value to indicate if snake died (false) or not (true).

The following section of code checks if the head of the snake hit the body part. Add it to the end of CheckCollision function:

//check body
for (var i:int = 7; i < snake.getLength(); i++)
{
  var partBounds:Rectangle = snake.getBounds(i);

  if (headBounds.intersects(partBounds))
  {
    snake.kill();
    return false;
  }
}

return true;

This code checks if rectangular area of body parts intersects with the head. If collision is detected, snake dies, function exits and value false is returned. If there is no collision, function exits and returns true. There is another undefined function from Snake class used here - getLength function will be implemented at the end of the chapter.

Great, now the game knows when the player made mistake. There are only few things we have to do, before we are done:
- stop the game
- display animation of dying snake
- perform fade out
- restart the level

GAME_KILLED/FADE_OUT

These two constants define two new game states. During the GAME_KILLED state, animation of dying snake will be displayed. GAME_FADE_OUT state will be active for one second and within this second, fade out effect will be applied. Add both definitions to other constants at the top of Game.as:

private static const GAME_KILLED:int         = 5;
private static const GAME_FADE_OUT:int       = 6;

Now we will use the value that is returned by CheckCollision function. Change the CheckCollision statement in Draw_Game function (GAME_PLAYED state) to:

if (!CheckCollision())
  ChangeState_Game(GAME_KILLED); 

When the false value is returned (snake died), game state is change to GAME_KILLED.

Add the source code for both states inside switch statement in Draw_Game function:

case GAME_KILLED:
  if (!snake.kill())
    ChangeState_Game(GAME_FADE_OUT);   
  break;
case GAME_FADE_OUT: 
  Apply_FadeEffect(gameTime); 

  if (gameTime >= 1)
    Restart_Game();       
  break;  

While the GAME_KILLED is active kill function (still unimplemented function that takes care of animation of dying snake) from Snake class is called until it returns value false. At this point GAME_FADE_OUT becomes active, during this state fade out effect is applied for one second and when the screen is completely black, Restart_Game function is called.

Before we implement this function, you can make a little change in SetMouseCursor function. Change the last statement of the function to:

SetMouseCursor(cursorDirection,gameState > GAME_PLAYED);  

Now the grey mouse cursor icon will be displayed while GAME_KILLED or GAME_FADE_OUT state is active.

Restart_Game

Implementation of this function is very similar to New_Game function, that is why the code is positioned next to it:

private function Restart_Game():void
{  
  snake = new Snake(SCREEN_WIDTH / 2,SCREEN_HEIGHT / 3,20); 
  egg = new Egg(true); 

  ChangeState_Game(GAME_FADE_IN);
}

New Snake and Egg objects are created the same way as they are in New_Game function, game state is also set to GAME_FADE_IN. The only difference is that New_Game function also sets level variable to 1.

There is one more thing we have to do, to make sure everything looks the same after restart. We have to reset nextPosition counter in Egg class, otherwise the initial egg will most probably not be at the same position. Replace Egg constructor in Egg.as file:

public function Egg(initial:Boolean) 
{      
  if (initial)
  {
    phase = 10; 
    nextPosition = 0;
  }
  else
    phase = 1;     

  position = positions[nextPosition];         

  nextPosition++;

  if (nextPosition == positions.length)
    nextPosition = 0;        
}

If value of parameter initial is true, value of nextPosition variable is set to 0. The rest of the code is the same as before.

Snake class

We have to implement all the functions in Snake class (Snake.as) that we used in CheckCollision function: getLength and kill. Implementation of the first one is simple:

public function getLength():int
{
  return partPosition.length;
} 

Function returns the number of body parts, which is equal to number of objects in each Array from Snake class.

Before we start implementing the animation of dying snake, I advise you to try the game at the bottom of the page to see how animation snake looks like. In the first phase body parts are slowly transformed into bones. In the second phase bones are transformed into half-transparent bones and in the final phase bones slowly disappear.

Of course, this animation requires new graphics. I added new images into Snake.png file, that now looks like this:

If you download project package for this chapter, you can find this image inside Images folder. Body parts, bones and half-transparent bones are separated by 80 pixels in vertical direction.

Snake.kill

The kill function is called once from CheckCollision function and once per frame from Draw_Game while GAME_KILLED state is active. When kill function returns false, animation of dying snake is complete and game state GAME_FADE_OUT becomes active.

Before we start implementing kill function, we will add two variables at the beginning of class:

private var killed:Boolean = false;

The first time kill function will execute, the value of variable will be set to true.

private var deadPart:Array = new Array(); 

This array will be used for animation, each body part will have its own numeric value inside this array, that will represent the animation phase.

Add implementation of kill to Snake class:

public function kill():Boolean
{
  if (!killed)
  {
    killed = true;

    for (var i:int = 0; i < partPosition.length; i++)
      deadPart.push(0);
  }

  if ((deadPart.indexOf(0) == -1) &&
      (deadPart.indexOf(1) == -1) &&
      (deadPart.indexOf(2) == -1))
    return false;

  for (var j:int = 0; j <= 2; j++)
    if (deadPart.indexOf(j) != -1)
      while (true)
      {
        var index:int = (int)(Math.random() * (deadPart.length - 0.1));

        if (deadPart[index] == j)
        {
          deadPart[index] = deadPart[index] + 1;
          return true;
        }
      }

  return true;
}  

The first time kill function is executed, killed variable is set to true and deadParts Array gains one numeric object with zero value for each body part.

"if ((deadPart.indexOf(0) ..." statement checks if there is an object in deadParts Array with value 0, 1 or 2. Function indexOf checks if there is an object in the array, that has value equal to value of the parameter, and returns its index. -1 indicates that there is no such object.

If all objects have value 3, it means that animation is complete and function exits and value false is returned.

The last section of the code checks if there is an object in deadParts Array with value 0, 1 or 2. If there is no object with value 0, first phase of animation is complete. If there is object with value 1 in the Array in means that animation is still in the second phase.

Code inside while loop randomly selects an object in the array and if this object has desired value (value of j counter), its value is increased by one. For example, if in the first phase of animation, fifth object in the array is randomly selected, its value is increased from zero to one and player can see the fifth body part transformed into bones.

Snake.draw

Animation of dying snake requires a lot of changes in draw function, unfortunately, source code of this function has become much too long to be displayed on this page. I advise you to download project package for this chapter and copy the content of draw function from Snake.as into your own project.

New Snake.png file requires changes in the creation of BitmapData object constructor, because the height of the source image has increased:

bitmap = new BitmapData(96,240,true,0x00000000);

At the beginning of for loop that iterates through all body parts, there is new definition of deadPartOffset variable with value set to 0. When deadPart array is not empty, game is in the "dying snake animation" mode. If deadPart object of the part, that function is currently drawing, has value 3, drawing is skipped. Otherwise deadPartOffset value is calculated from deadPart object value multiplied by 80, which is the vertical distance between source images for each phase of animation:

var deadPartOffset:int = 0;

if (deadPart.length > 0) 
  if (deadPart[i] == 3)
    continue;
  else
    deadPartOffset = deadPart[i] * 80;

Value of deadPartOffset variable has been used in each copyPixels statement. Here is one example:

screenBuffer.copyPixels(bitmap,
                        new Rectangle(72,51 + deadPartOffset,10,11),
                        new Point(pos.x - 12,visible.y - pos.y - 5)); 

Eating the eggs

2010-02-18T09:04:00.000-08:00

In this chapter, I will not talk about how to cook or fry the egg. Instead I will teach you how to displays the egg on the screen and how to make the game able to recognize when it has been eaten by the snake.

We will create new class that takes care of creation and presentation of the egg, add new code that checks collision between the egg and the snake and increases the length of the snake, after the egg is eaten. At the end we will make some improvements in the code that controls the movement of the snake.

Egg class

Class represents the object in the game that can be eaten by the snake. Implementation of the class takes care of creation, positioning and drawing. We will put complete implementation of the class into one file (Egg.as) and put this file inside Classes folder. Here is the content of the file:

package Classes 
{
  import flash.geom.*; 
  import flash.display.*; 

  public class Egg
  {
    private var position:Point = null;
    private var eaten:Boolean = false;
    private var phase:int = 0;

    private static var positions:Array = new Array(new Point(120,430),new Point(300,320),new Point(70,30),new Point(240,280),new Point(400,130),new Point(360,180));  
    private static var nextPosition:int = 0;

    public function Egg(initial:Boolean) 
    {      
      position = positions[nextPosition];

      phase = initial ? 10 : 1;      

      nextPosition++;

      if (nextPosition == positions.length)
        nextPosition = 0;        
    }

    public function getPosition():Point
    {
      return position;
    }

    public function active():Boolean
    {
      return (phase == 10);
    }    

    public function eat():void
    {
      if (active())    
        eaten = true;
    }

    public function update():Boolean
    {
      if (eaten)
      {
        phase--;

        if (phase <= 0)
          return false;
      }
      else
      {
        phase++;

        if (phase > 10)
          phase = 10;
      }

      return true;
    }

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

    private var bitmap:BitmapData = null;

    public function draw(screenBuffer:BitmapData,visible:Rectangle):void
    {
      if (bitmap == null)
      {
        bitmap = new BitmapData(300,30,true,0x00000000);
        bitmap.draw(new eggImg());
      }    

      screenBuffer.copyPixels(bitmap,
                              new Rectangle(300 - phase * 30,0,30,30),
                              new Point(position.x - 15,visible.y - position.y - 15)); 
   }
  } 
}

Implementation of this class is simple compared to the Snake class, but it still requires some explanation. Class has the following members:
- position: contains horizontal and vertical position of the egg in the game world
- eaten: is set to true when the snake eats the egg
- phase: is used to display the egg image with different levels of transparency
- positions: contain six different positions, where eggs are displayed. You can add new positions if you like
- nextPosition: index of the Point in positions Array that will be used to set the position of new egg
- constructor (Egg): parameter initial must be set to true for the egg that is made at the beginning of the stage. First egg is visible after it has been made (phase set to 10), other eggs are not (phase set to 1). Position of the first egg is stored in the first element in positions Array, position of the second egg is in the second element... when the value of nextPosition variable reaches the end of the Array, it is set to zero and first element is used again.
- getPosition: returns position of the egg.
- active: returns true only when phase variable has value 10.
- eat: this function will be called when the snake is inside the range of the egg. Function checks if egg is active and it has not been eaten before and then sets the eaten to true.
- update: function will be called once per frame. When the egg is eaten, value of phase will be decrease by one until it reaches the zero. At this point function returns false, which indicates that egg has been eaten and it has completely disappeared and can be replaced with new one.
- draw: creates BitmpaData from embedded image if necessary and displays the egg image with required level of transparency. Level of transparency is controlled with phase variable.

Egg.png contains egg icons with ten different levels of transparency and can be found inside Images folder in project package for this chapter.

Game.as

Egg class implements all the functionality to display the egg on the screen, we just have to use it. Open Game.as file and add definition of egg variable right after snake variable:

private var egg:Egg = null;

We only need one variable, because there can be only one egg in the game at the time. First egg object will be made at the beginning of the game (New_Game function), value of initial parameter is set to true.

egg = new Egg(true); 

Now we can display the egg by calling draw function int Draw_Game function. Insert this code before the code that draws the snake:

if (egg != null)
  egg.draw(screenBuffer,new Rectangle(0,SCREEN_HEIGHT,SCREEN_WIDTH,SCREEN_HEIGHT));  

We have to call update function once per frame. Draw_Game function is executed once per frame, that's why we will call update here. We have to call it only when GAME_PLAYED state is active. Replace existing code in Draw_Game function for this state with:

if (egg != null)
  if (!egg.update())
    egg = new Egg(false);

if (snake != null)
{
  snake.move();

  CheckCollision();
}

Function update returns false when the egg has been eaten and it has completely disappeared. This is good time to create new egg, but this time with initial parameter set to false.

Right after snake.move statement, function CheckCollision checks if there is collision between the egg and the snake. Implementation of this function is our next task.

CheckCollision

Function CheckCollision checks if there is collision between the egg and the head of the snake. The head is inside the range when horizontal or vertical distance is less or equal 12 pixels. This is not very precise solution but in practice it works OK:

private function CheckCollision():void
{
  var snakePosition:Point = snake.getPosition();
  var snakeDirection:int = snake.getDirection(); 

  if ((egg != null) && egg.active())
  {
    var distanceToEgg:Point = egg.getPosition().subtract(snakePosition);

    if ((Math.abs(distanceToEgg.x) <= 12) && (Math.abs(distanceToEgg.y) <= 12))
    {
      egg.eat();
      snake.append();
    }
  }
} 

When the snake is close enough to the egg, eat function is called which sets the eaten variable to true. Length of the snake is increased within append function from Snake class.

Snake.append

Task of append function is quite simple: it adds new part at the end of the snake body. In fact it copies all three properties (position, direction and phase) of the last part, adjusts the position and phase and pushes new values at the end of Array.

public function append():void
{ 
  var position:Point = partPosition[partPosition.length - 1];      
  var direction:int = partDirection[partPosition.length - 1];
   var phase:int = partPhase[partPosition.length - 1];

  switch (direction)
  {
  case NORTH:
    partPosition.push(new Point(position.x,position.y - SPEED));   
    partPhase.push((phase + 1) % 9);   
    break;
  case EAST:
    partPosition.push(new Point(position.x - SPEED,position.y));      
    partPhase.push(((phase - 1) < 0 ? 8 : phase - 1)  % 9);
    break;
  case SOUTH:
    partPosition.push(new Point(position.x,position.y + SPEED));
    partPhase.push(((phase - 1) < 0 ? 8 : phase - 1)  % 9);
    break;
  case WEST:
    partPosition.push(new Point(position.x + SPEED,position.y));
    partPhase.push((phase + 1) % 9);
    break;
  }

  partDirection.push(direction);
}  

You can now compile and play the game. When the game begins there is an egg located in upper-left corner. When the snake is close enough, the egg disappears and new one appears in lower right corner. Length of the snake is slightly increased, maybe you will not notice this after first egg, but after eating five or six eggs, snake will become significantly longer.

I am sure, you had problems controlling the snake. It is not your fault, controls are not very precise and too complicated. We have to fix this.

Phase 4

In chapter 16 we implemented advanced version of snake. If you remember, snake can change direction only when phase value of leading part equals 0. In the worst case scenario, snake moves by 32 pixels (SPEED * 8) before it changes the direction. This is the reason why it is sometimes almost impossible to hit the egg. I made some changes in source code of move function: now snake can change direction even if phase value of leading part equals 4.

New version of move function can be found in Snake.as file inside project package for this chapter. If you recompile and try the game again, you will see that snake now changes direction almost immediately after mouse is pressed.

SetGameCursor/MouseDown_Game

At the moment, controlling of the snake requires a lot of mouse movement. We can make things a lot more simple if we change the rules. When snake is moving in vertical direction, we will only check if mouse cursor is on the left or right side at the time of mouse click. When snake is moving in horizontal direction, we will check if mouse is above or below. This makes the code much more simple and controlling much easier.

New version of SetGameCursor function in Game.as now looks like this:

private function SetGameCursor():void  
{  
  var mx:int = mouseX;
  var my:int = mouseY;

  my = SCREEN_HEIGHT - my;
  var position:Point = snake.getPosition();
  var direction:int = snake.getDirection(); 
  var cursorDirection:int = 0;

  if ((direction == Snake.NORTH) || (direction == Snake.SOUTH))
    if (mx - position.x > 0)  
      cursorDirection = Snake.EAST;      
    else
      cursorDirection = Snake.WEST; 
  else
    if (my - position.y > 0)
      cursorDirection = Snake.NORTH;      
    else
      cursorDirection = Snake.SOUTH; 

  SetMouseCursor(cursorDirection,false);  
}

Source code for GAME_PLAYED state inside MouseDown_Game function:

case GAME_PLAYED:
  {
    my = SCREEN_HEIGHT - my;
    var position:Point = snake.getPosition();
    var direction:int = snake.getDirection(); 

    if ((direction == Snake.NORTH) || (direction == Snake.SOUTH))
      if (mx - position.x > 0)  
        snake.setDirection(Snake.EAST);      
      else
        snake.setDirection(Snake.WEST); 
    else
      if (my - position.y > 0)
        snake.setDirection(Snake.NORTH);      
      else
        snake.setDirection(Snake.SOUTH); 
}

Controlling is now much more comfortable, source code is much shorter and more clear.

Custom mouse cursors

2010-02-14T07:23:00.000-08:00

In Flex applications, system arrow cursor is displayed by default. Developers can use other icons defined in MouseCursor class, like hourglass, hand... Icons look fine when user interface is made from Flex UI components, but are a bit to boring for games and usually don't fit with the games graphics at all.

So far, we didn't pay any attention to mouse cursor, that is why only default arrow icon was displayed in the game. In this chapter we will embed nine new images into the game and use them to display mouse cursor. One image will be used for the mouse cursor in the game menu, the rest will be set according to location of mouse cursor and the snake. New images can be found inside Images folder in project package for this chapter.

There are two ways to implement custom mouse cursors in the Flex applications:
- hiding mouse cursor with Mouse.hide() and drawing new image, part of the image or animation, on the location of mouse cursor
- replacing active mouse cursor with new image by using functions from CursorManager class.

We will use the second approach to learn how to use CustomManager, although first approach is more flexible. You can see how new mouse cursors look if you start the game bellow. If the snake runs out of the screen, reload the page to restart the game.

CursorManager

Adobe® Flex Language Reference: The CursorManager class controls a prioritized list of cursors, where the cursor with the highest priority is currently visible. If the cursor list contains more than one cursor with the same priority, the Cursor Manager displays the most recently created cursor.

Before we can use CursorManager, we have to import it. Add new import statement into SnakesAdventure.as:

import mx.managers.CursorManager;

CursorManager class contains fifteen public functions but we will use only two: removeCursor and setCursor. We will implement all the functionality that removes active cursor and set new one, in SetMouseCursor function in file SnakesAdventure.as:

private var cursorID:Number = 0;
private var mouseCursorDirection:int = -1;
private var mouseCursorDisabled:Boolean = false;

private function SetMouseCursor(direction:int,disabled:Boolean):void  
{
  if ((mouseCursorDirection != direction) || (mouseCursorDisabled != disabled))
  {
    mouseCursorDirection = direction;
    mouseCursorDisabled = disabled;

    CursorManager.removeCursor(cursorID);   

    switch (direction)
    {
    case 0:
      cursorID = CursorManager.setCursor(mouseCursorImg);
      break;
    case Snake.NORTH:
      if (disabled)
        cursorID = CursorManager.setCursor(mouseCursorNDImg);
      else
        cursorID = CursorManager.setCursor(mouseCursorNImg);      
      break; 
    case Snake.EAST:
      if (disabled)
        cursorID = CursorManager.setCursor(mouseCursorEDImg);
      else
      cursorID = CursorManager.setCursor(mouseCursorEImg);      
      break; 
    case Snake.SOUTH:
      if (disabled)
        cursorID = CursorManager.setCursor(mouseCursorSDImg);
      else
        cursorID = CursorManager.setCursor(mouseCursorSImg);      
      break; 
    case Snake.WEST:
      if (disabled)
        cursorID = CursorManager.setCursor(mouseCursorWDImg);
      else
        cursorID = CursorManager.setCursor(mouseCursorWImg);      
      break;   
    }
  }
}

SetMouseCursor function requires two parameters, cursor image is selected according to value of both parameters. Zero value of direction parameter sets game menu cursor. If value equals NORTH, EAST, SOUTH or WEST constant from Snake class, function picks the image with arrow that points in the same direction. Parameter disabled controls if grey (true) or coloured (false) version of image is used.

Two global variables: mouseCursorDirection and mouseCursorDisabled, make sure that mouse cursor is not replaced, if values of both parameters define the same mouse cursor that is currently active. Values are stored whenever mouse cursor icon is changed and compared with values of direction/disabled the next time function is called. If both pair of values are equal, the whole process is skipped.

Before we can use SetMouseCursor function, we have to embed new cursor images into the application. Add this code into Images.as file:

[Embed(source="Images/MouseCursor.png")]private var mouseCursorImg:Class;
[Embed(source="Images/MouseCursor_N.png")]private var mouseCursorNImg:Class;
[Embed(source="Images/MouseCursor_ND.png")]private var mouseCursorNDImg:Class;
[Embed(source="Images/MouseCursor_E.png")]private var mouseCursorEImg:Class;
[Embed(source="Images/MouseCursor_ED.png")]private var mouseCursorEDImg:Class;
[Embed(source="Images/MouseCursor_S.png")]private var mouseCursorSImg:Class;
[Embed(source="Images/MouseCursor_SD.png")]private var mouseCursorSDImg:Class;
[Embed(source="Images/MouseCursor_W.png")]private var mouseCursorWImg:Class;
[Embed(source="Images/MouseCursor_WD.png")]private var mouseCursorWDImg:Class;

We embedded all required images and implemented SetMouseCursor function, now we can use it to get rid of system arrow cursor.

Game menu cursor

We can set new mouse cursor at the start of the program. Init function is called right after Flex finishes its part of program initialization procedure. Let's set the game menu cursor at the beginning of Init function:

SetMouseCursor(0,false);

If you compile and run the game at this point, you can see, that new cursor is displayed only when it is positioned inside game frame. Outside the frame cursor icon is set back to default.

Game cursor

Cursor in the game is set according to its position and position of the head of the snake. We will implement all functionality inside SetGameCursor function, this time without any parameters. Function will be used and implemented inside Game.as file. Add call to SetGameCursor at the end of Draw_Game function:

SetGameCursor();  

We will use the same approach here that we did in MouseDown_Game when mouse button was pressed during the game. Direction, that mouse cursor arrow will point to, is calculated from mouse cursor position and position of the snake. Disabled cursor (geay icon) is set, when snake movement cannot change in that direction. For instance, when snake is moving in the northern direction, north and south direction cannot be set.

private function SetGameCursor():void  
{  
  var mx:int = mouseX;
  var my:int = mouseY;

  my = SCREEN_HEIGHT - my;
  var position:Point = snake.getPosition();
  var direction:int = snake.getDirection(); 
  var cursorDirection:int = 0;
  var cursorDisabled:Boolean = true;   

  if (Math.abs(mx - position.x) > Math.abs(my - position.y))
  { //check east/west
    if (mx - position.x > 0)  
      cursorDirection = Snake.EAST;      
    else
      cursorDirection = Snake.WEST;

    if (Math.abs(mx - position.x) > Snake.SPEED)      
      if ((direction == Snake.NORTH) || (direction == Snake.SOUTH)) 
        cursorDisabled = false;
  }
  else
  { //check south/north
    if (my - position.y > 0)
      cursorDirection = Snake.NORTH;      
    else
      cursorDirection = Snake.SOUTH;

    if (Math.abs(my - position.y) > Snake.SPEED)
      if ((direction == Snake.EAST) || (direction == Snake.WEST))  
        cursorDisabled = false;         
  }

  SetMouseCursor(cursorDirection,cursorDisabled);  
}

We cannot obtain position of mouse cursor from MouseEvent object as we did in MouseUp/Down/Moved functions. Current position of mouse cursor is obtained from mouseX and mouseY properties of Application class.

Value of cursorDirection variable is set according to difference between mouse cursor position and position of the head of the snake. If difference between y values is positive and greater that difference between x, value is set to NORTH. If difference between y values is negative but absolute value is greater that absolute value of difference between x, value is set to SOUTH. And so on. Value of cursorDisabled is set to true by default, and set to false only if direction of snake movement can change to cursorDirection.

At the end, SetMouseCursor function implemented in SnakesAdventure.as, is called.

Snake - advanced version

2010-02-09T13:39:00.001-08:00

In the previous chapter we implemented new functionality that displays and controls the movement of the snake. It probably required a lot of your time to understand how things work and maybe some of you were a bit disappointed with the look of the snake. Some people like this old-school look, others will preferer that snake character actually looks like snake.

It is best that you start the game and see for yourself how will the new version of snake look like, after we finish this chapter. Control snake movement with mouse control: direction of movement is changed when mouse button is pressed, vector between mouse cursor and snake's head defines new direction. If the snake runs out of the screen, just reload the page.

If you do not like this new look, skip this chapter and rather spent some time to improve the graphics of the snake from the previous chapter. Otherwise, keep reading.

Snakes new groove

To implement advanced version of snake, we need new graphics. New version of file Snake.png can be found inside Images folder in project package for this chapter. As you can see on the (enlarged) image bellow, it now contains images of different parts of snakes body in all possible directions: horizontal and vertical version of the body, heads and tails for all directions and image that fills the gap between two parts with different directions.

Implementation of advanced version of the snake will require a lot of changes in the existing source code. Fortunately, most of the changes will be made in the Snake class (Snake.as). In the Game.as we have to only change the value of length parameter in Snake constructor:

snake = new Snake(SCREEN_WIDTH / 2,SCREEN_HEIGHT / 3,20);  

If you slowed down the movement of the snake at the end of previous chapter, by calling move function once per two frames, it is best that you change the code back to:

if (snake != null)
  snake.move();

Because the value of SPEED constant has been decreased to four, the move function changes the position of the snake by four pixels only. Updating the position of the snake once per two frames will really look anoying. Change the SPEED constant in the Snake class to:

public static const SPEED:int       = 4;

In the previous version of the snake, position of each part was stored to Point object and all Point objects were kept inside partPosition Array. For advanced version, we also need to store direction of each part, otherwise we cannot display correct image of tail and image that fills the gap between two parts with different directions. Directions of all parts will be kept inside partDirection Array.

There is one more thing we need, to display body parts correctly. I call this data a phase, value of all is kept inside partPhase Array. Phase can have value from 0 to 8, each value is used to display a different part of snake body.

Change the section at the beginning of Snake class, that defines class members to:

private var direction:int = NORTH;  
private var newDirection:int = NORTH;    
private var partPosition:Array = new Array();
private var partDirection:Array = new Array(); 
private var partPhase:Array = new Array(); 

There is one new member that I haven't mentioned, yet. Variable newDirection will be used to store the value of new direction in setDirection function. In previous version, we immediately changed the value of direction and consequently snake immediately changed the direction of movement. In the advanced version, we have to wait until the time is right, before we can change the direction. The right time is when phase value of leading part (head) equals 0.

Snake class constructor now looks like this:

public function Snake(xPos:int,yPos:int,length:int) 
{  
  for (var i:int = 0; i < length; i++)
  {
    partPosition.push(new Point(xPos,yPos - i * SPEED));
    partDirection.push(direction);
    partPhase.push(i % 9);
  }
}

Position of all parts is set the same way as in previous version, direction for all parts is set to NORTH, phase values are set in following order 0, 1, 2, 3, 4, 5, 6, 7, 8, 0, 1, 2, 3...

Implementation of functions getPosition and getDirection has not changed, on the other hand, setPosition function now stores new direction in newDirection variable instead directly to direction variable:

public function setDirection(direction:int):void
{
  newDirection = direction;
}

Implementation of move function has been completely changed and is now almost hundred lines long. I will not show complete source code here, I will try to explain how it works on the section, that moves snake in northern direction. You can find complete source code in Snake.as file in project package file.

public function move():void
{    
  partPosition.pop();
  partDirection.pop();
  partPhase.pop();

  var position:Point = partPosition[0];
  var phase:int = partPhase[0];    

  switch (direction)
  {
  case NORTH:
    if ((newDirection != direction) && (phase == 0))      
    {                
      direction = newDirection;          

      if (direction == EAST)
        partPosition.unshift(new Point(position.x + 7,position.y + 8));
      else
        partPosition.unshift(new Point(position.x - 6,position.y + 8)); 

      partPhase.unshift(0);  
    }
    else
    {
      partPosition.unshift(new Point(position.x,position.y + SPEED));             
      partPhase.unshift(((phase - 1) < 0 ? 8 : phase - 1)  % 9);
    }
    break;
    .
    .
    .
  }

  partDirection.unshift(direction);
}  

Function first removes (pop) data for the last part of the snakes body from all Arrays, position and phase value of leading body part is stored to temporary variables.

In case the snake moves in the northern direction, it checks if value of newDirection variable is different from value of direction variable, which means that player recently changed the direction of the snake. When phase value of leading part equals 0, direction of movement can change. Position of new part is not increased by four in vertical direction, but is changed according to size of the image that fills the gap between two parts with different directions. Phase value of new part is set to zero.

If direction of movement hasn't changed, position of new part is increased by four (SPEED) in vertical direction. Phase value of new part is decreased by one or set to 8 if previous value was zero. Finally, direction of new part is inserted at the beginning of Array.

Implementation of drawing

The draw function has become much more complicated. Now we have to use different parts of the source image, to display head, tail and body. Again, I will show only part of the drawing routine and explain how it works. Complete source code of draw function can be found in Snake.as file in project package file.

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

private var bitmap:BitmapData = null;

private var northHeadOffset:Array = new Array(0,2,3,3,1,-1,-3,-3,-2);
... 

public function draw(screenBuffer:BitmapData,visible:Rectangle):void
{
  if (bitmap == null)
  {
    bitmap = new BitmapData(96,80,true,0x00000000);
    bitmap.draw(new snakeImg());
  }    

  for (var i:int = partPosition.length - 1; i >= 0; i--)
  {
    var pos:Point = partPosition[i];
    var direction:int = partDirection[i];
    var phase:int = partPhase[i];             

    if (i == 0) //head
    {        
      phase = partPhase[1];         

      switch (direction)
      {
      case NORTH:         
        screenBuffer.copyPixels(bitmap,
                                new Rectangle(38,51,15,17),
                                new Point(pos.x - 7 + northHeadOffset[phase],visible.y - pos.y - 13)); 
        break;
      ...
      }                    
    }
    else
    if (i == partPosition.length - 1) //tail
    {        
      switch (direction)
      {
      case NORTH:         
        screenBuffer.copyPixels(bitmap,
                               &nbspnew Rectangle(80,2,11,10),
                               &nbspnew Point(pos.x - 5 + northHeadOffset[phase], visible.y - pos.y - 3)); 
        break;
        ...
      }                    
    }        
    else  //body
    {
      if ((direction == EAST) || (direction == WEST))
        screenBuffer.copyPixels(bitmap,
                                new Rectangle(18 + phase * 4,0,4,19),
                                new Point(pos.x - 2,visible.y - pos.y - 9));
      else          
        screenBuffer.copyPixels(bitmap,
                                new Rectangle(0,18 + phase * 4,19,4),
                                new Point(pos.x - 9,visible.y - pos.y - 2));
    }

    var prevDirection:int = i < partPosition.length - 1 ? partDirection[i + 1] : direction;

    if (prevDirection != direction)
      switch (prevDirection)
      {
      case NORTH:
        if (direction == EAST)
          screenBuffer.copyPixels(bitmap,
                                  new Rectangle(72,51,10,11),
                                  new Point(pos.x - 12,visible.y - pos.y - 5));
        else
          screenBuffer.copyPixels(bitmap,
                                  new Rectangle(82,51,10,11),
                                  new Point(pos.x + 2,visible.y - pos.y - 3));
        break;
        ...
      }
}  

Source code that embeds Snake.png and creates BitmapData object from the source image has not changed, only width and height of source image has been changed.

Parts of the snake are now copied to screen buffer in reverse order: tail first, than body and finally the head. To display the head and tail in right direction, we have to use appropriate area of source image. Because the position of body changes vertically/horizontally, we need to adjust the position of the head and tail with predefined values from northHeadOffset Array. Different parts of the body are displayed according to phase value.

Finally, the direction of previous part is compared to direction of the part in the process. If they have different direction, we have to fill the gap. Gap is filled with suitable part of the image in bottom right section of Snake.png.

Snake - simple version

2010-02-06T09:09:00.000-08:00

In this chapter we will work on the main character of the game - the Snake. We will create the simple version of the snake, that looks and acts similar to the snake in the original game. In the next chapter we are going to improve the appearance of the snake, everything else will remain the same.

Before you continue reading, it is best that you start the game and see for yourself, what will be implemented throught this chapter. Control snake movement with mouse control: direction of movement is changed when mouse button is pressed, vector between mouse cursor and snake's head defines new direction. If snake runs out of the screen, just reload the page.

Snake class

ActionScript is very powerful object oriented programming language and to reach its full potential, you have to use custom classes whenever possible. Maybe it would be better if we used custom classes earlier in this tutorial, for example: for implementation of state automaton, we could create custom classes for all states. Anyway, it is time to create our first custom class named Snake. All functionality, that concerns snake, will be implemented in this class and exposed via public methods.

Before we create Snake class we need a package that will contain this class (and other classes for this project). This is very simple, just create new folder inside project root folder and name it Classes.

Before we can use class from this package, we have to import it. Add this statement to other import statement at the top of SnakesAdventure.as file:

import Classes.*;

Create new file inside Classes folder, name it Snake.as and copy the following section into this file:

package Classes
{
  import flash.geom.*; 
  import flash.display.*; 

  public class Snake
  {

  }
}

Package instruction in the first line defines to what package all classes inside the block belong to. Two import statements define external packages that will be used in this source file. Finally, Snake class is defined.

Implementation of Snake class will be quite short, but will require a lot more explanation. We will implement class functionality step by step, all the code in the following examples belongs inside Snake class block.

There is no rule how the implementation of custom class should look like, but developers usually put public constants, enumerations and variables at the beginning of class. Put these constants into Snake class:

public static const SPEED:int       = 8;  
public static const NORTH:int       = 1;
public static const EAST:int        = 2;
public static const SOUTH:int       = 3;
public static const WEST:int        = 4; 

SPEED constant defines the speed of snake's movement in pixels (per frame). Constants NORTH, EAST, SOUTH and WEST will be used in conjunction with direction of snake's movement.

We need two variables to describe snake's movement: position and direction; speed of the movement is constant (8 pixels). Snake body consist from many particles, current position of each particle will be kept inside its own Point object, all Point object will be stored inside Array.

private var direction:int = NORTH;  
private var partPosition:Array = new Array();

When Snake object is instantiated, direction variable is set to NORTH, at the beginning of each stage snake starts to move in northern direction. Definition of partPosition Array does not define particle positions, they will be set in constructor. Both variables are private, and can be changed only from inside this class.

Constructor is class function, that is executed during creation of the object. Snake class constructor requires three parameters:

- xPos: horizontal position of first particle (head)
- yPos: vertical position of first particle (head)
- length: number of particles that represent snakes body

public function Snake(xPos:int,yPos:int,length:int) 
{      
  for (var i:int = 0; i < length; i++)
    partPosition.push(new Point(xPos,yPos - i * SPEED));
} 

Constructor creates as many new Point objects as length parameter requires, push method adds this newly created object to the end of Array. First object (index 0) will represent the head.

Horizontal position of each particle equals value of xPos parameter, vertical position of head equals value of yPos parameter. Vertical position of each following particle is decreased by eight (SPEED). When the game starts, particles of snake body are on vertical line, particles are divided by eight pixels.

There is one thing about vertical positions of particles, that might confuse you. Vertical position of particles are decreasing from head to tail, because we are using different coordinate system that we used for drawing into screen buffer. Position (0,0) in screen buffer represents top-left corner, position (479,479) represent lower-right corner. We are using vertically inverted coordinate system for game mechanic: position (0,0) is lower-left corner and position (479,479) is top-right corner. Currently, there isn't any benefit from this approach, in fact, it will require some additional work in drawing routines, but will make life much easier when we start implementing scrolling.

Snake object

Now, that we have Snake class defined, we can create Snake object. Add declaration into Game.as:

private var snake:Snake = null;

Object will be instantiated in New_Game function:

snake = new Snake(SCREEN_WIDTH / 2,SCREEN_HEIGHT / 3,10);  

New_Game function creates Snake object, that represents snake that has ten particles and its head is positioned slightly below the centre of the screen. If you compile and run the game at this point, you will not see the snake. Of course, we have to first implement functionality, that actually displays particles in screen buffer.

Drawing particles

Before we start with implementation of drawing routine, add the call of Snake.draw method in Draw_Game function, place it right after the code that colors screen buffer in green (screenBuffer.fillRect...):

if (snake != null)
  snake.draw(screenBuffer,new Rectangle(0,SCREEN_HEIGHT,SCREEN_WIDTH,SCREEN_HEIGHT)); 

Function draw from Snake class requires two parameters:
- BitmapData object, where the drawing will occur
- rectangle that represents visible area of the game. This functionality will be implemented in following chapters.

Add implementation of draw function into Snake.as file:

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

private var bitmap:BitmapData = null;    

public function draw(screenBuffer:BitmapData,visible:Rectangle):void
{
  if (bitmap == null)
  {
    bitmap = new BitmapData(24,12,true,0x00000000);
    bitmap.draw(new snakeImg());
  }    

  for (var i:int; i < partPosition.length; i++)
  {
    var pos:Point = partPosition[i];

    screenBuffer.copyPixels(bitmap,
                            new Rectangle((i % 2) * 12,0,12,12),
                            new Point(pos.x - 6,visible.y - pos.y - 6));
  }
}

Image file Snake.png will be used to draw particles and can be found inside Images folder in project package. There are two version of particle, light and dark. White version will be used for even (index 0,2,4...) particles, grey for odd. This will make snake look less boring.

To use this image, we have to perform standard procedure: embed the image, create BitmapData object, and copy source image into it. Actual drawing is performed inside for loop, value of i variable decides which version of particle will be painted. Head (0) is always light, next particle is dark, light, dark, light...

To display particles on correct positions, we have to invert its vertical position (visible.y - pos.y). This is because of the difference between coordinate system for the game mechanic and screen buffer.

Size of each particle image is 12x12 pixels, distance between particles is only eight pixels (SPEED), that is why particles are overlapping. Positions stored inside partPosition array represent centre of each particle, to display particle image correctly, we have to move the location where pixels are copied, by half of the source image size (-6,-6).

Snake movement

We need to implement four functions, that will allow us to control snake movement. All functions belong to Snake class:

public function getPosition():Point
{
  return partPosition[0];
}

public function getDirection():int
{
  return direction;
}

public function setDirection(direction:int):void
{
  this.direction = direction;
}

public function move():void
{    
  partPosition.pop();

  var position:Point = partPosition[0]; 

  switch (direction)
  {
  case NORTH:
    partPosition.unshift(new Point(position.x,position.y + SPEED));  
    break;
  case EAST:
    partPosition.unshift(new Point(position.x + SPEED,position.y));               
    break;
  case SOUTH:
    partPosition.unshift(new Point(position.x,position.y - SPEED));   
    break;
  case WEST: 
    partPosition.unshift(new Point(position.x - SPEED,position.y));
    break;
  }      
} 

- getPosition returns position of the snake, in fact position of the first particle (head)
- getDirection returns value of direction variable
- setDirection sets new value to direction variable
- move actually performs movement. Last particle - tail is removed (pop) and new one is inserted (unshift) at the beginning of the queue - head. Position of new particle is calculated from previous position of the head and direction of movement. When snake moves north, vertical position is increased by eight pixels (SPEED), when it moves south position is decreased by same value. Movement in east/west direction increases/decreases horizontal position.

Controlling snake movement

Now we can use these functions to update and control movement of the snake in the source code inside Game.as file. First we will update position of the snake once per frame. At the end of switch statement in Draw_Game function add new case condition:

case GAME_PLAYED:        
  if (snake != null)
    snake.move();
  break;   

If you start the game at this point, you won't be able to control the snake movement. Snake will move only in default direction, which is the northern direction.

We will control movement of the snake from MouseDown_Game function. Add new condition to switch block inside MouseDown_Game function:

case GAME_PLAYED:
  {
    my = SCREEN_HEIGHT - my;
    var position:Point = snake.getPosition();
    var direction:int = snake.getDirection();      

    if ((Math.abs(mx - position.x) > Snake.SPEED) || 
        (Math.abs(my - position.y) > Snake.SPEED))
      if (Math.abs(mx - position.x) > Math.abs(my - position.y))
      { //check east/west
        if ((direction == Snake.NORTH) || (direction == Snake.SOUTH))        
          if (mx - position.x > 0)
            snake.setDirection(Snake.EAST);
          else
            snake.setDirection(Snake.WEST);
      }
      else
      { //check south/north
        if ((direction == Snake.EAST) || (direction == Snake.WEST))            
          if (my - position.y > 0)
            snake.setDirection(Snake.NORTH);
          else
            snake.setDirection(Snake.SOUTH);        
      }
  }
  break;    

This code is executed when player pushes the mouse button. Vertical position of mouse cursor is flipped, because the game uses different coordinate system. Snake's position and direction are stored into temporary variables.

Mouse cursor must be positioned more than eight (Snake.SPEED) pixels away from the head, otherwise direction cannot change.

If absolute horizontal distance between mouse cursor and head of the snake is greater that absolute vertical distance, direction can change to east or west only. This happens only if snake is currently moving in northern or southern direction.

If absolute vertical distance between mouse cursor and head of the snake is greater that absolute horizontal distance, direction can change to north or south, but only if snake is currently moving in eastern or western direction.

Fine tuning

If you compile and start the game you will be able to control the movement of the snake, but most probably snake will soon run out of the screen, because it moves way too fast. Game runs at 24 frames per second (by default), and snake moves by eight pixels each frame, which makes at total 192 pixels per second. Snake needs only 2.5 sec to travel from one side of the frame to another.

You can decrease the value of SPEED constant in Snake class and snake will move slowly, but particles will overlap even more and snake will look ugly.

I am using another solution: snake movement is updated once per two frame updates. This makes snake move 50% slower, but movement looks much less fluent. This solution was implemented in Game.as file. I made new global variable frameCount:

private var frameCount:int = 0;

Value of variable is increased once per frame, at the beginning of Draw_Game function.

frameCount++; 

Code that updates position of the snake is changed to:

if ((snake != null) && (frameCount % 2 == 0))
  snake.move();

Stage one

2010-02-03T09:45:00.000-08:00

We are not ready to begin development of the first stage of the game, yet. In this chapter we will create two labels, which will be displayed at the beginning of each stage. One will show the number of current stage at the top and second one "Press mouse button when ready" at the bottom. We will also add some code, that will come in handy later, when we start working on gameplay.

I add two new images in the project that will be used in the implementation, both images have five different levels of opacity (from 0.2 to 1.0). Images can be found in Images folder in project package for this chapter.

First image will be used to display "Stage XX" label, XX is number of current stage. Image contains Stage string and digits from 0 to 9. With those ten digits we can display all natural numbers, but we only need to display numbers from 01 to the number of last stage available in the game. Stage sign will be copied into screen buffer in three steps:

- stage text
- integer number of current stage divided by 10
- remainder of current stage divided by 10

Transparent parts of the image will be used to implement smooth transition between visible and hidden sign (and vice versa).

Second image will be used to display the blinking text "Press mouse button when ready". Transparent parts of the image will be used to implement smooth transition between visible and hidden label (and vice versa).

Labels will be displayed as long as mouse button is not pressed. In previous chapter we implemented game state automaton and defined four states. Sign will become visible in GAME_FADE_IN state, GAME_START state will be active as long as mouse button is not pressed. When mouse button is pressed, GAME_STARTED state becomes active, and text start to slowly disappear.

OK, let's start coding. Open Game.as and add definition of two variables to other variable definitions:

private var newState:int = 0;

private var level:int = 0;

Usage of newState variable will be explained later, level variable will contain the number of active stage/level. We will set this variable to 1 when player select new game option in game menu. Add this line at the beginning of New_Game function:

level = 1;

Implementation of Draw_Game function will require a little bit more work and explanation. Add this piece of code to Draw_Game:

gameTime += elapsedTime;

screenBuffer.fillRect(new Rectangle(0,0,SCREEN_WIDTH,SCREEN_HEIGHT),0xFF406020);  

In the first line we count the time (in second) since the current game state become active. Value is increased by time interval between previous and current frame. The fillRect method paints whole area of screen buffer in green colour. This is just temporary, we will remove this line when we start implementing scrolling background. Until then, green background will serve us better than default black background.

Function Draw_StageSign

Draw_StageSign function will be used to display both signs, implementation is quite long, but don't let it scare you off, there is nothing you haven't seen before, if you followed this tutorial from the beginning. Add Draw_StageSign function to Game.as file:

private var stageLabelBitmap:BitmapData = null;
private var stageReadyBitmap:BitmapData = null;

private function Draw_StageSign(stageOpacity:Number,readyOpacity:Number):void
{
  if (stageLabelBitmap == null)
  {
    stageLabelBitmap = new BitmapData(350,160,true,0x00000000);
    stageLabelBitmap.draw(new stageLabelImg());

    stageReadyBitmap = new BitmapData(240,250,true,0x00000000);
    stageReadyBitmap.draw(new stageReadyImg());
  }

  if (stageOpacity > 0.15)   
  {
    var yPos:int = 0;

    if (stageOpacity < 0.25)
      yPos = 128;
    else
    if (stageOpacity < 0.45)
      yPos = 96;
    else
    if (stageOpacity < 0.45)
      yPos = 64;
    else
    if (stageOpacity < 0.55)
      yPos = 32;

    screenBuffer.copyPixels(stageLabelBitmap,
                            new Rectangle(0, yPos, 100, 32),
                            new Point(SCREEN_WIDTH / 2 - 80,SCREEN_HEIGHT / 2 - 120));

    screenBuffer.copyPixels(stageLabelBitmap,
                            new Rectangle(int(level / 10) * 24 + 102, yPos, 24, 32),
                            new Point(SCREEN_WIDTH / 2 + 30,SCREEN_HEIGHT / 2 - 120));

    screenBuffer.copyPixels(stageLabelBitmap,
                            new Rectangle((level % 10) * 24 + 102, yPos, 24, 32),
                            new Point(SCREEN_WIDTH / 2 + 54,SCREEN_HEIGHT / 2 - 120));
  }

  if (readyOpacity > 0.15)   
  {
    var yPos2:int = 0;

    if (readyOpacity < 0.25)
      yPos2 = 200;
    else     
    if (readyOpacity < 0.45)
      yPos2 = 150;
    else
    if (readyOpacity < 0.45)
      yPos2 = 100;
    else
    if (readyOpacity < 0.55)
      yPos2 = 50;

    screenBuffer.copyPixels(stageReadyBitmap,
                            new Rectangle(0, yPos2, 240, 50),
                            new Point(SCREEN_WIDTH / 2 - 120,SCREEN_HEIGHT / 2 - 50));
  }
} 

Function requires two parameters, first parameter is opacity of "Stage XX" label, second parameter is opacity of "Press mouse button when ready" label. When the function is executed first time, both BitmapData objects are created from embedded images. Object stageLabelBitmap contains content of StageLabel.png, stageReadyBitmap contains content of StageReady.png.

Second block of code executes only when value of stageOpacity is greater than 0.15, otherwise "Stage XX" label is not displayed. Variable yPos contains the value of vertical position in source image. Values are a little bit modified according to opacity of labels in source image. Height of each label in the source image is 32, that is why the values 0, 32, 64, 96 or 128 are set to yPos.

First copyPixel function copies part of source image that contains Stage label, width of the rectangle is hundred pixels. Top left pixel of the source image is copied 80 pixels to the left and 120 above the centre of screen buffer.

Both numbers are copied at the same vertical position, horizontal position is set on the right side of screen buffer, that is why complete label appears horizontally centred. Digits in the source image start at column 102, width of each digit is 24 pixels. To display digit 0, we set horizontal position in source image to 102 + 24 * 0 = 102, to display digit 4 we use value 102 + 24 * 4 = 192. Value of both digits is calculated from level variable. First digit is result of division of level by 10, second digit is reminder of same division.

Last block of code displays "Press mouse button when ready" text with level of opacity required by readyOpacity parameter. We use same approach that we used to display "Stage" text, except this time we use different source image, where labels are 50 pixels apart (vertically).

Press mouse button when ready

When mouse button is pressed, GAME_START state ends and GAME_STARTED state becomes active and both labels start to disappear. Because the "Press mouse button when ready" label is blinking during the GAME_START state, we have to wait until label is fully opaque, before we change the state. We will store value of new state into newState variable when mouse button is pressed and Draw_Game will change the state, when time is right. Replace the current version MouseDown_Game function with this one:

private function MouseDown_Game(event:MouseEvent):void  
{ 
  var mx:int = event.localX;
  var my:int = event.localY;

  switch (gameState)
  {
  case GAME_START:  
    newState = GAME_STARTED;   
    break;
  } 
} 

Function Draw_Game part II

Now, that we have Draw_StageSign function implemented, it's time that we put it in use. Draw_StageSign will be called only when game states GAME_FADE_IN, GAME_START and GAME_STARTED are active. Put the following switch block at the end of Draw_Game function:

switch (gameState)
{
case GAME_FADE_IN:  
  Draw_StageSign(gameTime,gameTime);

  Apply_FadeEffect(1 - gameTime); 

  if (gameTime >= 1)
    ChangeState_Game(GAME_START);       
  break;
case GAME_START:
  var fracTime:Number = gameTime - int(gameTime);

  Draw_StageSign(1,int(gameTime + 1) % 2 == 0 ? fracTime : 1 - fracTime);

  if ((newState == GAME_STARTED) &&
     (int(gameTime + 1) % 2 == 0 ? fracTime > 0.55 : fracTime < 0.55)) 
  {
    ChangeState_Game(GAME_STARTED);
    newState = 0;
  }
  break;
case GAME_STARTED:
  Draw_StageSign(1 - gameTime,1 - gameTime);

  if (gameTime >= 1)
    ChangeState_Game(GAME_PLAYED);
  break;
}   

GAME_FADE_IN state is active for one second. Within this second, both labels start to appear, but it is hard to notice the effect, because fade-in effect is applied over complete screen buffer. Values for Draw_StageSign parameters can range from 0.0 (not visible) to 1.0 (visible). After one second, labels are fully visible and GAME_START state becomes active.

GAME_START state is active until mouse button is pressed. Value of gameTime variable increases over time, variable fracTime has the fractional part of gameTime value. For example when value of gameTime is 3.75 (seconds) value of fracTime is 0.75.

During GAME_START state, Stage label is visible all the time, first parameter in Draw_StageSign function call is set to 1. On the other hand "Press mouse button..." label is blinking all the time. On the odd seconds (integer value of gameTime variable is odd) label slowly disappears, on the even seconds it is becoming visible again.

if statement checks whether newState variable is set (mouse button was pressed) and when blinking label becomes fully visible, changes the state to GAME_STARTED. This state is active for one second, during this time both labels slowly disappear.

You can set different values to level variable in New_Game function, to see how those number look like. Just don't forget to set the value back to 1, when you are done.

Let the game begin

2010-02-01T09:02:00.001-08:00

If you followed this tutorial from beginning, you should know everything you need to know, to develop your own game. At least from technical point of view. So far we learned how to compile program from the source code, how to display images and play sounds. We also implemented double buffering, mouse event handler and even few simple animations. More than enough to create simple games, if you know how to make them.

Game development can be quite simple or very hard, depends of the type and quality of the game. Snake, Tetris, Space invaders... clones are relatively simple to create and convenient for game development beginners. First person shooters, strategies, MMO's... usually require more that one person to make and a lot of hard work, experience, money.

Anyway, from now on we will focus mostly on development of the game. But you most probably wonder, what kind of game are we going to make here.

Snake's Adventure???

Snake's Adventure will be the clone of the classic Snake game with some advanced features. Snake is one of the most popular games of all times, you can read all about the original and clones on Wikipedia. If you have never played the game before, I recommend that you do, because:
- it will help you better understand this tutorial
- it is fun.

Snake's Adventure will have all the features of the original: player will control the snake, that is constantly moving, and try to pick up all available food. When food is picked up, snake will grow longer, when snake's head hits the obstacle, screen edge or its own body, its game over.

The game will be also quite different from original. Player will control snake movement with the mouse. Snake will move on the terrain with different obstacles and it will constantly scroll up. If the food is not picked up by the time it disappears form the bottom of screen, it is game over, too.

What's the plan?

First we will make few adjustments in game menu and create game state automaton. Not much new here, but it has to be done.

Then we will implement Snake class, the drawing routine here will be most probably the hardest thing to understand. But it will look cool. Functionality, that controls movement of the snake, comes next. Here we will also learn how to create custom mouse cursor.

Next on the menu is - food: drawing, positioning, collision detection, scoring system.... I saved the best/hardest for the last: terrain, obstacles and scrolling.

At the end, we will implement settings menu, load/store setting, learn how to play music... and polish the game a little bit. I will also give you some advices how and where to publish the game.

Start new game

Currently, selected new game option in game menu, doesn't change state of the program when title screen fades out. Instead it resets game menu state automaton and after few seconds game menu is active again. Let's fix this.

Add new definition in GameMenu.as behind definition of pressedOption variable:

private var selectedOption:int = -1;

Value of variable will be set, when player releases mouse button over the selected option. Change switch block in MouseUp_GameMenu function to:

switch (gameMenuState)
{
case GAMEOPTIONS_WAIT:  
  switch (pressedOption)
  {
  case OPTION_NEW_GAME:    
    selectedOption = OPTION_NEW_GAME;      
    ChangeState_GameMenu(GAMEOPTIONS_OUT);      
    break;
  }
  break;
} 

This may look unnecessary to you right now, because new game is the only option that changes the state of game menu. We will need it later when we implement behaviour of other two options.

Finally, we have to change the state of the program to GAME, but not before the title screen fades out. Replace the line:

ChangeState_GameMenu(TITLE_SHOW);

at the bottom of Draw_GameMenu function with:

switch (selectedOption)
{
case OPTION_NEW_GAME:
  state = GAME;
  New_Game();
  break;
}

This code ends the GAME_MENU state and actives GAME state. New_Game function will take care of game initialization, currently this function is not defined. This will be our next task.

Game.as

This file is already part of the project, we made it in chapter 9. If you open the file, you can see that it is pretty much empty. It contains four functions without implementation, all of them are called from event handler routines implemented in SnakesAdventure.as:

- Draw_Game is called from Draw function (on ENTER_FRAME event)
- MouseDown_Game is called from MouseDown function (on MOUSE_DOWN event)
- MouseUp_Game is called from MouseUp function (on MOUSE_UP event)
- MouseMoved_Game is called from MouseMoved function (on MOUSE_MOVE event)

Before we start implementing all those functions, we have to make some preparations.

We already implemented state automaton twice: in activation screen and game menu. Game state automaton will require a lot more different sub-states, but for now we will define only four and add new state, when it is required:

private static const GAME_FADE_IN:int        = 1;
private static const GAME_START:int          = 2;
private static const GAME_STARTED:int        = 3;
private static const GAME_PLAYED:int         = 4;

private var gameState:int = GAME_FADE_IN;
private var gameTime:Number = 0;

private function ChangeState_Game(newState:int):void
{  
  gameState = newState;
  gameTime = 0;
}

This should look very familiar to you, because similar functionality was already implemented in Activation.as and GameMenu.as. We defined four different constants, one for each state. Variable gameState contains value of active sub-state, variable gameTime contains number of seconds since sub-state was activated. Function ChangeState_Game will be used to change active sub-state.

In Draw_GameMenu function (GameMenu.as) we added a call to undefined function and this was the reason why program did not compile anymore. New_Game function will take care of game initialization, but right now we have nothing to initialize. Implementation just sets the GAME_FADE_IN game state:

private function New_Game():void
{  
  ChangeState_Game(GAME_FADE_IN);
}

Finally, the code compiles without errors. As usual, complete package for this chapter can be download here.

Playing sound effects

2010-01-22T10:55:00.000-08:00

Sound effects in the game have a huge impact on the players experience. Playing sound effects with Action Script is simple, creating good sound effects is not. If you don't know how to make good sound effects for your game (like me), do not worry. You can find a lot quality sound effect on the internet for free or very small price.

In this chapter I will explain only the basics of how to play sound effects. I made three sounds effects and you can find them in Sounds folder in the project package for this chapter. All three files are in MP3 format, because Sound class, which will be used to play sound effects, supports only MP3 files. MP3 format is great for web games, because file size is small. Size of all three files together is only 90KB.

If you start the SnakesAdventure, embedded below, you can hear OptionSelected.mp3 played after mouse button click. OptionsIn.mp3 is played while the game options move from the left side to the centre. OptionsOut.mp3 is played while the game options move from the centre to the right side of the screen.

Complete source code, which takes care of embedding sound files and playing sound effects, is in the file Sounds.as. At the beginning of the file are three definitions of constants, one for each sound effect. Value of variable soundVolume controls volume of played sound effect, volume can range from 0.0 (silent) to 1.0 (max volume).

All three sound files are embedded the same way we embedded all images from Images folder.

Function PlaySound plays one sound effect, value of type parameter defines which sound effect will be played. On the basis of type parameter appropriate Sound object is made. We use Sound class play function to play sound effects. This function requires three parameters:
- initial position (in milliseconds) at which playback start
- the number of times a sound loops back to the startTime value before the sound channel stops playback
- SoundTransform object assigned to the sound channel

We will play all files from beginning and they won't loop. Only volume of the played sound effect will be adjusted. With SoundTransform object you can also adjust panning of played sound.

Initial value of soundVolume variable is 0.7, you can adjust this value as you will. So far, value remains unchanged during the game execution. Later, when we implement settings menu, player will be able to adjust sound volume with the slider.

private static const OPTIONSIN_SOUND:int      = 1;
private static const OPTIONSOUT_SOUND:int     = 2;
private static const OPTIONSELECTED_SOUND:int = 3;

private var soundVolume:Number = 0.7;

[Embed(source="Sounds/OptionsIn.mp3")] private var optionsInSnd:Class;
[Embed(source="Sounds/OptionsOut.mp3")] private var optionsOutSnd:Class;
[Embed(source="Sounds/OptionSelected.mp3")] private var optionSelectedSnd:Class;

private function PlaySound(type:int) : void
{
  var sfx:Sound = null;

  switch (type)
  {
  case OPTIONSIN_SOUND:
    sfx = new optionsInSnd() as Sound;
    break;
  case OPTIONSOUT_SOUND:
    sfx = new optionsOutSnd() as Sound;
    break;
  case OPTIONSELECTED_SOUND:
    sfx = new optionSelectedSnd() as Sound;
    break;   
  }

  if (sfx != null)
    sfx.play(0,0,new SoundTransform(soundVolume));
}

We have all we need to play the sound effects. Let's use PlaySound function in Activation.as and GameMenu.as files.

In Activation.as we will call PlaySound when mouse button is pressed. We did not handle mouse down event in Activation.as so far, that is why we have to create MouseDown_Activation function and call it from MouseDown function in SnakesAdventure.as if ACTIVATION state is active.

private function MouseDown_Activation(event:MouseEvent):void  
{ 
  if (activationState == ACTIVATION_WAIT)
    PlaySound(OPTIONSELECTED_SOUND);  
}

There is a lot more new code in GameMenu.as. ChangeState_GameMenu function is new here and it is called whenever game menu state changes. Before that, we changed the state by changing variable gameMenuState and setting gameMenuTime to zero. ChangeState_GameMenu function does the same, but before that it checks if GAMEOPTIONS_IN or GAMEOPTIONS_OUT is becoming active and plays suitable sound effect.

private function ChangeState_GameMenu(newState:int):void
{
  switch(newState)
  {
  case GAMEOPTIONS_IN: 
    PlaySound(OPTIONSIN_SOUND);  
    break;
  case GAMEOPTIONS_OUT:
    PlaySound(OPTIONSOUT_SOUND);  
    break;
  }

  gameMenuState = newState;
  gameMenuTime = 0;
}

PlaySound function call has also been put in MouseDown_GameMenu function, but sound effect is played only when player clicks inside game option area.

Simple animations

2010-01-19T10:03:00.000-08:00

Animation is the sequence of images that creates an illusion of movement. Single image, displayed on various positions, can also create an illusion of movement. We already used both techniques in chapter 8. Handling mouse events. If you remember, we are displaying two different images for background of selected and not selected option. We also set the location of selected background one pixel lower.

In this chapter we will implement three different algorithms that perform animations and use them in activation screen and game menu. Before we begin, I suggest you start the game below and see for yourself, how they work.

You should also download project files for this chapter, because complete content of source files will help you better understand how algorithms work.

Fade effect

Fade effect is transition between original image and fully black image (fade out) or vice versa (fade in). In current version of Snake's Adventure this effect is applied right after program starts and after New game option is selected.

Fade effect is implemented in function Apply_FadeEffect in file Effects.as, which has to be included in main project source file (SnakesAdventure.as) before function can be used.

private var fadeEffectBitmap:BitmapData = null;

private function Apply_FadeEffect(factor:Number):void
{                          
  if (fadeEffectBitmap == null)
  {   
    fadeEffectBitmap = new BitmapData(SCREEN_WIDTH,SCREEN_HEIGHT,true,0x00000000);
    fadeEffectBitmap.draw(new fadeEffectImg()); 
  }

  if (factor > 0.95)
    factor = 0.95;

  for (var i:int = 0; i < 20; i++)
    screenBuffer.copyPixels(fadeEffectBitmap,
                            new Rectangle(0, (int)(factor * 20)  * 24, SCREEN_WIDTH, 24),
                            new Point(0,i * 24)); } 

Apply_FadeEffect requires one numeric parameter, values can range between 0 and 1. This value defines how much blackness is applied to screen buffer. Levels of blackness are defined in the FadeEffect.png. This image is fully black, but transparency increases from top to bottom. Transparency at the top is 0.05 and at the bottom 1. There are twenty different levels of transparency in this image that increases by factor 0.05. Height of each area is 24 pixels (20 x 24 = 480).

Appropriate area of source image is calculated from value of factor parameter. This part of source image is copied into screen buffer twenty times (from top to bottom).

Splitting activation banner

When activation mode is active and mouse button is released, the banner at the bottom of the gamePanel splits in two. Left part starts to move in the left direction, right part in the right direction. They move at the constant speed until they disappear from the panel.

Before we focus on algorithm itself, let me explain some changes, that were made in Activation.as file.

private static const ACTIVATION_SHOW:int = 1;
private static const ACTIVATION_WAIT:int = 2;
private static const ACTIVATION_HIDE:int = 3;

private var activationState:int = ACTIVATION_SHOW;
private var activationTime:Number = 0;

We need another state automaton, that will be active while program is in ACTIVATION state. Variable activationState has the value of currently active sub-state, constants ACTIVATION_SHOW/WAIT/HIDE define all possible sub-states.

Variable activationTime will be used as the time counter (in seconds) of currently active sub-state.

Below you can see that implementation of Draw_Activation function has been completely changed:

private function Draw_Activation(ellapsedTime:Number):void
{   
  activationTime += ellapsedTime;

  Draw_TitleScreen();
  Draw_ActivationBanner();  

  switch (activationState)
  {
  case ACTIVATION_SHOW:    
    Apply_FadeEffect(1 - activationTime); 

    if (activationTime >= 1)
    {
      activationState = ACTIVATION_WAIT;
      activationTime = 0;
    }
    break;
  case ACTIVATION_WAIT:
    break;    
  case ACTIVATION_HIDE:    
    if (activationTime >= 1)
    {
      state = GAME_MENU;
      gameMenuState = GAMEOPTIONS_IN;
    } 
    break;  
  }    
}

First, value of activationTime is increased by time interval between previous and current frame. Next, title screen and activation banner are drawn and at the end code, specific for active sub-state, is executed.

ACTIVATION_SHOW state applies fade-in effect to screen buffer and lasts one second. After one second ACTIVATION_WAIT state becomes active and stays active until mouse button is released.

MouseUp_Activation function from previous chapter changed the value of global state variable to GAME menu. New version set the value of activationState variable to ACTIVATION_HIDE and resets activationTime counter to zero.

ACTIVATION_HIDE state is also active for only one seconds. In this time, split banner animation is displayed. After one second global state variable is set to GAME menu and gameMenuState variable is set to GAMEOPTIONS_IN. Variable gameMenuState and constant GAMEOPTIONS_IN were also introduced in this chapter and will be explained later.

Previous version of Draw_ActivationBanner function drew activation banner into screen buffer in one step. New version draws activation banner in two steps, first the left side of the image and then right side. If ACTIVATION_HIDE state is not active, banner looks the same as before. But inside one second, while state is active, value of variable xPos increases from 0 (at the beginning) to 300 (add the end). This value is subtracted from horizontal position of left part of the banner, and added to horizontal position of the right part.

Moving game options

In this version of Snake's Adventure, game options are not visible right after game menu state becomes active. Now they come from left side of the gamePanel and move in the right direction. When they reach the centre, movements stops and options become active. When new game option is selected, all three options move to the right until they disappear.

Implementation of this animation also not require any additional images and does not distinguish much from activation banner animation. But there has been some changes in the source code in file GameMenu.as, that has to be mentioned.

Another state automaton has been implemented here with the same purpose as state automaton implemented in Activation.as.

private static const TITLE_SHOW:int       = 1;
private static const GAMEOPTIONS_IN:int   = 2;
private static const GAMEOPTIONS_WAIT:int = 3;
private static const GAMEOPTIONS_OUT:int  = 4;
private static const TITLE_HIDE:int       = 5;

private var gameMenuState:int = TITLE_SHOW;
private var gameMenuTime:Number = 0;

Not a lot different, as you can see, but this time state automaton has five possible states.

While TITLE_SHOW state is active, fade-in effect is applied to screen buffer. After one second GAMEOPTIONS_IN state becomes active.

GAMEOPTIONS_IN state also lasts one seconds and within this seconds, game options move from the left side of gamePanel to the centre. When they reach the centre, GAMEOPTIONS_WAIT state becomes active.

While GAMEOPTIONS_WAIT state is active, program waits for mouse movement and mouse buttons events and behaves the same way as previous version of Snake's Adventure. Only this time, selection of new game option activates GAMEOPTIONS_OUT state.

GAMEOPTIONS_OUT state lasts one seconds and within this seconds, game options move from the centre of gamePanel to the right, until they completely disappear. Now TITLE_HIDE state becomes active and fade-out effect is applied for one second.

When the fade-out effect reaches the end and gamePanel becomes completely black, program should activate GAME state and new game would begin. Activation of GAME state is pointless at the moment, because we have not work on the game, yet. Instead TITLE_SHOW state becomes active, title screen becomes visible again and game options show up.

Embedding into web page

2010-01-18T10:00:00.000-08:00

There are many ways to distribute games made with Flex. You can create standalone executable, but most probably you wish to publish your game on your website or submit it to one or more game portals.

In theory, your game will behave the same when played as standalone or from inside another application (web browser). In practice, there are some minor differences. One important difference for game developers is focus management, which can cause some problems, if game supports keyboard controls. Snake's Adventure will support only mouse controls, but if you wish support keyboard controls in your game, you will have to take care of focus management.

As you can see in previous chapter, I embedded SnakesAdventure.swf for the first time. On the Internet you can find a lot of (different) examples, how to embed SWF files into web page. I am using following HTML tag on this pages:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="SnakesAdventure.swf" type="application/x-shockwave-flash" width="480" height="480"></embed>

There is one more thing you should be aware of, if you wish to submit your game on portals, web pages... Your game should not start right after it is loaded, embedded games usually have starting screen, where you have to click to start the game. This may seem unnecessary if there is only one game on the page, but it prevents chaos in case there are many games on the page.

In this chapter, we will implement activation mode, that will display the same title screen, that we use in the game menu, in the background. On the lower part of the frame will be the banner that says "Press mouse click to start the game". Activation mode will be active until mouse button is released.

First we have to check if game is running as embedded or not. In case it is, we will start the program in activation state otherwise game menu state will remain active. ExternalInterface class contains property available that tell us if program is embedded. Before we can use it, we have to add import statement at the top of SnakesAdventure.as:

import flash.external.ExternalInterface; 

Add new constant to other state constants:

private static const ACTIVATION:int       = 0;

Inside Init function we will check if game is embedded and in case it is, we will set state variable value to ACTIVATION. Otherwise state variable value will remain unchanged and program will display game menu at the beginning.

if (ExternalInterface.available)
  state = ACTIVATION;

We will put source code for ACTIVATION state into its own file: Activation.as. Create empty file with that name and copy following source code:

private function Draw_Activation(elapsedTime:Number):void
{    
  Draw_TitleScreen();
  Draw_ActivationBanner();    
}

private var activationBannerBitmap:BitmapData = null;

private function Draw_ActivationBanner():void
{
  if (activationBannerBitmap == null)
  {
    activationBannerBitmap = new BitmapData(SCREEN_WIDTH,36,true,0x00000000);
    activationBannerBitmap.draw(new activationBannerImg());
  }

  screenBuffer.copyPixels(activationBannerBitmap,
                          new Rectangle(0, 0, SCREEN_WIDTH , 36),
                          new Point(0,400));                        
}

private function MouseUp_Activation(event:MouseEvent):void  
{ 
  state = GAME_MENU;
}

Nothing new here, that we have not seen in previous chapters.

Draw_Activation function is called from Draw function in SnakesAdventure.as when ACTIVATION state is active. It first calls Draw_TitleScreen from GameMenu.as that draws title screen image. Then it displays activation banner by calling Draw_ActivationBanner implemented bellow. Code from Draw_ActivationBanner is similar to other functions that draw image into screen buffer. Size of my version of banner is 480x36 pixels, if you made your version, adjust the size in the Rectangle.

MouseUp_Activation will be called from MouseUp function implemented in SnakesAdventure.as when ACTIVATION state is active. When user releases mouse button, MouseUp_Activation will change active state of the program to GAME_MENU and consequently, game menu will show up. We don't have to check MouseDown/Moved events here.

Of course we must not forget to embed banner image into executable. Add this line to Images.as:

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

In SnakesAdventure.as we have to add another include stetement:

include "Activation.as";

We also have to add another case in switch statement of Draw function:

case ACTIVATION:
  Draw_Activation(elapsedTime);
  break;  

and MouseUp function:

case ACTIVATION:
  MouseUp_Activation(event);
  break;  

That's it. There is, of course, project package for this chapter available for download. If you build SnakesAdventure.swf on your computer and start it from Flash player, you will not see activation screen that is visible in the embedded version below.

Thinking ahead

2010-01-11T09:51:00.001-08:00

If you are reading this tutorial, you most probably wish to learn how to create games with Flex. The reason why we were working on the game menu so far, is because it is easier to learn the basics on simple things. Eventually, we will start development of the game itself, that is why we have to be prepared. We need to somehow separate game menu functionality from the functionality of the game. First we will implement state automaton and then break SnakesAdventure.as into three files.

State automaton

State automaton or state machine is a model composed of a number of states. At the moment our program has only one state, we will simply name it game menu. Let's pretend that we already implemented first stage of the game. When the player chooses new game option, new state becomes active. We will call this state game.

Why is this important? Let me give you an example. In previous chapter we implemented mouse handler which will be active in both states. In game menu, functions MouseDown/Up/Move control the behaviour of game options when mouse cursor is positioned over or away from label area. When the program will be in the game state, tasks of all three functions will be completely different. That is why we need to know the state of program at the moment the event occurs and execute the right code.

For state management we need only one variable, initialized with the value of the state at the start of the program. Each state will be defined with one constant value. Put the following definitions to other definitions in SnakesAdventure.as:

private static const GAME_MENU:int        = 1;
private static const GAME:int             = 2;

private var state:int = GAME_MENU;

Breaking the code

At the moment source code of the project is split in two files: Images.as and SnakesAdventure.as. Images.as contains only few definitions of embedded images. On the other hand, SnakesAdventure.as is growing with each chapter - my version already is almost 150 lines long. This should not be a problem for now, but in the future file size will grow with each new implemented feature and source code in the file will soon become a mess. From my experience, it is better to keep the source code clean from the beginning.

That is why we will now split content of SnakesAdventure.as into three files: SnakesAdventure.as, GameMenu.as and Game.as. I suggest you download my version of the project and briefly review all three files. I will try to explain what and why has been changed.

First I made two empty files: GameMenu.as and Game.as. Then I added include statements for both files into SnakesAdventure.as (line 7 and 8). From now on both files are included in compilation process.

I moved the code, specific to game menu from SnakesAdventure.as, into GameMenu.as:
- definitions of OPTION_ constants
- definition of variables pressedOption, titleScreenBitmap, gameOptionsBitmap and gameOptionBackgroundBitmap
- Draw_TitleScreen function
- Draw_GameOptions function

Then I moved the content of Draw function (SnakesAdventure.as) into new function Draw_GameMenu in GameMenu.as. I did the same with MouseDown/Up/Moved, new functions in GameMenu.as now have names MouseDown_GameMenu, MouseUp_GameMenu and MouseMoved_GameMenu.

We don't have any code as far as game is concerned, that is why file Game.as is very short. Only four functions with empty bodies are inside this file: Draw_Game, MouseDown_Game, MouseUp_Game, MouseMoved_Game. This functions will be executed when events occur while the program is in the game state. We will implement this functions in the following chapters, but for now they are here to better illustrate the situation.

SnakesAdventure.as from now on contains only variables and constants that are common to all three files or specific to code in this file. Init and UpdateFrame are the same as before, but Draw, MouseDown, MouseUp and MouseDown have been changed completely.

private function Draw(elapsedTime:Number):void
{
  switch (state)
  {
  case GAME_MENU:
    Draw_GameMenu(elapsedTime);
    break;
  case GAME:
    Draw_Game(elapsedTime);  
    break;   
  }
}

private function MouseDown(event:MouseEvent):void  
{ 
  switch (state)
  {
  case GAME_MENU:
    MouseDown_GameMenu(event);
    break;
  case GAME:
    MouseDown_Game(event);
    break;
  }
} 

private function MouseUp(event:MouseEvent):void  
{ 
  switch (state)
  {
  case GAME_MENU:
    MouseUp_GameMenu(event);
    break;
  case GAME:
    MouseUp_Game(event);
    break;
  }
}

private function MouseMoved(event:MouseEvent):void  
{
  switch (state)
  {
  case GAME_MENU:
    MouseMoved_GameMenu(event);
    break;
  case GAME:
    MouseMoved_Game(event);
    break;
  }
}

As you can see, all four functions looks very similar. They just check current state of the program and call appropriate function.

We have made some huge changes in the source code of the project and now we are set to implement new features. In spite of all this changes, program behaves exactly the same as it did before. You can verify this with embedded SWF below.

Handling mouse events

2010-01-10T10:59:00.001-08:00

In the previous chapter we focused mostly on drawing of game options, but in this chapter we will make some changes, so that game options will work like buttons.

To accomplish this, we have to instruct the application to let us know when mouse is moved or its buttons are pressed/released, and respond accordingly. This is called mouse event handling. Event handling plays important role in Flex development and if you would like to learn more about events and event handling, check this tutorial from Adobe Flex live Docs.

We will add three event handlers to gamePanel: mouseDown, mouseUp and mouseMove. Change mx:Canvas tag in SnakesAdventure.mxml like this:

<mx:Canvas id="gamePanel" x="0" y="0" width="100%" height="100%" mouseDown="MouseDown(event)" mouseUp="MouseUp(event)" mouseMove="MouseMoved(event)/>

Within a single line, we instruct the application to execute:
- MouseDown function when any mouse button is pressed
- MouseUp function when any mouse button is released
- MouseMoved function when mouse is moved

All three functions will be implemented in file SnakesAdventure.as, but first we will make some changes in the file that will make implementation of options behaviour a little bit easier. Add three new constants after SCREEN_WIDTH and SCREEN_HEIGHT constants:

private static const OPTION_NEW_GAME:int  = 0;
private static const OPTION_CONTINUE:int  = 1;
private static const OPTION_SETTINGS:int  = 2;

private var pressedOption:int = -1;

We assigned one constant value for each option in game menu. We also defined new variable pressedOption, where we will keep index of pressed option. At the beginning no option is pressed, that's why we assigned the variable value -1.

We will used three new constants in the block of code bellow, where we will simplify code that draws game options. Replace the code with existing code that draws game options (function Draw_GameOptions).

for (var i:int = OPTION_NEW_GAME; i <= OPTION_SETTINGS; i++)
{
  var srcY:int = pressedOption == i ? 160 : 80;

  if (i == OPTION_CONTINUE)
    srcY = 0;

  screenBuffer.copyPixels(gameOptionBackgroundBitmap,
                          new Rectangle(0, srcY, 340, 80),
                          new Point(70,235 + i * 70 + (pressedOption == i ? 1 : 0)));

  switch (i)
  {
  case OPTION_NEW_GAME:
    srcY = 0;
    break;
  case OPTION_CONTINUE:
    srcY = 100;
    break;
  case OPTION_SETTINGS:
    srcY = 150;
    break;
  }

  screenBuffer.copyPixels(gameOptionsBitmap,
                          new Rectangle(0, srcY, 260, 50),
                          new Point(110,250 + i * 70 + (pressedOption == i ? 1 : 0))); } 

In previous version we had six copies of copyPixel commands, three for background and three for labels. In this version we have just two, because we put the drawing code inside loop with three iterations, one for each option. In both commands we check if option is pressed and if it is, we draw background and label one pixel lower. We also use background image that is a little bit smaller and has white glow around.

Now we can finally handle mouse events. We will implement three functions:
- MouseDown will check if mouse click occurred inside any option and in case it was, set the index of option to pressedOption variable
- MouseUp resets the value of pressedOption
- MouseMoved, checks if mouse cursor left the area of pressed option and resets the value of pressedOption

private function MouseDown(event:MouseEvent):void  
{ 
  var mx:int = event.localX;
  var my:int = event.localY;

  for (var i:int = OPTION_NEW_GAME; i <= OPTION_SETTINGS; i++)
    if (i != OPTION_CONTINUE)
      if ((mx >= 110) && (mx < 370) && (my >= 250 + i * 70) && (my < 300 + i * 70))
        pressedOption = i;
}

private function MouseUp(event:MouseEvent):void
{
  var mx:int = event.localX;
  var my:int = event.localY;

  pressedOption = -1;
}

private function MouseMoved(event:MouseEvent):void
{
  var mx:int = event.localX;
  var my:int = event.localY;

  for (var i:int = OPTION_NEW_GAME; i <= OPTION_SETTINGS; i++)
    if (pressedOption == i)
      if ((mx < 110) || (mx > 370) || (my < 250 + i * 70) || (my > 300 + i * 70))
        pressedOption = -1; 
}

In each function we first set position of mouse cursor to local variables.

MouseDown loops through all options and in case it is not continue option (because it is currently disabled) checks if mouse cursor is inside area, where option label is drawn. In case it is, pressedOption variable gets the value of option index. Consequently, program will draw option with same index as pressedOption variable value differently. Different (slightly smaller) background image will be used for drawing and option will be located one pixel lower. While the user holds the mouse button, option will be pressed.

MouseUp is called when mouse button is released. Value of pressedOption is set to -1, even if it was already -1. But if it was not, consequently, program will draw option with default background and it will appear like option was released.

MouseMoved also resets value of pressedOption to -1, but only if mouse cursor left the pressed option area.

Complete project with source files and content files is available for download as usual.

Implementing game options

2009-11-20T06:13:00.000-08:00

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 SnakesAsventure.as) add the line after definition of gameOptionsBitmap variable:

private var gameOptionBackgroundBitmap:BitmapData = null;

- create: (file SnakesAsventure.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.

Displaying the title screen

2009-11-16T04:53:00.000-08:00

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.

Game initialization

2009-11-10T06:06:00.000-08:00

Init function, declared in SnakesAdventure.as (chapter 3) is executed right after application initialization phase is complete. Init function will perform all necessary steps, before game execution starts.

But first, lets define all external packages and classes that will be used inside this source file. All external classes that we use, even if they are part of Flex SDK, have to be imported before we can use them. With import we can define separate classes (flash.display.BitmapData) or complete package (flash.display.*). Put the following code at the beginning of SnakeAdventure.as:

import flash.display.*; 
import flash.events.*;
import mx.events.*;
import mx.controls.*;

Next we will define two constant values that will be used often inside this source code file. Insert following constant definitions after import statements.

private static const SCREEN_WIDTH:int          = 480;
private static const SCREEN_HEIGHT:int         = 480;

This two constants have the value of gamePanel width and height. Actual size of frame is defined in SnakeAdventure.mxml. If you plan to change frame size for your own version of the game, you should change frame width and height values in both files.

We also need one global variable, that will indicate if initialization phase is already completed. Lets name this variable initializationComplete and set its value to false:

private var initializationCompleted:Boolean = false;

Now we can focus on game inititialization itself.

Creation of global screen buffer

Screen buffer is BitmapData object that let us directly manipulate pixel data. We will draw all visible graphics into screen buffer first and then copy it on gamePanel. Screen buffer has exactly the same size as application frame (480x480 pixels).

First we need global variable, that will keep the reference to screen buffer, after we create it. Put the definition of variable after initializationComplete:

private var screenBuffer:BitmapData = null;

Insert this piece of code, that creates screen buffer, into Init function:

screenBuffer = new BitmapData(SCREEN_WIDTH, SCREEN_HEIGHT, false, 0x00000000);

initializationCompleted = true;  

BitmapData constructor has four parameters defined: width and height of bitmap, transparency is set to false and colour is set to black.

Value of variable initializationCompleted is set to true at the end of Init function, and indicates that application initialized has finished.

Implementation of UpdateFrame

Before we start drawing visible graphics on gamePanel, we need to know when is the application ready to display new frame. We also need to know how much time has passed since previous frame.

Event ENTER_FRAME, dispatched by application will tell us, when we can start drawing graphics on gamePanel. Replace existing UpdateFrame function definition in file SnakesAdventure.as with this block of code.

private var prevTime:Date = null;

private function UpdateFrame():void
{
  if (!initializationCompleted)
    return;

  var currTime:Date = new Date();
  var elapsedTime:Number = 0; 

  if (prevTime != null) 
    elapsedTime = (currTime.getTime() - prevTime.getTime()) / 1000.0;

  Draw(elapsedTime);

  gamePanel.graphics.clear();    
  gamePanel.graphics.beginBitmapFill(screenBuffer, null, false, false);
  gamePanel.graphics.drawRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  gamePanel.graphics.endFill(); 
}

private function Draw(ellapsedTime:Number):void
{

}

In the first line we defined global variable prevTime which will store the time when last UpdateFrame was executed.

In UpdateFrame function we first check if execution of Init function was completed successfuly. In case it was, we calculate time between previous and current frame. If time of previous frame is not set, we set elapsedTime variable to zero. Elapsed time between frames is measured in seconds.

Then we call Draw function which is defined after UpdateFrame function. Draw function does nothing at the moment.

At the end, content of screen buffer is copied on gamePanel.

Putting it all together

If you followed instructions and insert all the pieces of code on the right place, current version of SnakesAdventure.as should look like this:

import flash.display.*; 
import flash.events.*;
import mx.events.*;
import mx.controls.*;

private static const SCREEN_WIDTH:int          = 480;
private static const SCREEN_HEIGHT:int         = 480; 

private var initializationCompleted:Boolean = false;
private var screenBuffer:BitmapData = null;

public function Init():void 
{ 
  screenBuffer = new BitmapData(SCREEN_WIDTH, SCREEN_HEIGHT, false, 0x00000000);

  initializationCompleted = true;
}

private var prevTime:Date = null;

private function UpdateFrame():void
{
  if (!initializationCompleted)
    return;

  var currTime:Date = new Date();
  var elapsedTime:Number = 0; 

  if (prevTime != null) 
    elapsedTime = (currTime.getTime() - prevTime.getTime()) / 1000.0;

  Draw(elapsedTime);

  gamePanel.graphics.clear();    
  gamePanel.graphics.beginBitmapFill(screenBuffer, null, false, false);
  gamePanel.graphics.drawRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  gamePanel.graphics.endFill(); 
}

private function Draw(elapsedTime:Number):void
{

}

Of course you can also download complete project for this chapter.

If you recompile and execute SWF file, you can see that nothing has changed. The difference is, that this time black background is consequence of screen buffer that is painted on the gamePanel. In previous chapter, it was backgroundColor attribute of Application object, that set background colour to black. If you change backgroundColor attribute to red, you will still see black background.

Compiling and running

2009-11-05T04:10:00.001-08:00

Compilation process creates object files from source code and builds them together with content files (sounds, images...) into executable SWF file. In chapter 2 - Setting up project environment you can find build scripts for Windows and Linux with instructions how to execute build process. If you didn't follow the tutorial, you can download package with all files made so far.

Compile

If you have all necessary files in project root directory (two source files and one build script), execute command make.bat on Windows or make on Linux. If all goes well, Flex compiler will report location and size of output file (SnakesAdventure.swf) after few seconds.

One advice for developers on Linux: when you make changes in source and content files and then try to recompile, compiler refuses and reports:

make: Nothing to be done for `all'

Compiler did not find any changes in source code (if you did not change SnakesAdventure.mxml) and assumes that existing SWF file is up-to-date. Execute make clean, to remove existing SWF file, before make.

Run

If you have SWF files associated with external application on your system, you can run SnakesAdventure.swf from file system browser. If not, you can run the SWF file with Flash player. Flash players for different systems can be found inside runtimes/player folders inside Flex SDK. Start Flash player, choose the Open option from File menu and select location of file SnakesAdventure.swf.

You can also run SnakesAdventure.swf from your Internet browser, just make sure it has required Flash plug-in installed. You can enter the location of SWF file in navigation bar or select it with File/Open File option.

When application starts, you will see an empty black frame. Black background colour was specified with backgroundColor attribute of mx:Application tag in SnakesAdventure.mxml. #000000 value represents black colour. If you would like to experiment with backgroundColor attribute, you can find more info about HTML colours here.

Now that we have project set up and we can compile and run the application, it is time to focus on development of game itself.

Creating the application

2009-11-02T05:14:00.000-08:00

We will use two programming languages to write our game: ActionScript and MXML. In fact, we will use only small portion of MXML to define application and canvas object. User interface, game logic, event handling... will all be written in ActionScript.

MXML

Flex developers use MXML language to define layout of user interface components and other non-visual aspects of an application. MXML is XML markup language, convenient for development of rich user interfaces. But games, usually, display user interface differently than desktop applications, that is why we will not code much in MXML. All we have to do is create one MXML file, that will define application tag and include main ActionScript source code file. OK, create empty file in text editor, copy code below and save file as SnakesAdventure.mxml in project root.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    name="SnakesAdventure"
    backgroundColor="#000000"
    horizontalAlign="center"
    creationComplete="Init();"
    enterFrame="UpdateFrame();"
    paddingLeft="0"
    paddingTop="0"
    paddingBottom="0"
    paddingRight="0"
    width="480" height="480">

  <mx:Script>
  <![CDATA[
    include "SnakesAdventure.as";
  ]]>
  </mx:Script>

  <mx:Canvas id="gamePanel" x="0" y="0" width="100%" height="100%"/>
</mx:Application>

MXML source code files always start with XML declaration (line 1). In the second line is starting tag of root element mx:Application. mx:Application element contains several attributes (lines 3-12): width and height attributes define size of the application frame in pixels (480x480), backgroundColor defines background colour of application frame. Attribute creationComplete defines which function will be called after application initialization is complete. Attribute enterFrame defines which function will be called when application is ready to draw new frame. We will implement both functions in ActionScript (SnakesAdventure.as).

In mx:Script element (lines 14-18) we gave instruction to Flex compiler that file SnakesAdventure.as contains relevant source code and should be included into compilation process.

mx:Canvas element (lines 18-20) creates panel with the name "gamePanel" inside application frame. Panel has exactly the same size as application frame and will display all visible graphics.

You can find a lot more information about Flex components on Adobe Flex live docs, for example Application class page contains list of all attributes you can define in mx:Application element.

If you try to execute build script again, compilation will fail and compiler will report the following error:

Unable to open included file: /home/user/myProjects/SnakesAdventure/SnakesAdventure.as

No worries, we will create missing SnakesAdventure.as file next.

ActionScript

With MXML you can easily define and position user interface controls, containers, services... of the application, but you cannot implement their custom behaviour. To implement custom behaviour, we have to use another programming language: ActionScript. There are many ways to mix MXML code with ActionScript, in SnakesAdventure.mxml we embedded ActionScript (include statement) inside mx:Script tag.

ActionScript is object-oriented procedural programming language, developed by Adobe. If you have prior experience with programming languages like Java, JavaScript, C#... you should become familiar with ActionScript in very short period of time.

Now, let's create missing SnakesAdventure.as file. Create empty file in text editor and copy code below. Save the file as SnakesAdventure.as inside project root.

public function Init():void 
{ 

}

private function UpdateFrame():void
{

}

If you remember, we set two function in mx:Application tag (file SnakesAdventure.mxml) that will handle creationComplete and enterFrame events. We have to define both functions, otherwise compiler reports an error. Currently they have empty bodies, but we will implement them in following chapters.

One more thing: if your text editor supports syntax highlighting, but ActionScript code is displayed as plain text anyway, I suggest you enable highlighting for JavaScript.

Setting up project environment

2009-10-26T07:48:00.000-07:00

In this chapter you will learn how to set up new project for the game development, without use of Flex Builder (creation of new project in Builder should be trivial).

Inside the folder, where you keep your other projects, create new folder and name it SnakesAdventure. For example, I keep my projects in c:\myProjects folder in Windows and /home/user/myProjects folder in Linux. SnakesAdventures folder is now the root folder of the project, later it will contain all scripts, images, sounds and source code files. If you would like to keep different file types in different folders, create folders Classes, Images and Sounds inside project folder.

Build script

Now we will create new script file, that compiles all source code files and builds all content files into single SWF file. Open text editor, create empty file, copy content of the script for your system and follow the instructions. If you are Windows user, I recommend you do not edit source code and scripts in Windows Notepad, use advanced text editor that supports syntax highlighting (Notepad2, UltraEdit...).

Build script for Windows

Enter correct path to compiler executable (mxmlc.exe) on your system and save file as Make.bat:

C:\PROGRA~1\Flex3\bin\mxmlc.exe SnakesAdventure.mxml

Build script for Linux

Enter correct path to compiler executable in MXMLC definition and save file as Makefile:

MXMLC = ~Flex/bin/mxmlc
MFLAGS = -benchmark

TARGETS = SnakesAdventure.swf

all: $(TARGETS)

clean:
$(RM) $(TARGETS)

.SUFFIXES:    .mxml .swf
.mxml.swf:

$(MXMLC) $(MFLAGS) $<

Execute the build script

On Windows: open Command Prompt, enter project root folder and start the script with command make.bat. On Linux: open terminal, enter project root folder and start the script with command make.

Script execution should fail, because source file SnakesAdventure.mxml is not available, yet. Flex compiler reports following message on my system (Windows):

Error: unable to open 'SnakesAdventure.mxml'

Use 'mxmlc -help' for information about using the command line.

Before we begin

2009-10-23T05:54:00.000-07:00

Adobe Flex is open source development kit for development of rich web applications based on the Adobe Flash platform. Adobe Flex is free and available for Windows, Linux and Mac OS. On the other hand, Adobe Flex Builder - development environment for Flex, cost almost 250$. Don't worry, if you cannot afford it, you will be able to execute and modify all code samples from this tutorial anyway, but I do believe Flex Builder makes developer's life much easier.

This tutorial will teach you how to create games with Flex step by step. Together we will create game called Snake's adventure - advanced version of classic Snake game. I will not lie to you, without any programming experience you will most likely have problems understanding the source code from this tutorial. You should at least have basic knowledge of one modern programming language.

If you do not have Flex SDK (software development kit) already installed on your computer, you can download it from here. There is no installation package for current version (3.4) of SDK, you will have to manually extract content of downloaded file on your disk. Flex SDK contains bunch of tools and lots of samples, take your time and explore the content of SDK.