Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
8. November 2017

In the first tutorial we looked at creating our initial application, while in the second tutorial we looked at events and a cleaner game loop.  Today we get to the fun stuff… drawing bitmaps to the screen.  If you are from another game engine, the term bitmap in Allegro might be a bit misleading as it generally represents an image on disk.  In Allegro terms a bitmap is much more, basically its an all in one term for images that can be load and displayed on screen, taking the role often reserved for sprites in other game libraries.  Let’s just jump into the example:

#include "stdafx.h"
#include <allegro5\allegro.h>
#include <allegro5\allegro_image.h>

int main()

	display = al_create_display(640, 480);
	queue = al_create_event_queue();

	al_register_event_source(queue, al_get_keyboard_event_source());
	al_register_event_source(queue, al_get_display_event_source(display));

	bitmap = al_load_bitmap("image.jpg");
	assert(bitmap != NULL);

	bool running = true;
	float x = 0;

	int width = al_get_display_width(display);
	while (running) {
		al_clear_to_color(al_map_rgba_f(1, 1, 1, 1));
		al_draw_bitmap(bitmap, x += 0.01, 0, 0);

		if (x > width) x = -al_get_bitmap_width(bitmap);


		if (!al_is_event_queue_empty(queue)) {
			al_wait_for_event(queue, &event);
			if (event.type == ALLEGRO_EVENT_KEY_UP || event.type == ALLEGRO_EVENT_DISPLAY_CLOSE)
				running = false;


	return 0;

Most of the code has already been explained in the previous tutorials, so lets jump right into the new code.  You will notice we are using another add-on in this example, the image add on.  This is the module that enables us to load images from file and needs to be enabled in the same way we enabled the font and ttf add-ons earlier.


As always there is an init function al_init_image_addon() that needs to be called before any image code can be called.  One initialized we can load a bitmap from disk calling al_load_bitmap() passing in the name of the image file.  Be sure to place this file in debug directory, just like we did earlier with the font file.  The next critical call is the function al_draw_bitmap() which is used to draw our bitmap to the backbuffer at the given coordinates.  In this simple example we are simply incrementing the X coordinate every pass through the game loop.  We then check that the bitmap hasnt moved off screen, if it is, we move it back to the beginning, minus the width of our image and start the process again.  This will cause the image to smoothly scroll back on screen. 

Here is our application in action:


There are a few things that are important to note.  First off, notice the call to al_destroy_bitmap(), this is important to call when you are done with your bitmap or resources will leak.  Next notice how drawing coordinates work.  When drawing, the origin (0,0) is the top left corner of the window as well as the top left corner of the bitmap.

It’s also important to realize in addition to al_draw_bitmap() there are several other draw functions available such as al_draw_rotated_bitmap(), al_draw_scaled_bitmap() etc.

Back to Table Of Contents


blog comments powered by Disqus

See More Tutorials on!

Month List

Popular Comments