Basic Tutorials

Basic Game Tutorial #7 - SDL_TTF

Introduction

In this tutorial, we will look at SDL_TTF and how we can use it to display text on the screen.

Compile and run tutorial07. You can control the ship by using the arrow keys (not the ones on the numeric pad). Pressing the space key will fire a bullet, which will move to the right from the ship's current position. If the bullet hits one of the UFOs then both it and the UFO will be removed. The bullet will also be removed if it goes past the right edge of the screen. Whenever you destroy a UFO, your score will increase by 100.

An in-depth look

A lot of the code has remained the same, so we will go through the files that have changed starting with defs.h

SDL_TTF requires the SDL_TTF.h include, so we add it here

#include "SDL/SDL_ttf.h"

We have added a new structure called game to store the score, screen and font:

typedef struct Game
{
    int score;
    SDL_Surface *screen;
    TTF_Font *font;
} Game;

Like SDL_Mixer, SDL_TTF must be initialised and closed after we have used it. We perform both these calls in init.c. In our init function we initialise SDL_TTF:

if (TTF_Init() < 0)
{
    printf("Couldn't initialize SDL TTF: %s\n", SDL_GetError());

    exit(1);
}

/* Close the font */

closeFont(game.font);

/* Close SDL_TTF */

TTF_Quit();

font.c contains 3 functions which we will look at one at a time.

TTF_Font *loadFont(char *name, int size)
{
    /* Use SDL_TTF to load the font at the specified size */

    TTF_Font *font = TTF_OpenFont(name, size);

    if (font == NULL)
    {
        printf("Failed to open Font %s: %s\n", name, TTF_GetError());

        exit(1);
    }

    return font;
}

void closeFont(TTF_Font *font)
{
    /* Close the font once we're done with it */

    if (font != NULL)
    {
        TTF_CloseFont(font);
    }
}

void drawString(char *text, int x, int y, TTF_Font *font, int centerX, int centerY)
{
    SDL_Rect dest;
    SDL_Surface *surface;
    SDL_Color foregroundColor, backgroundColor;

    /* White text on a black background */

    foregroundColor.r = 255;
    foregroundColor.g = 255;
    foregroundColor.b = 255;

    backgroundColor.r = 0;
    backgroundColor.g = 0;
    backgroundColor.b = 0;

    /* Use SDL_TTF to generate a string image, this returns an SDL_Surface */

    surface = TTF_RenderUTF8_Shaded(font, text, foregroundColor, backgroundColor);

    if (surface == NULL)
    {
        printf("Couldn't create String %s: %s\n", text, SDL_GetError());

        return;
    }

    /* Blit the entire surface to the screen */

    dest.x = (centerX == 1 ? (game.screen->w - surface->w) / 2 : x);
    dest.y = (centerY == 1 ? (game.screen->h - surface->h) / 2 : y);
    dest.w = surface->w;
    dest.h = surface->h;

    SDL_BlitSurface(surface, NULL, game.screen, &dest);

    /* Free the generated string image */

    SDL_FreeSurface(surface);
}

In main.c, we call the loadFont function.

We have also added made a slight change to collisions.c:

if (collision(entity[i].x, entity[i].y, entity[i].sprite->w, entity[i].sprite->h,
entity[j].x, entity[j].y, entity[j].sprite->w, entity[j].sprite->h) == 1)
{
    /* If a collision occured, remove both Entities */

    entity[j].active = 0;

    entity[i].active = 0;

    /* Add 100 points to the score */

    game.score += 100;
}

To generate the score text, we need to create a String from our score. We can do this easily using the C function sprintf.

char text[20];

/* Blank the screen */

SDL_FillRect(game.screen, NULL, 0);

/* Draw the score */

sprintf(text, "SCORE: %05d", game.score);

drawString(text, 100, 10, game.font, 1, 0);

Conclusion

SDL_TTF has many ways of rendering text, ranging from quick and dirty to slow and beautiful. You can view the API by clicking on this link.

In the next tutorial we will look at one way of doing animation in SDL.

Downloads

Source Code