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:
- Open your main menu scene in SpriteBuilder. Drag out a
Bird.ccbsubfile. You will create an animation to move the bird from offscreen to the center of the screen. - Drag the bird out of the scene to where it will start its animation.
- 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.
- With your bird node selected, open the menu and select Animation | Insert Keyframe | Position:
This will add a keyframe to the timeline for position.
- Now...
