Menus & Popovers - Learn SpriteBuilder for iOS Game Development - page 195

Animating the Pause Menu on Resume
Having no visual feedback at all after tapping the resume button on the pause menu is
kind of dreadful. How exactly you animate the resume game Timeline of the
PauseMenuLayer.ccb is up to you, except for the Callbacks keyframe at the end that runs
the resumeGameDidEnd selector. In the following paragraphs, I give just an example
and some inspiration as to what you can do in those two seconds.
First, consider that animating the P_bg background sprite will also move, scale, and ro-
tate its child nodes. About the only property that is not inherited is opacity. If you wanted
to slowly fade out the popover layer, I'm afraid you would have to add the same opacity
keyframes to each individual button, the label, and the background sprite—and on top of
that, make them all start and end at the same time stamp with the same opacity values.
Therefore, I decided not to fade out the layer.
Tip If you followed the blend-mode interlude, you may find it difficult to see
things on the stage. If that is the case, click the eye symbol in the Timeline to
the right of the CCNodeColor entry to hide the color node while leaving it vis-
ible in the game.
Select the P_bg sprite node and press V to insert a Visible keyframe. Move this keyframe
to the far left, time stamp 00:00:00 . The visible property can only be turned on and
off; therefore, the Keyframe Segment is drawn thicker and it behaves differently, filling the
entire segment even though there's just one keyframe so far. Move the Timeline Cursor
just past the 1-second mark, and add another Visible keyframe with the V key. See Figure
6-9 if you need a visual hint.
Next add two Position keyframes with the P key at the 00:00:00 and 00:01:00
timestamps. Move the Timeline Cursor onto the second keyframe, the one to the right, and
then drag and move the P_bg sprite to the upper left corner of the screen. Right-click the
Position Keyframe Segment , and select the Ease In easing mode. This completes the move
animation to the upper left corner, and in itself it's rather boring.
Add two Scale keyframes with the P_bg sprite selected, also at the 00:00:00 and
00:01:00 time stamps. Move the Timeline Cursor onto the second keyframe, and then
change the Scale property to 0.2 and 0.1 for the X and Y axes. Right-click the Key-
frame Segment , and choose the Ease Out easing mode. If you run this animation, the en-
tire pause layer should drop to the back (zoom out) while sliding to the upper left.