7. Basic Animation and Timers

h

Basic Animation and Timers

Prior to actually getting into the animation code, let’s take a quick look at timers.

Timers

To create a timer which has a time value of zero, simply type: “Timer name_of_timer;“
Example:

• Timer animation_timer;
• Timer stopwatch;

The basic functions of timers are as follow:

• timer.start(); //Makes the timer starting ticking.
  
• timer.stop(); //Stops the timer from ticking.
• timer.reset(); //Resets the time value of the timer to zero regardless if it is running or not.

To get the number of milliseconds on the timer, use the member function: “timer.get_time();“
Example:

• int milliseconds = timer.get_time();
• win << Message(Point(5, 5), timer.get_time());
• if(timer.get_time() > 1000)

To add time to the timer use the “timer.add_time(double milliseconds);“ member function.
Example:

• timer.add_time(20000);
• timer.add_time(penalty_time);

To check if the time has passed some number of milliseconds use: “bool timer.has_passed(double milliseconds);“
Example:

• if(timer.has_passed(15000));
• bool passed = timer.has_passed(10500);

Wait for

You can also use the “wait_for(double milliseconds)“ function which makes the program wait for the passed in number of milliseconds.
Example:

• wait_for(10000); //The program will wait here for 10 seconds.
• wait_for(delay_time); //The program will wait here for delay_time milliseconds.

Remember, there are 1000 milliseconds in 1 second.

Animation

To better understand animation, here is a general definition: Seeing a series of rapid pictures that gives the illusion of movement.

Frames

We are going to call these individual pictures that create this illusion of movement frames. So for example here are a series of four frames:

Now if we show each of these frames one after another with a small pause in between, we will see what looks like a ball moving. This illusion is the basis behind animation!

Now that we hopefully have a better understanding of how animation works, we can put it to use with the Instinct Graphics Package.

Coding Animation

Well we could code the above example by simply drawing a ball, moving it and redrawing it.  If we did that four times in our code with a wait_for(100); in between each of those to cause a slight pause, we could reproduce the moving blue ball easily.
Example:

Circle circ = Circle(Point(1, 5), 1, BLUE, true);

//Frame 1
win << circ;
win.output_buffer();

//Frame 2
wait_for(100);
circ.move(1, 0);
win.clear_buffer();
win << circ;
win.output_buffer();

//Frame 3
wait_for(100);
circ.move(1, 0);
win.clear_buffer();
win << circ;
win.output_buffer();

//Frame 4
wait_for(100);
circ.move(1, 0);
win.clear_buffer();
win << circ;
win.output_buffer();

As you can see above, the frames 2-4 become very much the same. If we wanted more frames we would have to continue copying and pasting the same code for each frame.

Using loops

However, if we use a loop that moves everything and redraws it each time, we could have as many frames as we want without having to continuously add code for each frame.
Example:

win << circ;
win.output_buffer();

while(true)
{
    wait_for(100);
    circ.move(1, 0);
    win.clear_buffer();
    win << circ;
    win.output_buffer();
}

With the while(true), the program will continuously run that loop until we close the program.  So now the loop will continously do frame after frame of moving the ball and redrawing it.

Frame Rate

As you can see above, we were using a value of 100 as the number of milliseconds to wait in between each frame.  This in practice is not a nice number to use since that only allows us to have around 10 frames per second (FPS), which is not a good number.  Generally speaking, a good frame rate for animated programs is usually in between 60 and 30 frames per second.  Because of that, I would suggest using a wait_for amount of 20 milliseconds, which in turn creates a frame rate of around 50 FPS.

• wait_for(20);

Just keep in mind that this wait_for(20); by itself is not the best way to do timing for animation, but it is the simplest.  Later we will go over better and more advanced forms of doing timing for animation loops.

Sectioning the Animation Loop

The last bit of advice I would suggest is to always split up the animation loop into two sections to make sure it is done right:

while(true)
{
    wait_for(20);

    ///////////////////
    // Handle Logic
    ///////////////////
    circ.move(1, 0);

    ///////////////////
    // Draw Everything
    ///////////////////
    win.clear_buffer();
    win << circ;
    win.output_buffer();
}

There should be two distinct sections, the section that handles all the logic of the animation (moving objects, doing collision detection, changing colors of objects, etc), and a section that simply draws everything that needs to be drawn.  So what does this mean?  There should be NO drawing of objects in the Handle Logic section, and only code that deals with the drawing of objects in the Draw Everything section.  If you code is sectioned properly and done correctly, your animation should come out nice and smooth and work perfectly with no flickering.

What Now?

Now the rest is up to you in terms of what you want to do in this animation loop.  You don’t have to have a ball that moves around solely in the X direction.  This was merely an example. You can use Rects, Circles, Images, etc. to make anything you can think of.