Sprite Kit Tutorial: Making a Universal App: Part 1

iOS Simulator Options

Here are the iOS simulators that run iOS 7:

• iPhone Retina (3.5-inch) – iPhone 4 and 4S
• iPhone Retina (4-inch) – iPhone 5, 5C, and 5S
• iPad – iPad 1, 2, and Mini
• iPad Retina – iPad 3 and 4

Note that there is no option for a non-retina iPhone. This is because no iPhones or iPod touches without a retina display are able to run iOS 7.

And since Sprite Kit was introduced in iOS 7, there is no iPhone/iPod Touch that will use the non-retina display art. However, you might as well include it anyway to be future proof.

Planning the Art: Conclusion

OK, so based on the above discussion, here is the plan for this Sprite Kit tutorial.

• The art has been designed to be within a 960×640 “playable area”, used full-screen on retina-display iPhones, and centered for the 4-inch iPhone, iPad, and iPad Retina screens.
• The art is available already scaled and structured inside texture atlas folders. The @2x identifier will be used for the iPad retina-display images.
• Backgrounds are a special case because they always need to be fullscreen. They are made to fit the 1024×768 point size (iPad size), so the entire screen is filled. These images are also scaled down by half so they can be used on the 3.5-inch iPhone. Some of the background will be offscreen, but that doesn’t matter for this particular background because it’s close enough.
• The 4-inch iPhone will utilize code to use the “-568” texture atlases, centering the “playable area.”
• The iPad and iPad Retina will utilize code to use the “-ipad” texture atlases, convert coordinates to inside the “playable area”, use the appropriate font sizes, etc.

Go ahead and download the art for this Sprite Kit tutorial, made by the fabulous Vicki Wenderlich. Unzip the file and take a look at how things are set up:

• There are three folders inside the TextureAtlases folder. Each of these folders contains artwork for each particular type of display (3.5-inch iPhone, 4-inch iPhone, and iPad).
• The iPad texture atlas folders contain images sized for the non-retina and retina display iPads. They are the only ones that will contain @2x images.
• In the “foreground” folder, there are two image for the foreground images (the lower part and the upper part). It’s split into two parts so you can place the mole in-between the lower and upper parts, to make him look like he’s going underground.
• The 4-inch iPhone is another special case. For this we just had our artist create new foreground images to take advantage of the extra space. Thanks Vicki!
• In the “background” folder, the background has the 1.33 aspect ratio of the iPad, but is actually half sized (512×384 and 1024×768). This is because the background barely shows (just through the three mole holes), so it’s not worth the cost of a large texture load. Instead a small texture is loaded and scaled up.
• In the “sprites” folder, all sprites were sized to fit nicely within the 960×640 “playable area”. Note, there are a mole and two animations for him (the mole laughing, and the mole being hit).

Ok – enough background info – it’s time to get started!

Getting Started

Open up Xcode, select File > New > Project…, then select SpriteKit Game and click Next. Name the product WhackAMole, make sure Universal is selected for devices, and click Next. Choose a location to save your project and click Create.

When the project opens you should have the project file selected in the Project Navigator, if not select it. Make sure you have WhackAMole selected under the targets section, and the General tab selected at the top. In the Deployment Info section you will see checkboxes for Device Orientation. Since your game will only be displayed in the landscape orientation, make sure Landscape Left and Landscape Right are selected for both iPhone and iPad.

There is one more change to make so that the orientations work properly. Open ViewController.m and replace the viewDidLoad method with the following viewWillLayoutSubviews: method.

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];

    // Configure the view.
    SKView * skView = (SKView *)self.view;
    if (!skView.scene) {
        skView.showsFPS = YES;
        skView.showsNodeCount = YES;
        
        // Create and configure the scene.
        SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];
        scene.scaleMode = SKSceneScaleModeAspectFill;
        
        // Present the scene.
        [skView presentScene:scene];
    }
}

So why did you do this? View Controller views are loaded in portrait orientation by default, and are not guaranteed to be sized correctly when the viewDidLoad method is called. However the view’s size will be correct by the time the viewWillLayoutSubviews method is called. As you can see, most of the code is the same from the viewDidLoad method. The major thing to note is the if statement wrapped around the setup of skView.scene. You will need to check if skView.scene already exists, because the viewWillLayoutSubviews method to can be called more than once.

Texture Atlases

Setting up texture atlases is a very easy thing to do. The first thing you will need to do is create a folder with “.atlas” appended to the name. Next you copy the artwork to that folder. Then include this folder in your Xcode project and you’re done!

Now isn’t that simple? Xcode will generate the texture atlases from the images contained in the “.atlas” folders automagically for you when the app is compiled and ran.

Note: You must be conscious of the size of your images when adding them to your “.atlas” folder. If you add an image larger than 2048×2048 pixels you will get an error, because that is the maximum size of the auto-generated texture atlases.

To do this, find the artwork zip file you downloaded earlier. Inside that zip you will find a folder named TextureAtlases. This folder contains folders for the three types of devices the game will run on (iPad, iPhone, and WidescreeniPhone). Each of these three folders contain “.atlas” folders which have the various sized images for that device. Go ahead and drag the TextureAtlases folder into your project, and make sure to check the “Copy items into destination group’s folder (if needed) before clicking Finish.

For this tutorial you will keep it simple by having a set of texture atlases for each type of device (iPhone 3.5-inch, iPhone 4-inch, and iPads). You could reuse some of the iPhone 3.5-inch texture atlases for the iPhone 4-inch, since the foreground “.atlas” folder is the only one that contains images sized specifically for the iPhone 4-inch device.