Basic Tutorials

Basic Game Tutorial #4 - Controlling a sprite

Introduction

This tutorial will demonstrate how to move a loaded image around a screen. This tutorial uses the keyboard for the input but future tutorials will explain how to use the joystick.

Compile and run tutorial04. You can control the ship by using the arrow keys (not the ones on the numeric pad). The ship is constrained to the bounds of the window.

An in-depth look

A new structure has been added to structs.h. The Entity structure allows us to store the coordinates of the ship as well as a pointer to its image. We also add another structure Control which we will use to store the inputs for our directions.

In main.c we call loadAllSprites to load up all of the sprites that we will use in the program and then initialise the player by calling initPlayer, which sets the player's sprite and also centers the player to the middle of the screen. We then enter the main loop and call getInput to collect the input keys that are pressed followed by doPlayer which handles the player's movement on the screen. draw simply draws the player's sprite to the screen. Finally, to allow smooth movement of the sprite on the screen, we limit the number of frames per second to 60. At the start of the main function, we create an unsigned int called frameLimit

unsigned int frameLimit = SDL_GetTicks() + 16;

frameLimit = SDL_GetTicks() + 16;

In input.c add code to read the up, down, left and right arrow keys on the keyboard. We detect that the up arrow on the keyboard has been pressed with the following code:

case SDLK_UP:
    input.up = 1;
break;

case SDLK_UP:
    input.up = 0;
break;

player.c contains three functions, initPlayer, doPlayer and drawPlayer. We have already covered what initPlayer does, so we will look at drawPlayer. We take the values set in our control structure and test them one at a time.

if (input.up == 1)
{
    player.y -= 3;

    /* Don't allow the player to move off the screen */

    if (player.y < 0)
    {
        player.y = 0;
    }
}

if (input.down == 1)
{
    player.y += 3;

    /* Don't allow the player to move off the screen */

    if (player.y + player.sprite->h >= SCREEN_HEIGHT)
    {
        player.y = SCREEN_HEIGHT - (player.sprite->h + 1);
    }
}

After all of this, the drawPlayer function simply calls the drawImage function, that we have used in previous tutorials, to draw the player's sprite to the screen.

Finally, we will look at the drawing. draw.c contains two functions. The draw function blanks the screen, draws the player and swaps the buffers. We also sleep briefly to return some time back to the CPU. The second function, delay, limits the program's speed to 60 frames per second. Firstly, we pass in the desired tick time, which is how many ticks need to have passed before we can continue. We then get the current ticks:

unsigned int ticks = SDL_GetTicks();

if (frameLimit < ticks)
{
    return;
}

if (frameLimit > ticks + 16)
{
    SDL_Delay(16);
}

else
{
    SDL_Delay(frameLimit - ticks);
}

Conclusion

As you can see, controlling basic movement is quite straight forward. In the next tutorial, we will look at firing a bullet and how to control reload times.

Downloads

Source Code