Creating Animated Sprites

Started by
8 comments, last by adam23 17 years, 11 months ago
Hey guys, I'm looking into making a 2D game utilizing animated sprites and what not, my question is, how do I create these animated sprites? Do I have to do them by hand, I mean, I know I do, but place them each, perfectly side by side, etc? :( I was looking for some information to no avail, thanks! I already have an animated GIF, so I'm just trying to take each frame and put it somehow together to make an animated sprite. EDIT: I'm using Managed DirectX with C#, I'm using the sprite class, possibly there's already a function to render animated GIFs?
Advertisement
Yes, put them side by side. It shouldn't be that difficult, really, just cut and paste each frame of the gif next to the previous one in one image.

In the code, you'll want to simply keep an 'int' of which frame you're one, and write a short method to calculate the current source rectangle based on the current frame. For example, if you have a 100x100 image with ten frames, you might store your animation in a 1000x100 image. When it comes time to render from the image, make sure you first calculate a rectangle which represents the current frame, and render only that part of the image. If you are on frame 4, this might be (400, 0)-(500, 100).
Ah yeah, I understand that concept thanks. I meant how do I go about creating the side by side images, just place them? I tried that but how do you know if it's within the boundaries? I tried it and rendered the animated sprite and it'd show parts of other frames lol. Thanks. I was just wondering if there was some sort of tool.
It's pretty straightforward to calculate frame boundaries if the frame size is uniform and are packed correctly. For example, consider a single row of 10 frames consisting 50x50 images. For the 5th frame, the boundries would be {x=50*5,y=0,w=50,h=50}. The calculations would be slighty more complicated for animations packed into multiple rows.

For tools I use Tyler 2.0 to pack multiple bitmap files into a single one. I use it because it's simple and number of frames per row is configurable.

You can also use imagepacker which is more complicated and more powerful. You can output the frame rectangle of every frame in the animation.

I use Animation Shop 3(came with PSP7) from Jasc Software to take a gif and export all the individual frames to seperate files. There probably exist a free tool for doing this somewhere.

Check out this page for some more interesting tools.

Good Luck.
0xa0000000
Thanks Jack!
Its not to hard.
Are you using WIN32 API or DirectX?

I generally create a SPRITE structure that stores all the data about my SPRITE. Then I have a global.h file that has start and stop variables depending on the direction I'm facing. I think it would be easier just to show you.

//Set knight properties
blueknight.x = SCREEN_WIDTH/2;
blueknight.y = SCREEN_HEIGHT-100;
blueknight.width = 96;
blueknight.height = 96;
blueknight.curframe = 8;
blueknight.movex = 0;
blueknight.movey = 0;
blueknight.animcount = 0;
blueknight.animdelay = 2;

//Walking variables
const int WALKRIGHT[2] = {0,7};
const int WALKUP[2] = {8,15};
const int WALKNE[2] = {16,23};
const int WALKNW[2] = {24,31};
const int WALKDOWN[2] = {32, 39};
const int WALKSE[2] = {40, 47};
const int WALKSW[2] = {48, 55};
const int WALKLEFT[2] = {56, 63};
const int WALKCOLUMNS = 8;
const int SPEED = 5;

Notice I have an array the first variable is the start frame the second is the stop frame.

void PlayerControl::Walk(int direction)
{
if(currDirection != direction && !attack)
{
switch(direction)
{
case 1:
blueknight.curframe = WALKRIGHT[0];
startFrame = WALKRIGHT[0];
blueknight.movex = SPEED;
blueknight.movey = 0;
stopFrame = WALKRIGHT[1];
currDirection = 1;
attackDirection = 1;


if(attack)
{
Attack(attackDirection);
}
else
{
blueknight.y +=blueknight.movey;
blueknight.x +=blueknight.movex;
if(currDirection != STOP)
{
if(++blueknight.animcount >=blueknight.animdelay)
{
++blueknight.curframe;
if(blueknight.curframe>stopFrame)
{
blueknight.curframe = startFrame;
}
}
}
else if(currDirection == STOP)
{
blueknight.curframe = stopFrame;
}

RECT srcRect;
srcRect.left = (blueknight.curframe % WALKCOLUMNS) *blueknight.width;
srcRect.top = (blueknight.curframe/WALKCOLUMNS) * blueknight.height;
srcRect.right = (srcRect.left + blueknight.width);
srcRect.bottom = (srcRect.top + blueknight.height);

position.x = (float)blueknight.x;
position.y = (float)blueknight.y;
position.z = 0.0f;

sprite_handler->Draw(
blue_knight_walk_image,
&srcRect,
NULL,
&position,
D3DCOLOR_XRGB(255,255,255));
}//end else


This is probably hard to understand but I just took pieces of my code and posted it on here. You can't just call Draw like I did, because you have to Begin and End the sprite_handler first. This is an object that is called between Begin and End.
Adamhttp://www.allgamedevelopment.com
Thanks sir, but unfortunately that's not what I meant (for the 3rd time :P), I mean creating the actual image with the pictures side by side and what not, it's just that it seemed too tedious, but now that that person gave me both programs, it's all good. Thanks though!
Look for a program called SpriteBuilder, it works awesome for combining multiple images.
Adamhttp://www.allgamedevelopment.com
Thanks :D Unfortunately it costs 50 dollars lol, I'm not really looking to invest at the moment.
You can download the trial version, and I think I only paid $29.99 for it. If you have a bunch of files you need to have combined, send them to adam_autum@iwon.com and I will combine them and send them back to you.
Adamhttp://www.allgamedevelopment.com

This topic is closed to new replies.

Advertisement