Timelines & Triggers - Learn SpriteBuilder for iOS Game Development - page 131

Enough theory, let's try something specific. Switch to the Tileless Editor View tab, and
drag and drop the doughnut image from the Level1a Sprite Sheet onto the CCPhysic-
sNode in Level1.ccb .
The new doughnut image must be a child of the CCPhysicsNode so that it scrolls along
with the other level nodes. Since there's already an exit node using the doughnut image,
think of this doughnut as the imaginary place where the player enters the level. You might
want to move it to a position on the far left of the level so that you see it right when the
game launches.
With the doughnut image selected in the Timeline, you can now start to add keyframes to
create a Timeline animation. But first change the Timeline duration from its overly
lengthy default of 10 seconds to, say, 6 seconds. To do so, click on the timestamp digits in
the upper right area of the Timeline, which shows the timestamp of the Timeline Cursor in
Minutes:Seconds:Frames format. Clicking on this digit counter opens up the
Timeline duration editing dialog seen in Figure 5-2 . Enter 6 seconds and click Done.
Figure 5-2 . Changing the duration of the current Timeline
You may be wondering what the Frames field represents. SpriteBuilder plays back anim-
ations at a rate of 30 frames per second. So whenever you need a Timeline duration of less
than a second, or perhaps a second and a half, you'll have to edit the Frames field. It ac-
cepts values between 0 and 29. For instance, if you wanted a Timeline duration of 1.5
seconds, you would have to enter 1 in the Secs field and 15 in the Frames field.
Note You can't change the 30 frames per second (fps) playback speed in
SpriteBuilder. Changing the frame rate is not necessary, however. A keyframe
animation interpolates between two keyframes on a frame-by-frame basis. As-
suming that the game actually runs at 60 fps, Timeline animations will also run