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