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

You'll see the button is fully visible on iPad but not on iPhone due to the GameMenuLay-
er.ccb content size being the default 568x384 size. This size is a compromise that scales
up well on an iPad, but the 384 points height make the layer slightly higher than the
iPhone screen.
Open the GameMenuLayer.ccb again, and select the root node. Change its Content size
property types for both width and height to % by selecting the % in parent container
items from the drop-down lists. The width and height values should automatically change
to 100 for both width and height; if not, make sure the value is 100 for both. This makes
the layer scale with the size of its parent node. In this instance, that would be the GameS-
cene.ccb root node, which in turn is already set to have a content size of 100% because
that's the default setting for CCBs of type Scene .
In essence, the size of GameMenuLayer.ccb now equals the size of the screen on all
devices. The % content size setting is effectively passed down from parent nodes, allow-
ing child nodes to take on the size of the screen or a size proportional to the screen size if
all of their parents do the same.
Scaling GameMenuLayer.ccb to the size of the screen won't automatically scale the posi-
tions and sizes of the nodes it contains, however. Therefore, select the button and change
its reference corner drop-down menu to the Top-Left setting. The reference corner drop-
down menu is highlighted in Figure 6-1 . Then change the button's position so that it is
about 50 by 20 points away from its reference corner.
Figure 6-1 . The button's reference corner is set to Top-Left to make its position relative to the top left corner
of the layer
Changing the reference corner will position the button so that it is always relative to the
top-left corner of the layer. As the layer's height increases and decreases on devices with
different screen sizes, the button's position will remain at 50 points inwards horizontally
and 20 points below the top-left corner of the screen.