Game Development Reference
combination with subpixel rendering. From time to time, a 1-pixel-wide gap can appear
for just a fraction of a second. Sometimes it may appear every other frame, other times
only occasionally; it depends on the scrolling speed. It's still noticeable and is
something you should get rid of for a commercial-quality game.
The simplest solution is to overlap the stripes by just 1 pixel. In the
ScrollingWithJoy02 project change the initial positions for the flipped background
stripes in the init method by subtracting 1 pixel from the x position:
sprite.position = CGPointMake(screenSize.width - 1, screenSize.height / 2);
This also requires updating the stripe-repositioning code in the update method so that
the stripe is positioned 2 pixels farther to the left than before:
// Reposition stripes when they're out of bounds
if (pos.x < −screenSize.width)
pos.x + = (screenSize.width * 2) - 2;
Why 2 pixels? Well, because the initial position of the flipped stripes is already moved
to the left by 1 pixel, we have to move all of them 2 pixels to the left each time they
flip around to maintain the same distance and to keep the overlap of 1 pixel.
An alternative solution would be to update only the position of the currently leftmost
sprite and then find the sprite that is aligned to the right of it and offset it by exactly the
screen width. This way, you also avoid the rounding errors. Figure 7-7 shows the fin-
ished result with the final graphics.