Creating sprite frame animations

You may have noticed that there are three assets for the bird. These will be used to create a keyframe animation that will run in a loop. SpriteBuilder makes this process very simple:

1. Create a new file that uses a sprite as its root object. Call it Bird.

2. Select CSprite in the editor.

3. In the options pane on the right-hand side of the screen, there is an option for Sprite frame. Set it to bird0.png.

   

4. Now, in order to create the animation, select all the bird images in the resources pane on the left of the screen. Right-click on them and select Create keyframes from Selection.

5. Notice that there has been three keyframes created in the timeline editor. If you click play, you will notice that the bird quickly flaps and then gets stuck on the last frame while the rest of the timeline plays out.

6. In order to fix this, you need to set the timeline duration. Open the options for the default timeline and select Set timeline duration. Enter 0 seconds and 3 frames.

7. You also have...