Sign in to follow this  
bpaterni3

how to animate correctly???

Recommended Posts

Hi, i'm trying to get a grasp on animation in 2D, so I wrote a program in Allegro that displays a filled circle with an "X" on it which rotates across the screen. I drew this with white as the background, and to compensate for the white I made the background in the actual program white. Now, this looks fine because the background on the bitmap and the background on the screen are blended together. But what about when the background in the program is a different color from the background in the bitmap: The extra color in the bitmap is displayed onto the screen with the circle. So what I want to know is how to get what I want dislayed on the screen without any extra shapes or colors displayed on the screen? I've also tryed to make the background of my bitmap transparent but none of the file Allegro can load support transparency. Thanks for any help Edit: Also how would you go about displaying an image on the screen when there are multiple colors in the background like in a typical sidescroller like Mario or something?

Share this post


Link to post
Share on other sites
In all your sprites, you need to make anything you don't want rendered to be hot pink (RGB(255, 0, 255)) because that is the color key Allegro uses by default. Then when you want to render your sprites, call the draw_sprite function for that and it will draw with transparency. Hope that helps.

-AJ

Share this post


Link to post
Share on other sites
alright, I did that, but now there's a trail of the previous balls in the area that's not used by my image. I've tryed clearing the area where my bitmap is placed but my image flickers.

Share this post


Link to post
Share on other sites
You need to do double buffering. There's an article here that has information on double buffering and loads more info for Allegro. A great resource for beginners.

-AJ

Share this post


Link to post
Share on other sites
I believe I did use double buffering, unless I misinterpretted the whole concept of it. Here's some code from my program if you want to check it (there's still trailing of ball in the area where I blit the ball image. The trailing is strictly limited to the unused space in the bitmap if that helps at all):


while (!key[KEY_ESC]) {
clear_bitmap(buffer);
clear_to_color(buffer, makecol(0, 255, 0));

if (key[KEY_UP]) {
bmpy = bmpy - 10;
if (bmpy < -100) {
bmpy = 768;
}
moveballright();
}
else if (key[KEY_DOWN]) {
bmpy = bmpy + 10;
if (bmpy > 768) {
bmpy = -100;
}
moveballleft();
}
else if (key[KEY_RIGHT]) {
bmpx = bmpx + 10;
if (bmpx > 1024) {
bmpx = -100;
}
moveballright();
}
else if (key[KEY_LEFT]) {
bmpx = bmpx - 10;
if (bmpx < -100) {
bmpx = 1024;
}
moveballleft();
}

acquire_screen();
textprintf_ex(buffer, font, 0, 0, makecol(255, 0, 0), -1, "Animation program - by Bpaterni");
draw_sprite(screen, buffer, 0, 0);
release_screen();

}
destroy_bitmap(buffer);
destroy_bitmap(circleanim);
clear_keybuf();
allegro_exit();
}
ENE_OF_MAIN()

Share this post


Link to post
Share on other sites
Forgive me if I missed something, but I can't see in that code where you are drawing your animation.

-AJ

Share this post


Link to post
Share on other sites
sorry, I blitted the image to the buffer in moveballright() and moveballleft()
here's the code for those functions:

void moveballright() {
if (frame == 0){
blit(circleanim, buffer, 0, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 1) {
blit(circleanim, buffer, 100, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 2) {
blit(circleanim, buffer, 200, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 3) {
blit(circleanim, buffer, 300, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 4) {
blit(circleanim, buffer, 400, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 5) {
blit(circleanim, buffer, 400, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 6) {
blit(circleanim, buffer, 500, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 7) {
blit(circleanim, buffer, 600, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 8) {
blit(circleanim, buffer, 700, 0, bmpx, bmpy, 100, 100);
}
frame = frame + 1;
if (frame >= 8) frame = 0;
}

void moveballleft() {
if (frame == 0){
blit(circleanim, buffer, 0, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 1) {
blit(circleanim, buffer, 100, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 2) {
blit(circleanim, buffer, 200, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 3) {
blit(circleanim, buffer, 300, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 4) {
blit(circleanim, buffer, 400, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 5) {
blit(circleanim, buffer, 400, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 6) {
blit(circleanim, buffer, 500, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 7) {
blit(circleanim, buffer, 600, 0, bmpx, bmpy, 100, 100);
}
else if (frame == 8) {
blit(circleanim, buffer, 700, 0, bmpx, bmpy, 100, 100);
}
frame = frame - 1;
if (frame <= 0) frame = 8;
}



Also, I remember reading somewhere that there is a better way to shorten this kind of stuff down so it doesn't take so many else if statements. Who knows, maybe this is my problem right there?

Share this post


Link to post
Share on other sites
In your main loop, the part you posted first, right after you're done drawing everything, try adding the line:

vsync();


And that should make it wait until the monitor is ready and should take care of your flickering problems. Hope that helps.

-AJ

Share this post


Link to post
Share on other sites
alright, that still didn't take care of it :( The problem's not really flickering it's just that the previous 2 or 3 images of the ball stay in their previously assigned spot until the whole part of the frame moves out of that spot. It's kinda hard to explain. I guess trailing is the best I can describe it with.

Share this post


Link to post
Share on other sites
Quote:
Original post by bpaterni3
Also, I remember reading somewhere that there is a better way to shorten this kind of stuff down so it doesn't take so many else if statements. Who knows, maybe this is my problem right there?



Yes there is, but I don't suspect it's your problem. It's called a switch statement and it goes a little something like this:


switch(frame)
{
case 0:
//do 0
break;
case 1:
//do 1
break;
//etc etc...
}




And I was thinking and perhaps you could have a BITMAP and based on the value of frame, set the BITMAP equal to the current frame's image and always just draw the one BITMAP. Worth a shot and I hope it helps.

-AJ

Share this post


Link to post
Share on other sites
I think I figured it out: I was using the regular blit() instead of masked_blit(), which skips the transparent pixels in the bitmap instead of drawing the whole thing like blit() does. I changed all my blit()s to masked_blit()s and everything worked perfectly(no more trailing!;). I think people should include this in their tutorials cause I didn't find this anywhere except for the allegro manual, and I find the code in there hard to understand.

Also, thanks again u235 for helpin me out

Share this post


Link to post
Share on other sites
Quote:
Original post by bpaterni3
sorry, I blitted the image to the buffer in moveballright() and moveballleft()
here's the code for those functions:
*** Source Snippet Removed ***

Also, I remember reading somewhere that there is a better way to shorten this kind of stuff down so it doesn't take so many else if statements. Who knows, maybe this is my problem right there?
Instead of all the if statements couldn't you just say this?

blit(circleanim, buffer, (frame * 100), 0, bmpx, bmpy, 100, 100);

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this