1. Simple Sprite Sheets with Inkscape & Gimp David Cline

2. Things you will need: Inkscape (inkscape.org) Gimp (gimp.org) Gimp’s Layers to Spritesheet script (http://registry.gimp.org/node/20943) Irfanview (optional) (irfanview.com)

3. Sprite Sheet A simple animation loop for a game character or element stored in a single image. Example: Ship with thrust that flickers

4. Inkscape: http://inkscape.org/ A free “Vector Graphics” program that allows you to easily create simple graphics with geometric shapes and crisp-looking outline lines. Recommended particularly if you don’t think of yourself as much of an artist.

5. Create SpriteSheet Frames in Inkscape 1) Create Transparent Rectangle Backing 2) For each Frame Draw frame in Inkscape on transparent rectangle (Optionally save it as an Inkscape drawing) Export the frame to a.png file, specifying pixel size

6. 1) Create Backing Rectangle

7. Tips: You can set the size of the rectangle to be a perfect square by clicking on the arrow icon, and changing the W and H sizes directly. Once the rectangle has its alpha channel set to 0 you can’t easily select it, so you might want to wait until after you have the first frame set up to set the alpha value.

8. 2a) Create Frame

9. 2c) Export bitmap

10. 2c) Export Bitmap Export to a.png (the default I think) Make sure to export the whole drawing, not just the selection. Make sure to change the name! Use numbers to differentiate frames.

11. View Bitmap in IrfanView At this point you should be able to flip through the frames using IrfanView. The transparent background, which was white in Inkscape, should now look black.

12. Gimp: http://www.gimp.org/ A free image editor that allows you to create images in layers. We will use one layer for each frame of animation. That way you can flip through them. Then, we can export the layers as a sprite sheet using an export script.

13. Gimp’s Layers to Sprite Sheets http://registry.gimp.org/node/20943

14. Create Sprite Sheet in Gimp In Gimp Open the first frame image

15. Create Sprite Sheet in Gimp In Gimp Open the first frame image Open remaining frames as layers The transparent back- ground should appear as a checkerboard.

16. Convert to SpriteSheet Under the Filters command, select Sprite-Sheet  Create from layers... If you can’t find the command, did you install the script? This should result in a new window popping up:

17. Finally… Save the new image as a.png You should get an export dialog like:

18. Alternate Method Using Only Inkscape Instead of making one frame at a time and saving each one out, make all of the frames on one sheet in Inkscape.

19. Backing Size Set your backing rectangle size to integer sizes so you can position successive frames exactly. Set the location of the backing rectangle to an exact integer location as well. As before, start with a visible backing that will later be made transparent (by changing the alpha channel) For example, Set the backing rectangle size to 100 x 100. Set the location to (100, 800) The next frame will be set at (200,800)

20. Example first frame: Size = 100 x 100 Location = (100, 800)

21. Successive frames Copy frame and paste it in the window Then, while everything is still highlighted, change its location to be right beside the previous frame, in our case, (200,800)

22. Successive Frames Now, modify the frame to be the next frame of the animation. This allows you to edit frames side by side, until you are satisfied with the animation.

23. Saving Select all of the backing rectangles, and set their alpha channel to 0. Export the selection to a.png file. Make sure that the saved size is an even multiple of your desired frame size in pixels. Once again, in Irfanview, the transparent background should look black, and Gimp should show a checkerboard pattern.

24. Walk Cycles Create initial frame Plan out how many frames will be in the cycle Remember that the last frame flows back into the first

25. Walk Cycles - Humanoid For a typical biped, a walk cycle can be made of 4 or 8 key frames The first half of the frames mimic the second half, but on the other side of the body:

26. Examples:

27. Walk Cycle in Inkscape Create first frame Copy for later frames Use rotation to move the joints The body should only go up and down

28. Simple Example Walking Mushroom

29. Editing Select & Select again for rotation tool Change rotation center to joint position before rotating

30. Tips Make sure first frame is in Final form before starting to create walk cycle! Don’t work on consecutive frames at first. Work on far away frames, and then fill in. Rotate the legs as needed, and then move the figure up or down (not sideways), to be on the ground.

31. Robot Example