2D C++ Game: Part 6 - Image Background Transparency, Game FPS, Events, Game Loop

// Allegro library
#include <allegro5/allegro.h>
#include <allegro5/allegro_image.h>

//Screen resolution
#define SCREEN_W 640
#define SCREEN_H 480

// Game fps
#define FPS 60

int main()
{
    al_init(); // Start Allegro
    ALLEGRO_DISPLAY *screen = NULL; // Main display
    ALLEGRO_EVENT_QUEUE *event_queue = NULL; // Event queue to maintain events
    ALLEGRO_TIMER *timer = NULL; // Timer to control game fps

    // Initializing screen, event queue and timer
    screen = al_create_display(SCREEN_W, SCREEN_H);
    event_queue = al_create_event_queue();
    timer = al_create_timer(1.0/FPS); // Timer set to tick at 60 frames per second

    // Register event sources to be handled in the event queue
    al_register_event_source(event_queue,al_get_display_event_source(screen));
    al_register_event_source(event_queue,al_get_timer_event_source(timer));

    al_init_image_addon(); // Initialize Allegro image addon
    al_start_timer(timer); // Start timer

    // ALLEGRO BITMAP 'image' to hold the image
    ALLEGRO_BITMAP *image = NULL;
    // Load bitmap
    image = al_load_bitmap("Pacman_Sprite.png");
    // Convert image background to transparent
    al_convert_mask_to_alpha(image,al_map_rgb(255, 0, 255));



    int x=0; // x coordinate of the image

    while(1) //Game Loop
    {
        ALLEGRO_EVENT event; // ALLEGRO_EVENT to hold events
        al_wait_for_event(event_queue,&event); // Wait for events to occur

        // Display handler
        // Draw if timer counter has incremented and there are no events to handle
        // and event queue is empty
        if(event.type == ALLEGRO_EVENT_TIMER && al_is_event_queue_empty(event_queue))
        {
            al_draw_bitmap(image, x, SCREEN_H/2, 0); // Draw image on the backbuffer
            al_flip_display(); // Display backbuffer on to the main screen
            al_clear_to_color(al_map_rgb(0, 0, 0)); // Clear display to black
        }

        //Event handlers
        if (event.type == ALLEGRO_EVENT_TIMER)
        {
            // Increment x coordinate of the image
            // When position of the image is more than the screen width, reset x coordinate to 0
            if(++x>=SCREEN_W)x=0;
        }else if(event.type==ALLEGRO_EVENT_DISPLAY_CLOSE)
        {
            break; // End game loop on closing display window
        }


    }// End of Game Loop

    al_destroy_display(screen); // Destroy display
    return 0;
}

Explanation:
▪ Image Background Transparency

    // ALLEGRO BITMAP 'image' to hold the image
    ALLEGRO_BITMAP *image = NULL;
    // Load bitmap
    image = al_load_bitmap("Pacman_Sprite.png");
    // Convert image background to transparent
    al_convert_mask_to_alpha(image,al_map_rgb(255, 0, 255));

Image background transparency is achieved with the Allegro routine al_convert_mask_to_alpha(ALLEGRO_BITMAP *bitmap, ALLEGRO_COLOR mask_color) which takes 2 parameters:

■ ALLEGRO_BITMAP structure which holds our image.
■ ALLEGRO_COLOR structure, in our case we gave al_map_rgb(255, 0, 255) which is the rgb value for magenta, which is the background color of our image.

▪ Game FPS

// Game fps
#define FPS 60
ALLEGRO_TIMER *timer = NULL; // Timer to control game fps
timer = al_create_timer(1.0/FPS); // Timer set to tick at 60 frames per second
al_register_event_source(event_queue,al_get_timer_event_source(timer));
al_start_timer(timer); // Start timer

2D C++ Game: Part 5 - Drawing Graphics From Image File

In this part, we will be displaying this image on the screen using allegro_image functions/routines.

house.png

Objective: Load and display image file.

#include <allegro5/allegro.h>
#include <allegro5/allegro_image.h>

#define SCREEN_W 640
#define SCREEN_H 480
int main()
{
    al_init();
    ALLEGRO_DISPLAY *screen = NULL;
    screen = al_create_display(SCREEN_W, SCREEN_H);

    al_init_image_addon();
    ALLEGRO_BITMAP *image= NULL;
    image = al_load_bitmap("house.png");
    al_draw_bitmap(image, SCREEN_W/2, SCREEN_H/2, 0);
    al_flip_display();

    al_rest(5.0);
    al_destroy_display(screen);
    return 0;
}

Explanation:
▪ al_init_image_addon();
Before we start, we need to initialize the image addon first before using any other image related funcitons or routines.

▪ ALLEGRO_BITMAP *image = NULL;
Then we create a pointer 'image' to ALLEGRO_BITMAP structure which will hold our image.

▪ image = al_load_bitmap("house.png");
Then we use al_load_bitmap(const char *filename) function to load the image from a specified path to our ALEGRO_BITMAP structure we created.

▪ al_draw_bitmap(image, SCREEN_W/2, SCREEN_H/2, 0);
Then we draw the image on to the back buffer using al_draw_bitmap(ALLEGRO_BITMAP *bitmap, float dx, float dy, int flags) routine which takes 3 parameters as follows:

■ ALLEGRO_BITMAP structure which holds our image.
■ X coordinate of the image to be drawn on the screen.
■ Y coordinate of the image to be drawn on the screen.
■ The flags parameter can be 0 or one of the following flags:

ALLEGRO_FLIP_HORIZONTAL - flip the bitmap about the y-axis.
ALLEGRO_FLIP_VERTICAL - flip the bitmap about the x-axis.

The picture below explains, how the image is displayed on the screen as per our specified parameters.

2D C++ Game: Part 4 - Draw Text Using Fonts

Inorder to use font functions in Allegro we need to include two more additional libraries i.e allegro_font.h and allegro_ttf.h along with allegro.h which is the core library. I have used arial.ttf font file for this program, you can use any other font file of your own choice. Make sure you copy the font file to the project directory or if it is in any other location, then input the proper path of the file while loading the font file in the program.

Objective: Display 'Hello World' on the screen using fonts.

#include <allegro5/allegro.h>
#include <allegro5/allegro_font.h>
#include <allegro5/allegro_ttf.h>

#define SCREEN_W 640
#define SCREEN_H 480
int main()
{
    al_init();
    ALLEGRO_DISPLAY *screen = NULL;
    screen = al_create_display(SCREEN_W, SCREEN_H);

    al_init_font_addon();
    al_init_ttf_addon();

    ALLEGRO_FONT *font = NULL;
    font=al_load_ttf_font("arial.ttf", 15, 0);
    al_draw_text(font, al_map_rgb(255,255,255), SCREEN_W/2, SCREEN_H/2, ALLEGRO_ALIGN_CENTRE, "Hello World");
    al_flip_display();

    al_rest(3.0);
    al_destroy_display(screen);
}

Explanation:
▪ al_init_font_addon();al_init_ttf_addon();
To use these font functions, we will need to initialize the font addon by using al_init_font_addon. Along with that we will need to initialize ttf addon as well because we will be using al_load_ttf_font() function later in the program which needs ttf addon.

▪ ALLEGRO_FONT *font;
We declare a ALLEGRO_FONT structure which will hold our font and intialize it to NULL.

▪ font=al_load_ttf_font("arial.ttf", 15, 0);
Then we need to load the font using al_load_ttf_font(char const *filename, int size, int flags) function which takes three parameters i.e font file path, size of the font to be displayed and flags which you can leave it to 0. This function returns ALLEGRO_FONT structure, which we will use to initialize our pointer we had declared.

▪ al_draw_text(font, al_map_rgb(255,255,255), SCREEN_W/2, SCREEN_H/2, ALLEGRO_ALIGN_CENTRE, "Hello World");
Then we will use al_draw_text(const ALLEGRO_FONT *font, ALLEGRO_COLOR color, float x, float y, int flags, char const *text) function to draw desired text on the back buffer using our specified font. This function takes 6 parameters as follows:

■ ALLEGRO_FONT structure which holds our font.
■ ALLEGRO_COLOR structure to specify the colour of the text, for which we will use al_map_rgb(r,g,b) as parameter.
■ X coordinate of the text to be drawn on the screen.
■ Y coordinate of the text to be drawn on the screen.
■ The flags parameter can be 0 or one of the following flags:

ALLEGRO_ALIGN_LEFT - Draw the text left-aligned (same as 0).
ALLEGRO_ALIGN_CENTRE - Draw the text centered around the given position.
ALLEGRO_ALIGN_RIGHT - Draw the text right-aligned to the given position.

■ Input the text to be drawn on the screen.

Output: