Sign in to follow this  
Rubiks14

How do you handle different sized sprites in a single image?

Recommended Posts

Rubiks14    143
So I've been messing around with SDL with C++ lately and working with animated sprites. I've run into an issue though with sprites that are different sizes in the same image file. I was wondering if any of you had any tips as to how you handle that.

An example of where this problem could occur is say you have walking animations and running animations. In most games, and in real life, most peoples legs do not move as far apart when they walk as they do when they run. Another example is say you have a diving animation for a person. The image would start out wide and short and work itself to thin and tall.

One way I know to handle this issue is to obviously put enough space in the images to make up for the differences. I was wondering if there were any faster methods that could be handled in code, though.

Share this post


Link to post
Share on other sites
NickGomes    142
I'm assuming your keep all your sprites in a single sprite sheet right? The most logical way I think would be a simple sprite mapping file that would accompany your sprites. In it you would first outline an ID for every sprite in the sprite sheet along with the x, y, height, and width of that single sprite. Then a little lower in the sprite map file you could define specific animations. The animations would obviously be tagged with a name or ID, but would also have the sequence of sprite ID's needed to play it along with the FPS the animation should be run at in the game engine.

The beauty of this is that you can mix any sprite into whatever animations you want, and if you really want to get fancy you could even mix in different sprite sheets to the map to add overlay effects like power ups, or special glows that can accompany any animation you want.

An example of a simple XML sprite map for a Mike character:

[code]
<SpriteMapping>
<Texture Path="mike.png" Name="mike.png" />
<Sprites>
<Sprite Name="Sprite0" Id="0">
<Coordinates>
<X>8</X>
<Y>9</Y>
<Width>11</Width>
<Height>18</Height>
</Coordinates>
</Sprite>
<Sprite Name="Sprite1" Id="1">
<Coordinates>
<X>36</X>
<Y>9</Y>
<Width>11</Width>
<Height>18</Height>
</Coordinates>
</Sprite>
</Sprites>

<Animations>
<Animation Name="Idle" FrameRate="20" Loop="True" PingPong="False">
<Frames>
<Frame SpriteId="0" OffSetX="0" OffSetY="0" Duration="0.05" />
<Frame SpriteId="1" OffSetX="0" OffSetY="0" Duration="0.05" />
<Frame SpriteId="2" OffSetX="0" OffSetY="0" Duration="0.05" />
<Frame SpriteId="3" OffSetX="0" OffSetY="0" Duration="0.05" />
<Frame SpriteId="4" OffSetX="0" OffSetY="0" Duration="0.05" />
</Frames>
</Animation>
<Animation Name="Attack" FrameRate="20" Loop="True" PingPong="False">
<Frames>
<Frame SpriteId="1" OffSetX="0" OffSetY="0" Duration="0.05" />
<Frame SpriteId="6" OffSetX="0" OffSetY="0" Duration="0.05" />
<Frame SpriteId="7" OffSetX="0" OffSetY="0" Duration="0.05" />
<Frame SpriteId="8" OffSetX="0" OffSetY="0" Duration="0.05" />
<Frame SpriteId="9" OffSetX="0" OffSetY="0" Duration="0.05" />
</Frames>
</Animation>
</Animations>
</SpriteMapping>




[/code]


Of course you would NOT want to hand code every single sprite map in your game. So maybe making a simple animation mapping tool would greatly benefit your productions.

Share this post


Link to post
Share on other sites
Tocs1001    695
If you don't feel like creating a tool...

albeit primitive, [url="http://www.colourclash.com/sprite_buddy/sprite_buddy.html"]http://www.colourcla...rite_buddy.html[/url]

Sprite buddy gives you an xml file similar to Nick's.

Although there might be a better tool out there.

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