Extra note: If you experience errors after copying the codes highlighted yellow it may be because the indents of the text get published as spaces instead of tabs, you will need to delete all of these spaces and indent it properly in your text editor.

=== TUTORIAL #3 ===
Animated Sprites

— Step 1: Understanding Sprites
Sprites in Stepmania and OpenITG are text files that reference parts of an image in succession to make an animation.
The first thing you need to do is open a new text file in Notepad and “Save As…” spritename.sprite into your “animations” folder.

Go back into your default.xml file and change the file to the name of your new sprite file.
<Layer
     File="nyancat.sprite"
     InitCommand=""
/>

Now that stepmania will be referencing the sprite file instead, open it up in notepad and enter the following, it won’t mean a lot yet but will be used later.
[Sprite]
Texture=spritesheet 1x1
Frame0000=0
Delay0000=0.5

Noting [Sprite] at the top of the file allows Stepmania and OpenITG to recognise how to use the file.
The texture is the spritesheet you are going to be using, the 1×1 represents the number of frames across, and down there are.
Frame0000 is the first frame the sprite file has been programmed to show, in this case it shows frame 0 which is the first frame in the spritesheet.
Delay0000 is the delay time for the frame above, in this case it means Frame0000 will be on screen for 0.5 seconds.

Now that you understand all of the different parts you will need to make a spritesheet.

— Step 2: Creating Spritesheets
If you aren’t savvy with image editing this part may be tricky, I will show my method briefly.

Frame by frame in flash I position my images in the center of a box that is significantly bigger than my image.

Once all of my frames are in place I export as a PNG sequence to a new folder.

I open GraphicsGale and import multiple files in one hit and click sort.

I see how the animation looks in GraphicsGale’s preview and then export it combining all of the frames as a PNG with alpha channel.

I then open the image in photoshop and magic wand the background out so that only a sprite remains.

Once saved, I copy the file into the animations folder.

By now after using whatever method you have decided suits you, you should have a large image with all of the frames shown in a grid-like fashion.
In order for the spritesheet to work properly every frame needs to be the same size which is why combining them all through my method always works.

Rename your image to anything you want, in my case it’s nyansheet.
After renaming your file open it and count the number of frames going across and the number of frames going down.
In my case my image has 1 frame going across and 8 frames going down.
Rename your image again to the same name as before but place a space followed by your frames across x frames down.
My Example: nyansheet 1×8.png

Your spritesheet is now done, the final step is getting your .sprite file to reference the sheet.

— Step 3: Animating your Sprite
You need to change the texture to the name of your spritesheet.
[Sprite]
Texture=nyansheet 1x8
Frame0000=0
Delay0000=0.1

For each frame you want to show, you need to add and increase the frame and delay numbers, then next to each instance you enter the which frame of the image you want to display and how long you want the frame to be on screen for.
[Sprite]
Texture=nyansheet 1x8
Frame0000=0
Delay0000=0.07
Frame0001=1
Delay0001=0.07
Frame0002=2
Delay0002=0.07
Frame0003=3
Delay0003=0.07
Frame0004=4
Delay0004=0.07
Frame0005=5
Delay0005=0.07
Frame0006=6
Delay0006=0.07
Frame0007=7
Delay0007=0.07
Frame0008=8
Delay0008=0.07
Frame0009=9
Delay0009=0.07
Frame0010=10
Delay0010=0.07
Frame0011=11
Delay0011=0.07


Save your sprite file and test it out.
Once the sequence reaches the final frame and delay the game knows to jump back up to the top and continuously loop it.

Jumping back to your default.xml file you can now proceed to add any of your positioning and movements that will help make the animated sprite look even better.
<Layer
     File="nyancat.sprite"
     InitCommand="x,900;y,240;linear,5;addx,-1800;"
/>

If you have been following me up to this point you will now know how to create spritesheets, get sprite files to reference them and get your default.xml file to reference the sprite files.
Tune in next time when we learn how to use variables and display text.