Selecting and Unlocking Levels - Learn SpriteBuilder for iOS Game Development - page 255

Figure 8-5 . Logo and title have been added
Select each logo and title image in turn to change their positions. The logo position types
should be % and the values should be 50x85, while the title position types should also be
percent and values set to 50x0. This will align the images neatly at the top center of each
page.
For the three level buttons for each world, you best use a Box Layout node to align them
horizontally. Drag one Box Layout from the Node Library View onto each W#_bg sprite,
and then change the Box Layout node's position types to % and its values to 50x35. Also,
change the anchor point to 0.5x0.5 so that the child nodes will be centered on the Box
Layout node's position, and Spacing should be 30 to keep the level buttons at a fixed dis-
tance from each other.
You should then drag the W#_l1 , W#_l2 , and W#_l3 images in that order onto the CCLay-
outBox node so that each Box Layout node has three W#_l# sprites as children. See Figure
8-6 for reference, and ignore the CCButton nodes for now. Now change the color property
of all W#_l# sprites except the first ( W1_l1 ) to a light gray—color code #999999 works
well. This will dim the images, signaling to the user that those levels haven't been un-
locked yet. The first level is, of course, always unlocked.
Figure 8-6 . The first page's layout. The other page's layout is the same except it uses the corresponding W2
and W3 images
Then add one button as a child to each W#_l# sprite, for a total of nine buttons. But you
should add only one button for now, edit its properties as described next, and then copy
and paste the button eight more times and move it to its corresponding W#_l# sprite.