How to Create a sprite Image

Question

I am trying to create a very basic sprite image.

First off i have an existing image (Width=100px, Height=100px).

I will be looping through this image betwee

Answer 1

An approach that can work is by allowing to place the sprite's frames anywhere in the bitmap (that way you can make them more compact) and accompany each bitmap with a(n xml) file that describes the location, size and origin of each frame AND has a listing of all the animations. Something like this:

This way you can re-use frames across animations (and so optimizing the bitmap sizes even more) and customize the animations by simply editing the XML file.

All you have to do is read the XML file, read the bitmap and when starting an animation: start a timer that ticks at a regular interval. When it ticks you calculate the correct Keyframe in the animation by adding the durations of the Keyframes one by one and stopping when the sum is more than the tick time; the current Keyframe should be used.

In the XML file above I added stuff such as an offset that allows you to modify the position of the sprite during the animation (you could even interpolate it so it moves smoothly)

All that is left is grabbing the correct frame out of the bitmap. As an optimization you could pre-process the bitmap when loading the XML file by grabbing the frames, keeping those as tiny bitmaps, and discarding the big bitmap. This might optimize memory when the bitmap is big and not fully covered in frames.

In other cases, you don't pre-process and just blit the frame.

For larger applications (more bitmaps/animations/frames) I recommend creating an app to create and edit the XML file. Another option might be to create a plugin for your favorite paint program (if possible)