To test the sample program, you can download the needed resources for this tutorial.

I'll start this tutorial by showing this small but complete working program that will demonstrate a 2-picture animation.

//demonstrating basic 2-picture animation
function main() {
  Var:Number imgShip, imgShip2;
  Var:Boolean next = false;
 
  Image:Load("myship.bmp", imgShip)
  Image:Load("myship2.bmp", imgShip2)
 
  Screen:Show()
 
  while (B1 == false) {
    Screen:CLS()
    if (next == false) {
      Image:TBlit(150, 200, imgShip, screen)
      next = true;
    } else {
      Image:TBlit(150, 200, imgShip2, screen)
      next = false;
    }
 
    Screen:Render()
  }
}

As long as you have “myship.bmp” and “myship2.bmp”, the sample code above should run without error.

What the program actually did, was to load two different external picture and display it one at a time.

Var:Number imgShip, imgShip2;

This means, the program required two different Number variables which will be the image buffers for each external picture.

To know which picture to display, the program required a Boolean variable. This variable will remember if it needs to show the first or the second picture.

Var:Boolean next = false;

We declared a Boolean variable to be named, next. You will learn later how we utilized a single Boolean variable to do the job.

 Image:Load("myship.bmp", imgShip)
  Image:Load("myship2.bmp", imgShip2)

Before anything else, let's not forget to load the two different external pictures.

Screen:Show()

Then, maybe, it's time to have our viewing screen. (We could actually show the viewing screen earlier, if we want to)

while (B1 == false) { /* scope... */ }

Also, let's not forget that when we do a game programming, it is a must to place the main logic of the program inside a scope of a looping. In game programming, we call that as the main loop. This is the major difference when we do an ordinary DOS, or database programming – we do not have main loop in those; game programming does.

Screen:CLS()

Above is a command that is always used when we do an animation. We need to make sure that we remove whatever was drawn into our viewing screen in order for us to display another picture. We use the command Screen:CLS().

But please note, that in some advance programming where we, as programmers, focus on the optimization to achieve maximum speed (or frames-per-second), sometimes clearing the screen is not used. For simplicity's sake, let's use it in this tutorial.

  //the REAL code
    if (next == false) {
      Image:TBlit(150, 200, imgShip, screen)
      next = true;
    } else {
      Image:TBlit(150, 200, imgShip2, screen)
      next = false;
    }

The code above is hard to explain. It is very well suggested to run the program to understand what I mean as I try hard to explain.

I'll just try to translate the following codes in a lay-man's word.

  //the PSEUDO(FAKE) code
    question 1: should the first picture be displayed? {
      first picture is being displayed
      answer "NO" if asked with q1 again
    } question 2: show the second picture? {
      second picture is being displayed
      answer "YES" if asked with q1 again (not q2)
    }

There. Try to compare the “real” code and the “pseudo” code.

Since the “real/pseudo” code is placed inside a scope of a looping command, while, the question “should the first picture be displayed?” is then repeatedly asked and thus repeatedly answered.

The real command, “if (next == false)”, is the question, “should the first picture be displayed?”.

Screen:Render()

Of course, whichever is picked to be displayed, we still need the Screen:Render() command to display it in our viewing screen.

The algorithm above is optimized only for a 2-picture animation. If you want to display a 3- picture animation, Read Animating Three (or more) Pictures.

The most important thing that you should remember is to make an image buffer for each picture you want to load.

Also, if “screen” image buffer and “Screen” class confuses you, declare a Number variable to be named buffer which will be pointing to screen then do the Blit-ting and TBlit-ting on the buffer instead of screen.

//Make a buffer pointing to screen
Var:Number buffer = screen;
 
//Blit or TBlit to buffer
Image:Blit(50, 50, any_image, buffer)
 
//Display the buffer to the viewing screen
Screen:Render()

• 2-Picture Animation - zip file of all the source codes demonstrated in this tutorial.