swordmaster by swordmaster May 30, 2017


In this part of the tutorial we will learn about animations, which are made up of several smaller frames from one large image. These are the building blocks for characters, enemies, NPCs, and will be needed to bring the character we create to life in the next part of this tutorial.


To create an animation go to File -> New -> New Animation. You will notice that there a several file types under the New menu by the end of this tutorial series we will have introduced you to all them.

You should then be presented with the animation editor. This is an incredibly simple tool that builds an animation up from something called a Sprite Sheet, which is an image that is composed of many smaller images in a grid format. To set an image to use for this animation click on the "+" symbol at the bottom of the editor:

In the file dialog goto Graphics -> Hero and open the file "walk_south.png", this will be our character's south walking sprite sheet. Note you will need to have copied the Graphics folder from the demo as detailed in the last tutorial for this image to show up.

Now there is something we need to look at, in the bottom left of the main window you should see a tab titled "Properties". While you have the animation open switch to the this tab and you will notice a number of settings that can be configured:

  • Sound Effect: Sound file to play during the animation (.mp3 or .wav).
  • Width: The width in pixels of each frame in the sprite sheet.
  • Height: The height in pixels of each frame in the sprite sheet.
  • FPS: Number of frames to play per second.

For our character's walking animation we only have 2 frames from a sprite sheet that is 78 wide by 114 high, which gives us a width of 39x57 per frame. Go ahead and configure the properties as in the image below then click the play button:

When you have finished experimenting save it under the name "hero_walk_south.animation":


Now its your turn!

Repeat what you have learned to create another 3 animations for our character from the images walk_north.png, walk_east.png, and walk_west.png.