Main Scene and Game State - Learn SpriteBuilder for iOS Game Development - page 226

node has a width of 246, while the width of horizontalLayoutSfx is just 230 if you've set
its child label's text to FX Volume .
This means that the horizontalLayoutSfx content size is 16 points less wide. So you
merely need to make it 16 points wider. Consider the Spacing property that you've set to
20 for both horizontal layout nodes. You need to increase the spacing for the horizont-
alLayoutSfx node only.
Select the horizontalLayoutSfx node, and change Spacing to 36 —that's the original 20
plus the missing 16 points. That is all: alignment fixed.
Check the content size of the two horizontal layout nodes to confirm that their width is
now the same. Both labels are now left-aligned, as are the sliders.
Center-Alignment with Box Layout
But what if you wanted the labels to be center-aligned and not have to worry about adjust-
ing the Box Layout node's spacing properties whenever you change a label's text?
As of now, you have each label and slider aligned horizontally in a Box Layout node, and
the two box layout nodes are aligned vertically in another Box Layout node. You can al-
ways reverse this setup. In this instance, you could have both labels in a vertically aligned
Box Layout node, and both sliders in another vertically aligned Box Layout node. You
would then add both vertical box layout nodes to a horizontally aligned Box Layout node.
The result will be different in so far that each vertical column's width is defined by the
node with the largest width. In other words, the widest label now defines the alignment of
all labels in relation to all sliders next to the labels.
Give this a shot by first removing the horizontalLayoutSfx and horizontalLayoutMusic
nodes. This will also remove their child nodes.
Then drag and drop a Box Layout node onto the existing verticalLayout node and name it
horizontalLayout . Drag and drop two more Box Layout nodes onto the horizontalLayout
node, change their Direction property to Vertical and change their names in the Timeline
to verticalLayoutLabels and verticalLayoutSliders .
Then add two Label TTF nodes to the verticalLayoutLabels node, and change their label
text to FX Volume and Music Volume , respectively. Also, add two Slider nodes to the ver-
ticalLayoutSliders node. You may want to edit the label and slider names in the Timeline
so that they reflect whether they refer to music or effects volume. See Figure 7-9 for refer-
ence.