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