Book Image

Cocos2d Game Development Essentials

Book Image

Cocos2d Game Development Essentials

Overview of this book

Table of Contents (13 chapters)

Keyframe animation in SpriteBuilder


Animations can also be created in SpriteBuilder with keyframes. In the SpriteBuilder timeline, there is a full keyframe animation editor. Each node can have multiple properties animated.

Keyframe animation works by setting a keyframe on the starting value and then later in the timeline, a keyframe is set for the ending value. The animation then automatically advances between these values.

It is easier to understand in practice:

  1. Open your main menu scene in SpriteBuilder. Drag out a Bird.ccb subfile. You will create an animation to move the bird from offscreen to the center of the screen.

  2. Drag the bird out of the scene to where it will start its animation.

  3. Now, you need to set a key frame for the starting position. Ensure your timeline is set to zero by dragging the blue bar in the timeline back to the start.

  4. With your bird node selected, open the menu and select Animation | Insert Keyframe | Position:

    This will add a keyframe to the timeline for position.

  5. Now...