Sprite Kit Tutorial: Making a Universal App: Part 1

Whack this Mole!

Whack this Mole!

Note from Ray: Tutorial Team member Nick Waynik has ported this tutorial from Cocos2D to Sprite Kit as part of the iOS 7 Feast. We hope you enjoy!

In this tutorial, you’ll learn how to make your app universal so it works on both the iPhone and iPad, including retina display support.

Specifically, you will create a mole whacking game. Why? Because whacking moles is fun! :]

This tutorial builds on the following Sprite Kit tutorials:

• Sprite Kit Tutorial for Beginners
• Sprite Kit Tutorial: Animations and Texture Atlases
• Sprite Kit Tutorial: How To Drag and Drop Sprites

If you have not reviewed these tutorials already (or have similar knowledge), I recommend you go through them first.

This is a two-part Sprite Kit tutorial series. In this first part, you’ll create the basics of the game – cute little moles popping out of holes. You’ll spend a lot of time thinking about how to organize the art and coordinates so that the game looks good on the iPhone, iPad, and Retina display – and be efficient too!

Planning the Art: Overview

Since you want this app to work on both the normal iPhone 3.5-inch, iPhone 4-inch (iPhone 5), and the iPad, you need to take some time to carefully plan out how the art is going to be set up before you proceed any further.

In order to understand how to properly size and set up the art, you need to understand these topics first:

• Retina Display
• 4-inch iPhone Display
• iPad, iPhone, and Aspect Ratios

So let’s get started!

Retina Display

The difference between a non-retina display iPhone and a retina display iPhone is the retina display can show double the pixels. So (in landscape) instead of the display size being 480×320 px as it is on a non-retina iPhone, it’s 960×640 px on a retina display.

If you haven’t noticed, the iPad comes in non-retina and retina models as well. So the same concept of “double the pixels” also applies with the iPad. With the non-retina iPad the display size is 1024×768 px and with the retina display iPad the size is 2048×1536 px, double the size!

“But wait a minute”, you may think, “wouldn’t doubling the number of pixels break all of the apps that were written assuming the 480×320 for the iPhone or 1024×768 for the iPad display size?” It would have, except when you specify sizes or coordinates in Sprite Kit, you’re actually setting these in when you specify frame sizes in UIKit, you’re actually setting the sizes in a unit called points, not pixels.

On a non-retina display iPhone or iPad, a point is defined to be exactly one pixel. But on a retina display iPhone/iPad, a point is defined to be two pixels. So when you specify a location as (10,10) in points, it will be (10,10) on a non-retina iPhone/iPad, and (20,20) on a retina display iPhone/iPad, so will appear to be at the same relative offset. Cool, eh?

When you’re using Apple’s controls or Core Graphics, Apple has already written the code to make things look nice and crisp on the Retina display.

The only trick comes into play when you use an image. Say you have a 200×200 image in an iPhone or iPad app. If you don’t do anything, on the Retina display it will just scale the image to be 2x larger – which won’t look that great because you aren’t taking advantage of the extra resolution available to you.

So what you need to do is provide another version for all of your images: a normal version, and one that is double the size. If you name your image with double the size with an “@2x” extension, whenever you try to load an sprite with [SKSpriteNode spriteNodeWithImageNamed:…] or similar APIs, it will automatically load the @2x image instead on the Retina display.

So making a Sprite Kit game use the retina display is pretty easy – just add @2X images and you’re done for the most part.

4-inch iPhone Display

With the release of the iPhone 5, there are now more pixels on the screen. Yea for more Pixels! This is definitely a welcomed change that can benefit your games. In this tutorial you will keep it simple and just extend your grass background images to account for this extra space.

The screen pixel dimension is 1136×640 – a 16:9 aspect ratio. In keeping with the points concept mentioned above, the points dimension is 568×320.

iPad, iPhone, and Aspect Ratio

OK so dealing with the retina display is pretty easy, but what about making a universal app that runs on both the iPhone and iPad devices?

Well, it turns out that there is a very annoying thing about making a game that works on both the iPhone and the iPad – the aspect ratio between the devices is different!

The iPhone is 480×320 or 960×640 – a 1.5 aspect ratio. However, the iPad is 768×1024 or 1536×2048 – a 1.33 aspect ratio.

This means that if you have an image that fills up the entire background of the non-retina iPad (768×1024) and want to re-use it for the iPhone too, it’s not going to fit exactly. Say you scale it down so it fits the width of the iPhone (multiply by 0.9375): you’ll get 720×960, so there will be extra stuff to the side that will get cut off!

This makes things kind of annoying, because not only do you run into problems with background images, but the aspect ratio also makes it difficult to use the same coordinates across devices.

There are several strategies for how to deal with this, here are a few I’ve seen/heard/used (feel free to chime in with any of your own solutions in the comments):

• Have a “playable area” in the middle of the screen that is the size of the 3.5-inch iPhone retina display (960×640). This will leave a little extra are around the edges – you can just cover that with a background and the player probably won’t even notice. This allows you to easily convert coordinates between devices and re-use. This is what we’ll be doing in this Sprite Kit tutorial.
• You can make the iPad have a similar aspect ratio to the iPhone if you take 32 point margins on the left and right, and 64 point margins on the top and bottom with the “main content” centered inside 1024×768 points. If you make your content to fit within the 1024×768 points box, you can scale down images for each device from there.
• Remember there is a difference between pixels and points. Start out by using images created for the iPad retina display (1536×2048 px). You can then resize the images by half to produce the images for the non-retina display iPad. This will ensure your images are sharp and crisp!