Game Development Reference
In-Depth Information
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.
Search WWH ::
Custom Search