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

Tip This image is not sized ideally for downscaling because you'll end up with
fractional dimensions like 1187.5 x 812.5 when dividing by 2 or 4. There can't
be fractional pixels in an image, so the image size is rounded to the next nearest
integer value. It doesn't make a difference for huge background images like this
one, but for smaller images it's important to choose an iPad Retina image size
that is divisible by 4 without a remainder. Otherwise, artifacts may appear due
to minimal differences in the image aspect ratio on devices where the app uses
downscaled versions of the image.
Before adding the Cerberus image, create a folder named Sprites and inside it a subfolder
named Level1 in the File View. This is where you'll store images for that particular level,
which should not be in a SpriteSheet. Why shouldn't it be in a SpriteSheet? Quite simply,
because the image is far too big to benefit from being in a SpriteSheet, and it's used only
once in a level, anyway. It would take up way too much space and leave little room for
other images that are used more than once.
Now drag and drop the level1_background_Cerberus.png file from Finder into the Sprites/
Level1/ folder. Then drag it from the File View onto the Background1.ccb stage. Change
the Cerberus sprite's position to 0,0. Because the anchor point for sprites defaults to 0.5,
0.5 the sprite is centered on the lower-left corner of the background layer. This is not what
you need, so change the Anchor point property to 0,0. Now the Cerberus sprite should be
above and slightly larger than the gradient.
Working with Images
The background gradient and sprite layers aren't enough to see the parallaxing effect, but
first I want to digress into image and project settings because it's important to familiarize
yourself with the available options before adding more images. When they are used cor-
rectly, you can easily improve performance or reduce the bundle size of your app, and
you're probably already wondering what these image settings do.
Select the level1_background_Cerberus.png image in the File View. Above the File View,
you'll see the preview area showing a thumbnail of the image along with additional set-
tings as seen in Figure 3-8 .