Game Development Reference
In-Depth Information
// Position the new sprite one screen width to the right
sprite.position = CGPointMake(screenSize.width + screenSize.width / 2, ←
screenSize.height / 2);
// Flip the sprite so that it aligns perfectly with its neighbor
sprite.flipX = YES;
// Add the sprite using the same tag offset by numStripes
[spriteBatch addChild:sprite z:i tag:i + numStripes];
The idea is to add one more stripe of the same type each. They're positioned so that
they align with the right end of the original stripe's position. In effect, this doubles the
total width of the background stripes, and that's enough for endless scrolling. But I'll
get to that shortly.
First I need to point out that the new neighboring images' x coordinates are flipped
(mirrored along the y-axis) so that the images match visually where they're aligned, to
avoid any sharp edges. The new images also get a different tag number, one that's off-
set by the number of stripes in use. This way it's easy to get to the neighboring stripe
by either adding or deducting numStripes from the tag number.
Right now, the background image scrolls just a bit longer before showing the blank
canvas behind the images. But you're not stopping there; instead you'll complete the
effort and add seamless infinite scrolling.
First change the anchorPoint property of the original stripes to make things a little
easier. The x position is set to 0, and the stripes are left-aligned with the an-
chorPoint 's x coordinate also set to 0. The same goes for the additional, flipped
stripes, which now only need to be offset by the screen width to make them align with
the original stripes. The changes to the init method of the ParallaxBackground
class are highlighted in Listing 7-5 .
Listing 7-5. Adding Off-Screen Background Images
numStripes = 7;
// Add the 7 different stripes and position them on the screen
for (int i = 0; i < numStripes; i++)
Search Nedrilad ::

Custom Search