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

at the game's frame rate of 60 fps. If the game's frame rate is high, there will be
more interpolated in-between states and thus the animation will run more
smoothly than in SpriteBuilder.
Make sure that the entire duration of the animation is visible in the Timeline. Use the
Timeline Scale slider or resize the SpriteBuilder window to have all 6 seconds of the an-
imation visible. You'll notice that to the right of the 6 seconds marker is a shadow drawn
toward the right—this marks the end of the current animation.
Then move the Timeline Cursor to the far left. Click and drag the Cursor handle—that's
the blue-ish downward-facing arrow located on the timescale bar from which a vertical
line extends downward. The timestamp digits should display the values 00:00:00 . Fin-
ally, make sure the doughnut image that's supposed to visualize the level-entry point is
still selected.
Adding Keyframes
With the correct node selected and the Timeline Cursor at the desired location, you can
begin adding keyframes. You'll find one way to do this is by going through the menu via
Animations Insert Keyframe and selecting the corresponding keyframe
type,—for instance, Position or Scale. However, this is not too comfortable. Instead, you
should get in the habit of using the keyboard shortcuts listed in Table 5-1 .
Since the level-entry doughnut should scale a little over time, press the S key now to add
a keyframe for the Scale property. You'll notice that like in Figure 5-3 the doughnut item
expanded to show the list of animatable properties, with the Scale property drawn in bold
to signal that this property has at least one keyframe in the current timeline.
Now move the Timeline Cursor to the 3-seconds mark. It doesn't need to be precisely at
00:03:00 ; a fraction of a second either way won't make a noticeable difference. Press S
one more time to add a second Scale keyframe.
Notice how the two keyframes are now connected with a pink, horizontal line? I'll refer to
the space between two keyframes as the Keyframe Segment , where the pink line visualizes
the form of interpolation between two keyframes. There's the Instant interpolation
mode which, when set, actually hides the pink line in a Keyframe Segment.
Finally, move the Timeline Cursor to the far right to 00:06:00 and press S once more to
add a third keyframe. You now have a keyframe animation of the Scale property that