Making animations

Written by Maaike on 12/09/2015 18:51:11

nimating images in the editor gives you the opportunity to by example letting a bird fly. In combination with using paths the bird can then fly through your game while using his wings.

To let the bird of our example fly, you will need at least to different positions of the same bird. The two birds have to be in the same file, like you can see in the image below.
Two Birds 
Making the animation
First you need to place an image in the editor, go to the Element settings of the image and choose animation. You can use the quick menu at the image itself. Choose Change image and then Animation (button with three …). You will see your image and below you have the option to Create a new key frame. The next screen offers you five different values to create the animation, like you can see below.


Group name
With the group name you can recognize and relocate your animation, especially when you create more than one key frame for one image. So make it unique.

Key frame size
Each position of your image needs a key frame and the key frame must fit around it. You can recognize the key frame by the coloured border around it. Everything inside will be visible.

With the key frame size you can make the coloured border fit your image. Change the height and the width with millimetres. Standard this is 32 by 64 millimetres.

Key frames count
The amount of key frames that you need, depends on how many images you want to use for you animation. The flying bird from the beginning, had two postures we want to use for the animations, which means we will need two key frames.

When your image is one out of a set of images in one file and is used as a passive character in your game, you can set the key frame on one.

Time span
The time span indicates the quickness or slowness of the image on its spot; how many times the images will move per second. The higher the milliseconds, the slower the image will move.

If you choose an image out of a set of images in one file, you can choose to set the timespan at zero. Then it won’t move.

Key frame start
If you use an image, it can happen that it is one out of many in one file. If you add that image in your game, you will see all the images in the file, even if you just want to use one. By changing the values in the Key frame start you can replace the start point of the key frame on horizontal and vertical line. The values are standard at zero, which mean the key frame is always in the top left corner.

In the image below, you see three birds. The first two are suited for a flying bird, flapping its wings. The third bird on the other hand can be used as a still-life bird. When you want the third one, you will need to change the start point, so the key frame is only around the last one. 
Three Birds

More than one key frame
We have already mentioned that you will need an unique name for every key frame that you make. This comes in handy, especially when you use more than one key frame on one image. You can use the group name in a formula or during an action. For example, the passive bird changes in a flying bird, once you click on it.

Need more help?
Feel free to ask your questions in our community.