Simple Animation

We have learned enough about programming to try a simple animation. To do this, we need to set up a few simple variables, and do some simple logic. We will work through this example using a process I call Baby Steps!

What are baby steps?

When babies first try to walk, they take one simple step at a time, then make sure they are not going to fall over. In our world, we will take small steps toward a solution to some problem, and make sure our program does not crash! Believe me, this is the way to get things done faster!

Note

As odd as it seems, sometimes when you are in a hurry, the best thing to do is to slow down! Left unsaid in that is that you spend more time thinking, and guess what? You get to the solution faster. Of course, it might not be as much fun as blasting code - you get to pick how you spend your time! I think programming is more fun when things work. It is no fun chasing syntax errors, or bizarre error messages you do not understand.

Where do we start?

Well, let’s begin with the shortest DarkGDK program we can create. From your text, this is a place to begin:

#include "DarkGDK.h"

void DarkGDK() {
    dbPrint("Simple Animation");
    dbWaitKey();
}

Note

You get here by starting a new project, then stripping out all the demo code in the main.cpp file.

When we write programs using DarkGDK, we will be using a variety of functions provided with the library. At this point in our learning process, it is not important to understand how those functions are written, just what they do!. In this case, the operation of the two routines we have included should be pretty obvious. If not, run the code and see what happens. It is short enough that you should be able to find any errors pretty quickly!

Just for fun (you would never do this on purpose) let’s generate an error. Leave off the open curly bracket on the function and see what happens:

Lots of lines here! What you learn from this is to not pay attention to much of this poutput. The error is probably related to something in the first few lines. In this case, the system seems confused about dbPrint, so we look at that. Hmmm, nothing wrong there, so look nearby. Duh, missing open curly bracket! It might have been more obvious if the character had been on a line all by itself. You decide if you want to do this!

See, baby steps can help you fix something sooner rather than later!

Step 1: Basic code to say hello!

Fix the code and run it. This time, we get this:

Not very exciting, but it works! The window that opens up is 640 by 480 pixels in size. We can change this, but it is fine for now. Also the default background color for this screen in black. We might want to change that.

We need something to move! Let’s add that next:

Step 2: Adding a ball

We will keep the ball simple for now. It will be displayed a simple circle n some color. can we draw one?

Looking at the code examples in the book, we see a simple DarkGDK function to draw a circle. First, we need a few variables to control the size and position of the circle.

Add this code:

#include "DarkGDK.h"

void DarkGDK() {

    // initial Ball size and position
    int BallRadius = 20;
    int Xposition = 320;
    int Yposition = 240
    dbPrint("Simple Animation");

    // display circle
    dbCircle(BallRadius, Xposition, Yposition);

    dbWaitKey();
}

Let’s get that message out of the way, and put it in the title bar. To do this we change the dbPrint line to this:

dbSetWindowtitle("Simpla Animation");

Step 3: Drawing in color

To draw in color, we need a new kind of variable, one that can hold three components of the color - red, blue, and green. The variable that can hold this data is called a DWORD, and it is set by calling a DarkGDK function. Like this:

DWORD BallColor - dbRGB(255, 0, 0);  // red ball

Note

The values used to form the color are integers between 0 and 255 for each base color. The final result will be a mix of these values. The web has many places where you can find the numbers needed for your favorite colors!

We can change the background color from black to white by calling this function:

dbCLear(255,255,255);

What do you think we would do to set it to black?

Combining all this, we can change the ball to a red ball on a white background by doing this:

    // clear the screen, setting background to white
    dbClear(255, 255, 255);

// display circle
    dbInk(BallColor, background);
dbCircle(Xposition, Yposition, BallRadius);

This is what we get:

Still boring, but it looks better - rught?

Let’s get moving!

Here comes the fun part, we want this circle - er - ball to move. How do we do that?

Well, we need to talk about this a bit!

The graphics loop

Most games use an infinite loop to process everything that happens. The loop models the concept of time. Each pass through the loop is like one tick of a clock. In DarkGDK this master loop looks like this:

dbSyncOn();
dbSyncRate(60);
while(LoopGDK()) {
    // do stuff each pass
    dbSync()
}

At this point we do not need to understand all this (that will happen next week!). I will say that the logic here makes the loop happen exactly 60 times per second. We will use this fact to try to move our circle!

Figuring out where we want the ball displayed

We started out drawing the ball in the center of the screen. We gave it an initial position and it stuck right in that spot. Now, we are going to let it move! What this means is that it will have a new position each time we run through the loop. Hmmm, we need to set up a few more variables to control how far it moves each time through the loop. Does this sound like the speed of the ball?

Well actually, it is the speed, but we are not going to say that the ball is moving at some speed, we will say it a bit differently. We will say it is moving in the X direction at some rate, and simultaneously in the Y direction at a different speed. From your math courses, you should remember that the vector addition of these two speeds will give you the real speed and direction of the ball! So, we need two more variables - say deltaX and deltaY:

int deltaX = 10;
int deltaY = 5;

In DarkGDK (and many other systems, the origin of the screen coordinate system is located in the top left corner of the window, with X increasing to the right, and Y increasing toward the bottom!

Let’s move the ball drawing code inside the game loop, since we will be modifying the position of the ball each pass. For our first try, we will just use this:

// do stuff each pass
dbCLS(background);
dbCircle(Xposition, Yposition, BallRadius);

That new function erases all the drawing at the start of each pass through the loop. It sets the entire screen to the color specified by the variable we provides (white in this example).

Run this to make sure your image is still displayed correctly.

Adding position logic

All we need to do to make this ball move is to calculate a new position for both X and Y for the ball. Here is a simple piece of code to do this:

Xposition = xPosition + deltaX;
Yposition = yPosition + deltaY;
dbCircle(xPosition, Yposition, BallRadius);

Try this and see what happens. With any luck the ball will charge off across the screen!

Well, durn! Where did it go!

Houston, we have a problem!

As you see, the ball just fell off the planet! Actually, we sent it into the twilight-zone - off the screen. To keep it on the screen, we need to do something!

Detecting the edge of the screen

Where is the edge of the screen? We said initially that the screen defaults to 640 across by 480 down. So, it looks like the right edge of the screen is at an x=640. How do we know when the ball has hit the edge? Well, we are placing the center of the ball at some position, and the ball has a radius we also set. So, if the X position of the ball is equal to the left edge value minus the ball radius, the ball has “hit” the edge of the screen. Let’s make it stop there!

if(Xposition < (640 - Ball Radius) {
    XPosition = Xposition + deltaX
}

Wow! What happened that time? If your code worked correctly, the ball hit the wall and stuck while it slid down the right edge than fell off the bottom. Can we stop it from doing this as well? Sure!

if(Yposition < 480 - BallRadius) {
    Yposition = Yposition + deltaY;
}

Boy, do I hate those screen dimensions in there. If we change the size of the window, we need to recode this. We will see later that we can do this easily, for now, leave it as it is!

Run this and see what we have!

Now it ends up stuck in the lower right corner. Better, but this code cries for one more “feature”

Making the ball bounce

What does it mean to bounce?

Well, if you think about it, as the ball moves across the screen toward the right edge, it is moving at a rate of deltaX toward the right, and at a rate of deltaY toward the bottom. WHat wouild happen if it “bounced” on the right wall? Based on you own experiences, it would start moving away from the way, meaning the speed in the X direction would reverse. The speed in the Y direction would remain unchanged. It would still be moving toward the bottom. So, to make it “bounce” off the right wall, we need to flip the sign of the number we have used for the deltaX variable, since that is really our “speed” control!

if(Xposition >= 640 - BallRadius) {
    deltaX = -deltaX;
}
Xposition = Xposition + deltaX;

Note

Think about what will happen here. If the ball gets close to the wall, we will let it move by our speed toward the wall. It might move a small way “into” the wall, but on the next pass the position will be adjusted in the opposite direction away from the wall. Since we cannot figure out exactly when the ball hits the wall (it might be between ticks of the game clock) we just let this go. If the refresh rate is fast enough the poor hunam will never see the error!

Try this code!

What happens with this change? We seem to be making progress, but the ball bounced off the right side, then continued off the screen at the bottom.

Wrapping up

You should be able to figure out how to complete this animation so the ball stays on the screen. We will try to do that in the lab this week!

Normally, I might show the final code here, but doing so would encourage you to just cut and paste. I want you to create this code using the baby steps process and see if you do not get it running the right way!

Note

On my virtual machine, the ball did not hold a constant speed as it moved. This seems to be caused by other things going on in my system as the program ran. This would take some study to correct! You would not want a real game to do this!