Simple animations

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.