Timing your transitions correctly

One thing I see first time developers fight with, is how to time the transitions. So I thought I would publish an article about it. Here is my attempt to write it. :)

aquasoft-separator.png

Normally they begin with something like this: (this is the way I did, back when coding on MSX and ZX Spectrum computers)

// Transition length is 1 second
// So let's draw 10 frames per second...
int frame;
for (frame=0; frame<10; frame++) {
DrawFrame ( frame, 10 );
Sleep (100); // 10 times 100 equals 1000 milliseconds, or one second
}

Then, they find the animations looks crispy. So they put 20 frames, and Sleep (50);, only to find old computers can't keep up with 20 frames per second and the transition lengths for 2 or 3 seconds there.

The right way to do it is finding a way independent of the number of frames to render. There is an API function in Windows, called GetTickCount, which is of much help here:

http://msdn.microsoft.com/en-us/library/ms724408(VS.85).aspx

Documentation says: "Retrieves the number of milliseconds that have elapsed since the system was started, (...)".

So, there you have it. Now you can do this:

int transition_length = 1000; // 1000 milliseconds, or 1 second
int start_time = GetTickCount;
do {
int transition_time = GetTickCount - start_time;
if (transition_time > transition_length) {
transition_time = transition_length;
}
DrawFrame ( transition_time, transition_length );
Sleep (1); // Don't hog the CPU!!!!
} while (transition_time < transition_length);

Ok. Let's see:

First we take time before transition, for reference. Let's suppose you have to measure someone's else time to run 100 meters, but you don't have a chronometer. What do you do? You look at your watch, memorize the time, then let him run and take a look at your watch again, then subtract both.

The same is being done here. start_time is the time when the transition started (quite trivial, sorry, just making sure things are clear).

Then transition_time is the time elapsed since the transition started.

As you can see, the code is now frame-rate independent. It will render as much frames as the CPU can keep up, and it will always last 1 second, in any computer. ;)

#522363

great article! I really enjoy your explanations; if the mood strikes, definitely do more :)

#522382