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

If you're having trouble noticing the scrolling motion, go back to SpriteBuilder and
change the Vector property of the Level1.ccb Color Gradient node to make its gradient
slanted. Or simply add more Color Node or Gradient Node instances to Level1.ccb as
you see fit in order to see something visual scroll by as you move the player. Then publish
and re-run the project.

Parallax Scrolling

While you're enjoying scrolling, why not make it better with parallaxing background lay-
ers?
Parallaxing is a way to create the impression of depth in 2D games by moving background
layers slower than the actual game layer. Some games even add foreground layers that
move faster to give the impression of some objects being even closer to the camera than
the game characters are.

There are multiple ways to implement parallax scrolling, the simplest being just moving
the layers at different speeds given a specific speed factor for each layer. But this ap-
proach has the drawback that you never quite know how large each layer needs to be, and
it's hard to judge which parts of what background layer will be visible when the player ar-
rives at a given point in the level.

The parallaxing approach I used for this topic derives the scrolling speed factor for each
layer based on each background layer's size in relation to the level's size. That way, the
background layers also align perfectly with the level borders. If the player is in the far-left
corner of the level, the background layer's lower-left corners will align with the level's
lower left corner. The same goes for the other three corners. The background layers
neither “overshoot” nor will they be “too short,” and their scrolling speed is solely de-
termined by their content size relative to the level node's content size.

Adding a Background CCB

First, in SpriteBuilder's Resource Navigator, switch to the File View tab, and then add a
subfolder in the Levels folder and name it Parallax . Select the folder, and create a new
CCB via File New File, as shown in Figure 3-4 .