Main Scene and Game State - Learn SpriteBuilder for iOS Game Development - page 211

Always use the position to move nodes. In well-designed Cocos2D apps, it
should be very rare to find any anchor point having any values other than 0, 0.5
or 1. In general, anchor points set to 0x0 and 0.5x0.5 are by far the most com-
monly used.
Animating the Background
Nothing is as unexciting as a static background. Anything can be made more attractive
with just a bit of motion. And this is even more true if the images were designed with a
little motion in mind, which is why the background images are split into separate layers in
the first place. Otherwise, you could have just used a single, static, and boring background
image.
Consider, for instance, the OS X screen savers—specifically, the Classic screen saver that
draws images without animating them. Then compare it with the Ken Burns screen saver,
where the images are panning and zooming slowly. Which one looks more lively?
If you need another example, consider TV programs. Any time there isn't a human being
or animal in focus and the scene is largely static, if not a photograph, the camera always
pans or zooms slowly, perhaps both. And they say you can't learn anything from watching
TV.
In Figure 7-4 , you can see how little it takes to make the background images even scarier
through the use of a few scale animations and moving the monsters slowly up and
down—of course, with easing.
Specifically, you should add three keyframes to each of the background images and the
background node. Start by adding three scale keyframes to the background node by press-
ing S. One keyframe should be at either end, and the third should be in the middle at the
5-seconds mark. Move the Timeline Cursor over the keyframe in the middle and, on the
Item Properties tab, for the background node, set both Scale values to 1.02 .
It's a miniscule amount of scaling, but once you play the animation, you'll notice the ef-
fect already. Then right-click a Keyframe Segment and select Ease In/Out . Repeat this for
the other Keyframe Segment too. Play the animation again, and you'll notice it will be
even smoother now.
Next, repeat adding three scale keyframes with Ease In/Out easing to the M_bg and
M_frontsmoke sprites. For M_bg , set the middle keyframe's scale values to 1.01 and 1.02