4 Drawing Graphics



Table of Contents

  1. Introduction
  2. Initializing Allegro
  3. Keyboard Input
  4. Drawing Graphics
  5. Playing Sound
  6. Drawing Text
  7. Regulating FPS
  8. Enumerations and Random Numbers
  9. Bounding Box Collision Detection
  10. Planning the Game
  11. Super Basic Game Structure
  12. Wrapping up


Download entire guide as ODT


Part 4 – Drawing Graphics

Now to actually display graphics!

The main types of graphics you’ll have to deal with are animated (character sprites), and similarly still images but are in a tile-strip/sprite-sheet format like animated sprites (grid-based tiles for a map), and then a still picture, where you would output the entire image without having to crop any part of it (title screen).

Animated character sprite

Animated character sprite

World tileset

World tileset

Title screen / full image

Title screen / full image

One thing Allegro does for you is that it automatically makes that pink color ( R 255, G 0, B 255 or #FF00FF ) invisible. With SDL you’ll have to define what color on your own.

What is ”blitting”?

Refers to two bitmaps being combined, such as drawing all the on-screen game images to a buffer, and then drawing that to the screen.

Sprite dimension standards

Sprites should always have a power-of-two dimension. Allegro can load sprites at irregular sizes, but only because Allegro does work for you to resize the image file. Computer hardware reads image files at 2^x dimensions.

This might create unwanted extra space on your sprite, but you can make up for it in the code by specifying what region will be “solid” for collisions.

Allegro Code

Allegro does have a draw_bitmap function, but I would shy away from using it, as you will almost always want to use masked_blit instead. draw_bitmap doesn’t allow you to crop a portion of the image, and will display the entire thing at the coordinates you specify.

Creating the bitmap

In Allegro, images are BITMAPs. Without installing extra libraries, you can only use bitmap (.bmp) files in your game. Here is how you create a BITMAP object:

BITMAP *image;

Loading in the image

For most images, you will load in a file from outside…For most images, you will load in a file from outside…

image = load_bitmap( “gfx\filename.bmp”, NULL );

The NULL parameter is the palette, but you can keep it as NULL unless you’re using a specific one.

But sometimes (like for the buffer) you will want to create one…

buffer = create_bitmap( 640, 480 );

Drawing the image

The code for drawing the image is as follows:

masked_blit( image, buffer, spritesheet_x, spritesheet_y, location_x, location_y, width, height );

Drawing the buffer to the screen

blit( buffer, screen, 0, 0, 0, 0, screenWidth, screenHeight ); 
clear_bitmap( buffer );

Blit’s parameters are:
blit(source_bmp, dest_bmp, xsrc, ysrc, xdest, ydest, width, height)
(taken from Allegro Quick Reference)
If you don’t use clear_bitmap afterwards, you will get an “etch-a-sketch” effect because it will be drawing on the same image each time, never erasing the previous one.

Destroying the bitmap

Always remember to do this or you will have memory leaks and your computer will slow down over time!

destroy_bitmap( image );

Animating your sprites

You probably want to have at least your character animate in the game. To do this, you should keep a float that stores the current frame. Each time the player moves, increment this by some small amount, like 0.5. Maybe have a function like this:

void Character::IncrementFrame()	// a function in the Character class
	frame += 0.5;
	if ( frame > maxFrame )
		frame = 0;

When you draw the sprite, you will set it’s spritesheet x coordinate to (int)frame*width;
So if frame were 2.5, it would draw frame 2 on the character sheet, which is at coordinates 2*width.

Check the section on Enums for using the direction to set the spritesheet y coordinate.

© Rachel J. Morris, 2009

Print Friendly