Selecting and Unlocking Levels - Learn SpriteBuilder for iOS Game Development - page 247

sprite's anchor point to 0x0 simply because this will align the first background sprite's
lower left corner with the root node's position and thus the Scroll View 's lower left corner.
The result should look like Figure 8-1 .
Figure 8-1 . Three page-background images spread out evenly
Adding the Scroll View Node
The setup in Figure 8-1 is enough to try out an actual Scroll View node. Open MainS-
cene.ccb , and switch to the Node Library View . From there drag and drop a Scroll View
node onto the stage.
With the Scroll View node selected, edit its properties so that the position types are set to
% and values are set to 50. Set the anchor point to 0.5x0.5 so that the Scroll View node is
centered on the scene.
Now the important bit: the Scroll View 's content size. You know that individual back-
ground images (pages) are 411 points wide. You've also added a 30-point margin by set-
ting the position of the second and third background images so that there is an added 30
points of horizontal distance on the previous page. This means a single page is 411 points
plus 30 points wide. Enter 441x290 as the Scroll View 's content size.
Moving on to the properties specific to CCScrollView . They are shown in Figure 8-2 .
Your first step should be to set the Content node value via the drop-down menu to UserIn-
terface/MainMenuLevelSelect.ccb . The first background image should immediately ap-
pear on the stage within the area defined by the Scroll View . If it doesn't, choose File
Save All from the menu or simply click the publish button once.