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

Figure 7-7 . The initial result using Box Layout nodes won't look too good
Let's quickly dissect what's happening in Figure 7-7 . The verticalLayout node vertically
aligns its children: the settings label and the two horizontal layout nodes, each of which
contains a Label TTF and a Slider node.
Alignment and spacing leave a lot to be desired. Also, the contents of the verticalLayout
node are in reverse order, with the label at the bottom and the horizontalLayoutSfx at the
top. This is an unfortunate behavior of Box Layout nodes whose Direction is set to Vertic-
al . It can be easily worked around by dragging the verticalLayout child nodes in the
Timeline so that they are in reverse order as they appear on the layer.
The nodes are also not centered on the layer but offset to the right and up. This is because
the anchor point of Box Layout nodes defaults to 0, 0. So even though the verticalLayout
node's position is centered on the stage, its content extends to the right and up because of
the anchor point. Select the verticalLayout node, and change its Anchor point property to
0.5 for both the X axis and Y axis. This will center the nodes. You should also change the
verticalLayout node's Spacing property to 30 to increase the vertical space between the
sliders and the labels.