Animating Sprites

In the lab last week, we managed to get a circle moving around on the screen. Circles are fine, but a little boring. We want to animate something a bit more interesting.

Sprites

When games were first invented the state of computer graphics was pretty primitive. Hardware designers worked pretty hard to come up with a way to move a block of pixels around on the screen, and eventually, this technology led to the ability to move image files around. What kind of image files? Well space ships, bombs, asteroids, simple stick figures or cartoon characters.

Games suddenly became more interesting and fun! The moving image became known as a sprite. Today, sprites animations is pretty lame, but we cannot jump all the way to shoot-em-up space alien games in one leap, so let’s play with sprites.

A simple sprite

We will start off with a simple sprite. Since I want to recreate a program I constructed several years ago, I am going hunting for a sprite that looks like the earth!

Here is one:

This came from a bit of searching on Google.

To add this image to the display and manipulate it, we need to create an internal memory area that can hold the image and give us a way to refer to it. In DarkGDK we use a function to load the image, and give it a number we will use to refer to the image. DarkGDK manages a gadget called a sprite differently from simple images. For one thing, sprites are designed to move. Images usually stay still. We will use an image as a sprite in this example.

dbLoadImage("Earth.png", 1);

Note

This is one of many void functions we have seen in DarkGDK. We do not expect anything back from the function, but we may have a problem if we try to run the program and it cannot find the image file you specified!

It would be handy to get the dimensions of the image, since most images are rectangular. We can ask DarkGDK about this as follows:

int eWidth = dbGetImageWidth(1);
int eHeight = dbGetImageHeight(1);
EARTH_RADIUS = eHeight/2;

Here I am guessing the radius, It will be off a bit!

We can use this code to modify our simple animation example. In creating this code, I used a few of my own functions and some reference parameters to make the code a bit easier to follow.

A Sample Game

Here is a game you can try - the object is to stop the silly earth - er - ball!

Can you figure out why it moves the way it does?

#include "DarkGDK.h"

void KeyMover(int &dx, int &dy);
void TableMover(int &x, int &y, int &dx, int &dy, int radius);

const int SCREEN_WIDTH = 640;
const int SCREEN_HEIGHT = 480;
int EARTH_RADIUS;

void DarkGDK ( void ) {
    int BallRadius = 62;
    int Xposition = 320;
    int Yposition = 240;
    int deltaX = 5;
    int deltaY = 2;
    const int EARTH_SPRITE = 1;
    const int EARTH_IMAGE = 1;

    DWORD BallColor = dbRGB(255,0,0);
    DWORD background = dbRGB(255,255,255);

    dbSetWindowTitle("Simple Animation");

    dbSetImageColorKey(255,255,255);        // white is transparent
    dbLoadImage("Earth.png", 1);            // load the image file
    int eWidth = dbGetImageWidth(1);
    int eHeight = dbGetImageHeight(1);
    EARTH_RADIUS = eHeight/2;

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

    // adjust position to center of screen
    Xposition = Xposition - eWidth/2;
    Yposition = Yposition - eHeight/2;

    // animation loop
    dbSyncRate(60);
    while (LoopGDK()) {
            dbCLS(background);

            dbSprite(EARTH_SPRITE,Xposition, Yposition,EARTH_IMAGE);
            KeyMover(deltaX, deltaY);
            TableMover(Xposition, Yposition,deltaX,deltaY,EARTH_RADIUS);
            dbSync();
    }

    dbWaitKey();
}

void KeyMover(int &dx, int &dy) {
    if (dbUpKey()) dy--;
    if (dbDownKey()) dy++;
    if (dbLeftKey()) dx--;
    if (dbRightKey()) dx++;
}

void TableMover(int &x, int &y, int &dx, int &dy, int radius){
    x = x + dx;
    y = y + dy;
    if ((x>=SCREEN_WIDTH-2 * EARTH_RADIUS)||(x<=0)) dx = -dx;
    if ((y>=SCREEN_HEIGHT-2 * EARTH_RADIUS)||(y<=0)) dy = -dy;
}