Allegro tutorials

I recently downloaded and installed Allegro successfully (thanks to Justin W for the installer) and I've been able to do quite a bit with it, except a lack of tutorials is limiting me. Where on earth can I see how to load a .bmp file to a bitmap? I'd also like to learn more about bitmaps, but all of the tutorials are 404s, 3d stuff, or cover them vaguely and just don't cut it.

Can anyone please give me some links to some good tutorials? IF not can anyone tell me how to load a .bmp file?

Thanks,
Valar_King

I kinda stumbled onto a solution on howto display an image... sorta. When I run it, it gives me a light grey/light tannish screen, but does nothing else. Here's the code:

Code:

---

#include <allegro.h>
#define RESX 640
#define RESY 480
#define BSIZ 20

class rectangle {
 public:
  int x, y, w, h, c, oy, ox;
  void make(int x2, int y2, int w2, int h2, int c2);
  void draw(int c3);
  void drawold(int c4);
  void move(int p, int step);
 private:
};

void rectangle::make(int x2, int y2, int w2, int h2, int c2) {
 x = x2;
 y = y2;
 w = w2;
 h = h2;
 c = c2;
}

void rectangle::move(int p, int step) {
 ox = x;
 oy = y;
 if (p == 1) {
  y = y - step;
 }
 if (p == 2) {
  y = y + step;
 }
 if (p == 3) {
  x = x - step;
 }
 if (p == 4) {
  x = x + step;
 }
}

void rectangle::draw(int c3) {
 rectfill(screen, x, y, (x+w), (y+h), c3);
}

void rectangle::drawold(int c4) {
 rectfill(screen, ox, oy, (x+w), (y+h), c4);
}

int main() {
 allegro_init();
 set_gfx_mode(GFX_AUTODETECT_WINDOWED, RESX, RESY, 0, 0);
 set_color_depth(8);
 set_window_title("My Allegro graphics game test number 1");
 PALLETE pal;
 BITMAP *bmp = create_bitmap_ex(8, BSIZ, BSIZ);
 clear_bitmap(bmp);
 set_pallete(pal);
 install_keyboard();
 install_mouse();
 install_timer();
 masked_blit(bmp, (load_bmp("test.bmp", pal)), 0, 0, 0, 0, BSIZ, BSIZ);
 while (!key[KEY_ESC]) { 
  masked_blit(screen, bmp, 0, 0, 100, 100, BSIZ, BSIZ);
  textout(bmp, font, "This is a test.", 1, 1, 15);
 }
 allegro_exit();
 return 0;
}

END_OF_MAIN();

---

Thanks,
Valar_King

www.allegro.cc has a lot of members with tutorials, might try there. Here's a couple things I have learned. There's a few basics that kinda get skipped in most tuts, but can be gleaned from the documentation. I found this the hard way:

Typically speaking, you want to play sounds, set the video mode, and show pictures. At least to start. Here's how, with basic file formats (.bmp or .pcx etc and .wav or .mid etc).

First, you'll need some variables. For pictures, they are type BITMAP. I like to make a buffer bitmap to in memory that I then blit to the screen, because screen memory is slower than RAM memory. That way I just paste once to the video memory every cycle.

BITMAP *Buffer;

You'll also want a palette variable, just in case we were interested in color depths low enough to use palettes. (This is necessary for higher color depths only for compatibility with functions that handle both.. you'll see in a bit.)

PALETTE *Pal;

Next, you'll want to store you're sound file.

SOUND *SndFx;

Now in main you'll want to set some stuff up. First install Allegro.
allegro_init();

Next, you want to set the color depth for your video mode/window mode. Default is 8 bit. I like something a little bit higher, like true color 24 bit. 16 and 32 are your other choices. 32 allows for Alpha blending hardware acceleration, but otherwise is the same as 24. 24 bit color depth means each pixel has 24 bits to describe its color. That's 8 bits for every color. The average human eye can only see 256 shades of any given color, 256 being quite conveniently 8 bits.

set_color_depth(24); // where 24 is the color depth in bits.

Now we can set the video mode. Here's full screen, autodetect (Direct X accelerated by default, if possible).

set_gfx_mode(GFX_AUTODETECT, 800, 600, 0, 0);

The first two numbers are the resolution (800 by 600). The second two numbers are there for platform compatibility. They have no meaning in Windows. (In other OS's this determines how much extra video memory you have. In Windows you will have three video pages no matter what, which is to say in this case 800*3 by 600*3. More on that later.)

By default, your basic video screen page (the visible one) is known as the variable: screen

Just like we set up the video, now we set up the audio.
install_sound(DIGI_AUTODETECT, MIDI_AUTODETECT, 0);

The zero at the end is for compatibility sake again. Ignore. While we're at it, let's install the keyboard input handler as well. (All this setup stuff is so that you don't have to use Allegro's way for any one thing should you so desire not to.)

install_keyboard();

Now we're ready to throw a picture into the Buffer, then flush it onto the screen.

First load the file from disk into the Buffer:
Buffer = load_bitmap("MyPicture.bmp", Pal);

The load_bitmap function allocates all the memory for Buffer, so don't worry about that. (Also, remember that Pal variable from earlier? Here's where we use it. We can ignore it from now on, all it did was help make load_bmp() work for all color depths.)


Now, we'll flush that onto the screen. There are many ways to "blit" it there, but because I don't know how big your image file is, I'll use the simple draw_sprite function. In the documentation, look under "Blitting and sprites" for tons of more options (like scaling, rotating, etc). (Note that anything hot pink is transparent when using the draw_sprite function. That is red value 255, green value 0, and blue value 255.)

draw_sprite(screen, Buffer, 0, 0);

Now I've placed our buffer image (a bitmap or "sprite") at the top left corner of the screen. That's what the 0,0 means. In computer graphics, numbers go up the lower and more right they are. In geometry, the computer screen is represented by the fourth quadrant. This is not, however, the case when you start getting into 3D graphics, where the center of the screen is 0,0,0.

Now, let's play that sound. First load it, then play it.

SndFx = load_sample("MySound.wav"); // or .voc

play_sample(SndFx, 255, 128, 1000, 0);

play_sample's first parameter is the sound we want played. The second is the volume, a range from 0 to 255. In our case, we set the volume all the way up, which is actually pretty standard as this is the "wave" volume in Windows and is not usually very ear piercing. The next value is the "pan" range, or, the level of sound intensity of the left speaker compared to the right. The pan ranges from 0 (min/left) to 255 (max/right) and 128 will be balanced. Next is frequency, which is relative rather than absolute: 1000 represents the frequency that the sample was recorded at, 2000 is twice this, etc. Finally, there is a loop flag. If the loop flag is set, the sample will repeat until you call stop_sample(). Any of these values can be manipulated while the sound is playing by calling adjust_sample(), thus the train can pan from right to left, starting quiet, then getting loud, then trailing off again, changing its pitch ever so slightly with distance. ;)

OK, demo over. Now we just want to pause until the user presses, say, the escape key.

textout(screen, font, "Press ESCape to quit.", 1, 1, makecol(255,255,255));

// Looping until the ESCape key is pressed.
while(! key[KEY_ESC])
;


Textout() is pretty easy to get, the last parameter is a function that helps us make a color in any color depth easily. The parameters are red_value, green_value, blue_value from 0 to 255. 255,255,255 is white.

The while loop does literally nothing until the escape key is pressed, at which point it exits.

Finally, we must clean up. We deallocate all that memory we allocated, "shutdown" allegro thus restoring the video mode, and exit the program.

destroy_bitmap(Buffer);
destroy_sample(SndFx);
allegro_exit();
return 0;
} // End of main function.
END_OF_MAIN();

The END_OF_MAIN() function makes Allegro cross platform by getting rid of OS specific stuff like WinMain(). So, here is our final program.

PHP Code:

---

#include <allegro.h>

// Create memory buffer and palette.
BITMAP *Buffer;
PALETTE  *Pal;

// Variable for the sound effect.
SOUND *SndFx;

int main() 
{ 
 // Initialize Allegro.        
 allegro_init();      

 // Where 24 is the color depth in bits.
 set_color_depth(24); 

 // Set the resolution to 640 by 480 with SAFE autodetection.
 set_gfx_mode(GFX_SAFE, 640, 480, 0, 0);
 
 // Setup the sound routines.
 install_sound(DIGI_AUTODETECT, MIDI_AUTODETECT, 0);

 // Installing the keyboard handler.
 install_keyboard();

 // Load the picture from disk into the Buffer.
 Buffer = load_bitmap("MyPicture.bmp", Pal);

 // Draw or "flush" buffer onto the screen.
 draw_sprite(screen, Buffer, 0, 0);

 // Load and play the sound.
 SndFx = load_sample("MySound.wav"); // or .voc
 play_sample(SndFx, 255, 128, 1000, 0);

 // Pause program until escape pressed.
 textout(screen, font, "Press ESCape to quit.", 1, 1, makecol(255,255,255));
 while(! key[KEY_ESC])
   ;

 // Shut down and clean up.
 destroy_bitmap(Buffer);
 destroy_sample(SndFx);
 allegro_exit();
 return 0;
} // End of main function.

// Some Allegro magic to deal with WinMain().
END_OF_MAIN(); 


---

As a final note, there is no error checking in that program. If, for instance, the bitmap or wav files don't exist, the program will simply shut down and not work. This could easily be avoided, but I will leave it to you to make the necessary modifications.

Hopefully this is enough to really get you going. From here, the documentation located in the Allegro\docs directory (double clidk allegro.htm) should be enough to fill in most of the blanks.

So sorry this was kind of a long post, but I hope it helps you out. If you have any questions, feel free to ask here or at www.allegro.cc

-Justin

P.S. For drawing primitives, see the primitives section in the Allegro docs. There you will find ready-to-go rectangle, circle, fill etc methods.

Thanks for the info and the installer. I've already made a game test where your guy is in a graveyard, and he enters a building. The collision detection for the door is a bit off though. Here's the source so far (NOTE: I needta get some page flipping for this soon!):

Code:

---

#include <allegro.h>
#define RESX 640
#define RESY 480
#define BSIZ 80

int x = 200, y = 200;

class rectangle {
 public:
  int x, y, w, h, c, oy, ox;
  void make(int x2, int y2, int w2, int h2, int c2);
  void draw(int c3);
  void drawold(int c4);
  void move(int p, int step);
 private:
};

void rectangle::make(int x2, int y2, int w2, int h2, int c2) {
 x = x2;
 y = y2;
 w = w2;
 h = h2;
 c = c2;
}

void rectangle::move(int p, int step) {
 ox = x;
 oy = y;
 if (p == 1) {
  y = y - step;
 }
 if (p == 2) {
  y = y + step;
 }
 if (p == 3) {
  x = x - step;
 }
 if (p == 4) {
  x = x + step;
 }
}

void rectangle::draw(int c3) {
 rectfill(screen, x, y, (x+w), (y+h), c3);
}

void rectangle::drawold(int c4) {
 rectfill(screen, ox, oy, (x+w), (y+h), c4);
}

bool collide(int x1, int y1, int x2, int y2, int w, int h) {
 if (x1 > x2 && x1 < (x2 + w) && y < (y2 + h) && y > y2) {
  return true;
 } else {
  return false;
 }
}

int main() {
 allegro_init();
 set_gfx_mode(GFX_AUTODETECT_WINDOWED, RESX, RESY, 0, 0);
 set_color_depth(8);
 set_window_title("Allegro game test 1");
 BITMAP *bmp = create_bitmap_ex(8, BSIZ, BSIZ), *bbuf = create_video_bitmap(RESX, RESY);
 BITMAP *bmp2 = create_bitmap_ex(8, 320, 240);
 clear_bitmap(bmp2);
 clear_bitmap(bmp);
 clear_bitmap(bbuf);
 install_keyboard();
 install_mouse();
 install_timer();
 bmp = load_bmp("char.bmp", default_palette);
 bmp2 = load_bmp("bdrop.bmp", default_palette);
 blit(bmp2, screen, 0, 0, 0, 0, 640, 480);
 draw_sprite(screen, bmp, x, y);
 while (!key[KEY_ESC]) {
  if (key[KEY_UP]) {
  if (collide(x, y, 270, 1, 55, 45)) {
    x = 300;
    y = 400;
    bmp2 = load_bmp("eroom.bmp", default_palette);
  }   
  y -= 5;
  rest(25);
  blit(bmp2, screen, 0, 0, 0, 0, 640, 480);
  vsync();
  draw_sprite(screen, bmp, x, y);
  }
  if (key[KEY_DOWN]) {
  if (collide(x, y, 270, 1, 55, 45)) {
    x = 300;
    y = 400;
    bmp2 = load_bmp("eroom.bmp", default_palette);;
  }   
  y += 5;
  rest(25);
  blit(bmp2, screen, 0, 0, 0, 0, 640, 480);
  vsync();
  draw_sprite(screen, bmp, x, y);
  }
  if (key[KEY_LEFT]) {
  if (collide(x, y, 270, 1, 55, 45)) {
    x = 300;
    y = 400;
    bmp2 = load_bmp("eroom.bmp", default_palette);
  }   
  x -= 5;
  rest(25);
  blit(bmp2, screen, 0, 0, 0, 0, 640, 480);
  vsync();
  draw_sprite(screen, bmp, x, y);
  }
  if (key[KEY_RIGHT]) {
  if (collide(x, y, 270, 1, 55, 45)) {
    x = 300;
    y = 400;
    bmp2 = load_bmp("eroom.bmp", default_palette);
  }   
  x += 5;
  rest(25);
  blit(bmp2, screen, 0, 0, 0, 0, 640, 480);
  vsync();
  draw_sprite(screen, bmp, x, y);
  }
 }
 allegro_exit();
 return 0;
}

END_OF_MAIN();

---

Ignore the rectangle class. It's for something I abandoned, but I don't quite want to get rid of it yet.

Thanks a bunch,
Valar_King

Cool, looks like you're off to a great start. Page flipping isn't hard at all with Allegro. Like I mentioned before, in Windows, Allegro allocates three video pages automatically. All you have to do is use a couple of them. To define you're own names for video pages, simply create BITMAP variables. Then make them video bitmaps using the create_video_bitmap() function.

For proper page flipping that will work on all machines, you should actually create three screens. Due to a bug in DirectX for certain Win2K systems (not all, but some hardware on 2K), the first video screen should be reserved as black only (because it periodically loses its info and turns black anyway). This makes it a prime candidate for creating true color fade effects. (Note, for 8 bit graphics, this bug does exist, but is so rare as to almost not count - higher color depth, higher resolution, more buggy.. again, on a minority of systems.)

OK, enough talk, let's do an example. Resolution 800x600.

BITMAP *Screen[3], *Buffer;

Screen[0]=create_video_bitmap(800,600);
Screen[1]=create_video_bitmap(800,600);
Screen[2]=create_video_bitmap(800,600);

Buffer=create_bitmap(800,600);

Right. Now we have three pages. Page 0 is for fade effects, pages 1 and 2 are for our page flipping and flawless animation. The off screen buffer is what we do all our writing to, then blit it to the video screen thus making our animation much faster.

How about a bool type variable to keep track of which page we are using at any given time.

bool vid=1; // Start vid out on the invisible page.

Vid can be either 0 or 1. Since the pages we are interested in are 1 and 2, we simply add 1 to vid whenever we use it.

The last new thing is show_video_bitmap(Screen[x]). It switches which screen is visible and which are invisible.

Now for the main game loop.

PHP Code:

---

while(whatever)
 {
 DrawToBuffer(); // Not real function.

 // Now fast blit the buffer to the unseen video page.
 
 blit(Buffer, Screen[vid+1], 0, 0, 0, 0, 800, 600);
 // blit() is the fastest way to flush the buffer.

 // Flip page.
 show_video_bitmap(vid+1);

 //  Update vid to reflect the change.
 vid = !vid; // 0 or 1, if 1 then 0, if 0 then 1.
 } // Restart game loop. 


---

Now that is some seamless animation in roughly five lines of code.

Hope these help. :p

-Justin

That did help. Thanks again.