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

The sliders are still too wide, though, and they are overlapping the labels. You can de-
crease the slider's size by selecting a slider, and then changing the Width of the Preferred
size property from its default 200 to 150 . Do this for both CCSlider nodes.
The labels still overlap with the sliders, however. This is a spacing issue, and fixed by
editing the Spacing property for both the horizontalLayoutMusic and horizontalLayoutSfx
box layout nodes. Set the spacing to 20 for both.
Left-Alignment with Box Layout
If you have eagle eyes, you may have spotted that the two labels and sliders still do not
align perfectly. The music volume label seems to be slightly more indented than the ef-
fects volume label, while the sliders do not start and end at the same X position either. If
you want to pronounce this effect, select the effects volume label and change its text to
FX Volume . I bet now you can see it. See Figure 7-8 for an example.
Figure 7-8 . The labels and sliders do not align correctly
The problem here is that the size of the labels will be different unless they use the exact
same text. Even if both labels had the same number of characters, they might still be dif-
ferent in size unless you are using a fixed-width font such as Courier. But Courier is an
ugly font: It looks like this .
Fortunately, this can be fixed easily by ensuring that both the horizontalLayoutMusic and
horizontalLayoutSfx box layout nodes have the same content size. If you select one and
the other, you'll notice their content size properties differ. The horizontalLayoutMusic