Controlling and Scrolling - Learn SpriteBuilder for iOS Game Development - page 88

viewPos.y = MAX(0.0, MIN(viewPos.y, levelSize.height
- viewSize.height));
_physicsNode.positionInPoints = ccpNeg(viewPos);
// Parallax scrolling code will be added here ...
}
The preceding code does the following:
Assigns viewPos the target.positionInPoints offset by
viewCenter
Clamps viewPos so that scrolling stops at level borders inset by
viewCenter
Assigns negated viewPos to the _physicsNode
Somehow you'll have to derive a parallax position for each of the background layers
every time the _physicsNode 's position has been updated.
The inset part is most important part to understand to comprehend the following parallax
scrolling code. Since you want each layer's position to be relative to the position of the
_physicsNode (aka viewPos in this method), it's crucial to consider that viewPos
(the center of the view) should keep a distance from the level's borders. This minimum
distance must be at least viewCenter.width in the horizontal direction and
viewCenter.height in the vertical direction, to prevent the viewable area from
showing the outside of the level borders (ie empty space).
Figure 3-3 helps to understand this if you imagine that viewPos is at the center of each
Viewable Area. The actual Scrollable Area rectangle (ie allowed positions for viewPos )
must be larger than the left and bottom of the Level Area, and smaller than the top and
right side of the Level Area. This smaller sized Scrollable Area rectangle is said to be an
inset of the larger Level Area rectangle.
Therefore, the relative position of each background layer can't be relative to the full ex-
tents of the level's size, which is 4000 by 500 points. Instead, only the scrollable area
must be considered when calculating the parallax factor. If you're having trouble imagin-
ing this, have another look at the diagram in Figure 3-3 .
Here's an example: On an iPhone 5, viewCenter would be 284x160. Therefore, the
scrollable area ranges from the following:
284x160 to 4000 - 284 x 500 - 160 = 3716x340 points