Main Scene and Game State - Learn SpriteBuilder for iOS Game Development - page 212

for X and Y. And for M_frontsmoke , set the middle keyframe's Scale values to 1.02 and
1.06 for X and Y. I'm sure you'll notice how this enhances the animation further.
Now select the M_monsters node and change its Y position property to -15 . This will
move the node down a bit. Then add three position keyframes by pressing the P
key—again, one keyframe at either end and one at the center. Move the Timeline Cursor
over the center keyframe, and then edit the Y position property to 0 . Don't forget to apply
the Ease In/Out mode to both Keyframe Segments. This will make the monsters move up
and down synchronized with the scale movement.
Last, you'll want this animation to loop forever. To do so, left-click on the bottom bar that
reads No chained timeline in Figure 7-4 and select Default Timeline from the list to chain
the animation to itself, thus looping it.
The resulting animation shows the entire background layer slowly coming at you while
the monsters rise out of the smoke. As the background recedes, so will the monsters as
they drop down into the smoke.
Try to intensify this animation effect or make it even more subtle by increasing the
timeline duration and moving the keyframes accordingly. There's a lot to be gained with
subtlety in animations. And synchronicity. Therefore, while you may want to try different
easing modes for this animation, the best effect is when all nodes use the same easing
mode. Otherwise, the movements will not be synchronized, diminishing the desired effect.
Launching with the Menu
To try this animation in the game you need to complete a few more housekeeping steps.
For one, you haven't yet added the background to the MainScene.ccb , which still contains
the original nodes.
Open the MainScene.ccb , and remove the gradient and label nodes. In fact, remove any
excess nodes except for the play button; otherwise, you won't be able to play a level until
the next chapter. But you may want to move the play button out of the way, near the
lower-left corner.
With the MainScene cleared, drag and drop the MainMenuBackground onto the stage,
either by dragging it from the Tileless Editor View or by dragging the MainMenuBack-
ground.ccb from the File View. Then set the position of the newly created CCBFile in-
stance to 0, 0 . You should also rename the CCBFile instance to background in the
Timeline.