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

Changing the reference corner and making the layer scale with the dimensions of the
scene is the best way to align nodes to each corner of the screen regardless of the device.
Though you can achieve a similar effect using the % position type and without changing
the reference corner, doing so can cause noticeable layout problems when switching
between iPhone and iPad devices.
For instance, assume the button's reference corner was still set to Bottom-Left and the Y
position was set to 95% . That would make the button appear at a distance of 320 - 320 *
95% = 16 points below the top screen edge on iPhones. While on iPads, the button would
be 768 - 768 * 95% = 38 points below the screen. Not quite: taking into account that
SpriteBuilder applies a 2x scale to positions when switching from iPhone to iPad, that
gives you an absolute distance of 19 points below the top screen edge on iPad.
Such % positions would result in a difference of 3 points (16 points vs. 19 points) in Y po-
sition between iPhone and iPad screens. While that may be close enough for many cases,
where you need precise positioning you must change the reference corner and specify the
position in points.
Editing Button Properties
The button you've added to GameMenuLayer.ccb is a tad ugly and nondescript at the mo-
ment. Select the button, switch to the Item Properties tab, and stand in awe of its many,
many properties divided into four sections: CCNode , CCControl , CCButton , and CCLa-
belTTF . Where to start?
You've already completed editing the CCNode properties, and you should be familiar with
them from editing any other node. No need to change them any further. So then let's have
a look at the remaining properties sections.
CCControl Properties
The CCControl properties shown in Figure 6-2 need no changes. Nevertheless, I'll give
you a quick explanation because you just want to know anyway. Am I right?
Note that all nodes that inherit from CCControl offer these properties. The CCControl
nodes are Button , Text Field , and Slider .