Sign in to follow this  
MintyAnt

How to animate 2D sprites in XNA?

Recommended Posts

MintyAnt    102
Hello there,

I recentley picked up XNA and have since been messing around, trying to create a simple 2D sidescroller.

As it stands right now, I have a simple sprite (Megaman) just moving around without.. well, making any movement animation.

I did the apphub tutorial, and the way they animate is by just having a set distance between each frame of animation, and loading that cell of the animation.

However, most all spritesheets I have found do not have an equal ammount of spacing or a standard frame size.

For instance, megamans running animation:
http://www.sprites-inc.co.uk/files/X/X/

So here are my questions:
1. Is this how animation sheets generally are? If so, how do I program my game to know which is the next frame, and its size?
2. Is there a program I can use that will automatically tile this evenly for me? And on that note...
3. Is there a way I could just create that program myself? The only thing I'd need is a way for XNA to look at every pixel in a program and get its current color (To check if its a blank/opaque space and thus space it out correctly)
4. Is how apphub did the animation the wrong way? If so, what is the right way?

Laslty, I consider myself okay at programming, so I'm all for any solution, no matter how complex.

Thanks for the help,

-Minty

Share this post


Link to post
Share on other sites
freeworld    341
[quote name='MintyAnt' timestamp='1306694430' post='4817196']
1. Is this how animation sheets generally are? If so, how do I program my game to know which is the next frame, and its size?
[/quote]

Typically, you would load a script or sort of config file that describes the aniamtion and it's frames.

[quote]
2. Is there a program I can use that will automatically tile this evenly for me? And on that note...
3. Is there a way I could just create that program myself? The only thing I'd need is a way for XNA to look at every pixel in a program and get its current color (To check if its a blank/opaque space and thus space it out correctly)
[/quote]

Look into generating texture atlas's

[quote]
4. Is how apphub did the animation the wrong way? If so, what is the right way?
[/quote]

There is no wrong way unless it doesn't do what you want it to.


The easiest way would be aligning all your frames in order, and evenly spread on a texture, they just grab thew sprites based on the frame the animation is at.

something like

x = frame % columns;
y = frame / columns;

this would be the upper left xy coordinates inside the texture that that frame resides. Another way to do it is create a file you can load all the data about each frame from, and use that information to know where the frames are in the texture. This is more common when you want to pack as many sprites into one texture as possible.

Share this post


Link to post
Share on other sites
ElyasMachera    102
What you do is put each frame in a container, list or vector, I use a list.
Then depending on what or how it moves increment frame, setting the sourceRectangle to the currentframe.


Share this post


Link to post
Share on other sites
MintyAnt    102
Hey,

Thanks for the reply and the info.

The way you describe isn't worth it with the current sprite sheet, as everything is not spread out evenley. To do them all manually would take some time, and I feel there might be a better appraoch (Though I could be wrong!)

Heres what I am thinking.

I create an XML file with the spritesheet and put in a tag for each animation line. eg. <MegamanRunning></MegamanRunning> <MegamanJumping> etc...

Then I have the program run through each sprite of the sheet.

This would be done (somehow) using Texture2d's getdata: http://msdn.microsoft.com/en-us/library/bb197084.aspx#Y1019
(Hopefully this method words)
I would use this to basically retrieve the current pixel or area, and determine the sprite in it.

Then I would have the program extract the whole sprite and save it as binary data (I believe using Binary64 encoding?) into the XML file at the current XML tag (Like megaman running)

It would continue to do this until it hit the last sprite/end of the current y axis frame.

Then it would go down to the next set of sprites, and so on.


After that, I would simply fetch the image data from the XML sheet and paint that whenever I need to.


How does this method sound?

Share this post


Link to post
Share on other sites
Flimflam    665
Your idea sounds rather complicated for something that could simply be solved by opening the sprite sheet in an image editor and spacing them out to a grid size of your choosing. Not everything needs to be an elaborate programming solution.

Share this post


Link to post
Share on other sites
Michael Tanczos    5681
Something like this will pack all your individual images onto one spritesheet:

[url="http://spritesheetpacker.codeplex.com/"]http://spritesheetpacker.codeplex.com/[/url]

It generates XML files you can use directly to load the rectangle coordinates for each of the sprite images.

Share this post


Link to post
Share on other sites
MintyAnt    102
I suppose you are right.

Micheal - This is a sprite sheet, not individual images.

Regardless, I did learn that using an XML with the sprite sheet can be useful for certain reasons. For instance anchor points and the coordinates of it on the sheet.

I will space the sheet out for now, however I may create a tool that will help me do that automatically in the future, as many sprite sheets I come across seem to not be spaced out correctley.

Thanks again for all the help

Share this post


Link to post
Share on other sites
Michael Tanczos    5681
99.9% of spritesheets you find on the net have zero coordinate information for individual frames.. making them mostly pretty to look at unless you go through the painful process of trying to figure out all the coordinates yourself.

The reason I sent that link is to show you that if you start with the frames as individual images there are ways to generate spritesheets that retain all the coordinate information in an easy to digest format.

To use them you just load them into a Texture2D object and use a spritebatch draw call with source and destination rectangles.

Share this post


Link to post
Share on other sites
MintyAnt    102
[quote name='Michael Tanczos' timestamp='1307056156' post='4818896']
99.9% of spritesheets you find on the net have zero coordinate information for individual frames.. making them mostly pretty to look at unless you go through the painful process of trying to figure out all the coordinates yourself.

The reason I sent that link is to show you that if you start with the frames as individual images there are ways to generate spritesheets that retain all the coordinate information in an easy to digest format.

To use them you just load them into a Texture2D object and use a spritebatch draw call with source and destination rectangles.
[/quote]

Yeah its certaintley been a pain :/
I went into gimp and selected the whole sprite as a box, and it gives me the xy, width and height of it, which I wrote in a .txt

Then I have a (hack job) parser in my animation class that will retrieve all the frame data for the given animation name, store it in a class object (frame) array which also creates the box to be used in animation.

The only thing i'm worried about is everything being drawn incorrectley. If the sprite should have 5 pixel padding on one frame or not...
I can easily include another field for something like an anchor point in my .txt file, however I don't really know what the anchor point does (the specifics)


As for your program, wouldn't that mean I would have to take all my sprites out of the sprite sheet one at a time, save them as seperate files, then run them through the program?
With the exception of doing that, the progam looks pretty awesome, so I downloaded it for future use if that case arises (assuming thats how it works)

-Minty

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