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

tings menu is supposed to have a label and two volume sliders for music and effects, all
aligned vertically. But the sliders will have a label next to them, aligned horizontally.
This grid-like layout can be emulated using the parent-child relationship. A vertical Box
Layout node has two horizontal Box Layout nodes for the sliders as children.
From the Node Library View, drag and drop a Box Layout node onto the settingsLayer so
that it becomes a child of the settingsLayer node. On the Item Properties tab, change the
Direction property under the CCLayoutBox section from its default Horizontal setting to
the Vertical setting. To differentiate the layout nodes, you should rename the layout node
in the Timeline to verticalLayout .
Then you should add a Label TTF and two additional Box Layout nodes as children of the
verticalLayout node. You should rename the two CCLayoutBox entries in the Timeline to
horizontalLayoutMusic and horizontalLayoutSfx . As for the label, change its Label text to
Settings and increase its Font Size to 32 .
Each slider will be added to one of the horizontal layout nodes, together with a label node.
From the Node Library View, drag a Label TTF and a Slider node to the horizontalLay-
outMusic node, and then repeat this step for the horizontalLayoutSfx node. Select each la-
bel, and change its text to Music Volume or Effects Volume , depending on whether the la-
bel is a child of the horizontalLayoutMusic or horizontalLayoutSfx node, respectively.
The initial result will not look too good, just like in Figure 7-7 .