Game Development Reference
In-Depth Information
Pausing the Game
What's left to do is to create the actual pause menu popover as a Layer CCB. In it, a
Timeline animation with the name
resume game
is created that has a
Callbacks
keyframe
that will run the
resumeGameDidEnd
selector.
Creating the Pause Menu Popover
For this and the following popover menus, add a subfolder named
Popovers
to the
UserIn-
terface
folder in SpriteBuilder's
File View
. Then right-click the
Popovers
folder, select
New File
to create a CCB document of type
Layer
, named
PauseMenuLayer.ccb
.
The first thing you should do to this and all other popover CCBs is to set the root node's
Content size
property to
100%
for both width and height, in order to scale it up to match
each device's screen size. With the root node still selected, select the
Item Code Connec-
tions
tab and enter
GameMenuLayer
as the
Custom class
. That's the same class as for
the
GameMenuLayer
.
Note
The reason for using the same class for all popover menus, including the
GameMenuLayer
itself, is that they all share a lot of common code. For in-
stance, all of them will pause the game, and they all have a restart button. Plus
the code in
GameMenuLayer
is short and simple.
Next you'll want to add a background graphic that's somewhat smaller than any device's
screen so that it can easily be centered on all devices. About 320x240 is a good size.
Using a background that's smaller than any screen size greatly simplifies user interface
design. You can just center the content and completely ignore any screen size considera-
tions. Only the distance from the layer's background to the screen edges will vary.
Drag and drop a
Sprite
from the
Node Library View
onto the stage and change its
Sprite
frame
to
SpriteSheets/UserInterface/P_bg.png
. Alternatively, you can also drag and drop
the
P_bg
from the
Tileless Editor View
; you may need to check the
UserInterface
check
box in the
Filter folders
list below the
Tileless Editor View
. No matter how you create the
sprite, you should set its position types to
%
and both position values to
50
so that the
sprite is centered.
Search WWH ::
Custom Search