Game Development Reference
In-Depth Information
draw a sprite over it that acts as a frame. Or you could add the Scroll View to a
CCClippingNode programmatically.
The setup of pagination-enabled content requires you to consider that the Scroll View
automatically determines the number of pages based on the ratio of the Scroll View size in
relation to the Content node size.
For example, if you wanted five individual, horizontally scrolling pages that are each 100
points in width, the width of the Scroll View must be 100 and the total size of the Content
node must be 500. That's assuming the pages have no margin. With margins between indi-
vidual pages, you also have to consider the size of the margin and live with the fact that
any added margins causes the individual pages to slowly shift their snap positions as you
scroll further. The Scroll View then behaves as if the first page were left-aligned while the
last page is right-aligned.
So here we go. Create a new CCB file in the UserInterface folder, and name this docu-
ment MainMenuLevelSelect.ccb . The CCB type must be set to Node before you create
the CCB document. Select the root node, and on the Item Properties tab, set the content
size types to %. Since you'll add three pages to the Scroll View and only horizontal
scrolling will be allowed, you have to set the content size to 300% width and 100%
height. This will make the Scroll View 's Content node three times as large as the Scroll
View 's size, no matter what the size of the Scroll View will be.
You should also name the root node levelSelect so that a reference to it can be ob-
tained easily. On the Item Code Connections tab, you need to set a custom class by the
name of MainMenuLevelSelect . This class will later receive the button events. It
will also handle highlighting the levels that have already been unlocked.
On to adding content. On the Tileless Editor View , make sure that the UserInterface Sprite
Sheet is checked at the bottom. You should see a number of images starting with an upper-
case W followed by a digit. These are the world-specific, level-selection images. The ones
named W1_bg , W2_bg , and so on are the background images defining a page visually.
Drag and drop one of each—you should add three in total. All three images are 411x290
points in size. You will see the importance of this shortly.
Right now, all three images are likely at the same position. You need to space them out
evenly in a horizontal direction. The W1_bg position should be 0x0. W2_bg should be at
position 441x0 and W3_bg should be at 882x0. These positions add a 30-point-wide mar-
gin between the images. The margin is entirely optional, but it is important to consider be-
cause it contributes to the size of an individual page. Additionally, set each background
Search WWH ::




Custom Search