Book Image

Getting Started with SpriteKit

By : Jorge Jordán
Book Image

Getting Started with SpriteKit

By: Jorge Jordán

Overview of this book

SpriteKit is Apple’s game engine to develop native iOS games. Strongly boosted by the Apple Inc., Cupertino, it has increased in popularity since its first release. This book shows you the solutions provided by SpriteKit to help you create any 2D game you can imagine and apply them to create animations that will highlight your existing apps. This book will give you the knowledge you need to apply SpriteKit to your existing apps or create your own games from scratch. Throughout the book, you will develop a complete game. The beautiful designs implemented in the game in this book will easily lead you to learn the basis of 2D game development, including creating and moving sprites, and adding them to a game scene. You will also discover how to apply advanced techniques such as collision detection, action execution, playing music, or running animations to give a more professional aspect to the game. You will finish your first game by learning how to add a main menu and a tutorial, as well as saving and loading data from and to the player’s device. Finally, you will find out how to apply some mobile games techniques such as accelerometer use or touch detection.
Table of Contents (13 chapters)
Getting Started with SpriteKit
About the Author
About the Reviewer

Working with screen resolutions

As mentioned previously, iOS games can be executed on devices with different resolutions and screen sizes. This is the reason why it's important to keep in mind the following table, which shows the different families of resolutions and their required file names:


iPhone 6 Plus

iPhone 6

iPhone 4s, iPhone 5

iPad Retina



iPhone 6 Plus, iPhone 6s Plus

iPhone 6, 6s

iPhone 4s

iPhone 5, 5C, 5S

iPod Touch 5G

iPad Air, Air 2, iPad mini Retina

iPad, iPad 2, iPad mini


1242 x 2208

750 x 1334

640 x 960

640 x 1136

1536 x 2048

768 x 1024

File name

[email protected]


[email protected]


[email protected]

Note that we are showing the devices supported by iOS 9, which is the version that we are using for development purposes.

The above table corresponds to the five resolution families that are available at the time of writing this chapter. In the table, you will see the different devices of each family, their resolutions, and the names that you will need to specify for each of them.

The filenames are composed of a prefix (the filename) and a suffix that can be @3x, @2x~iphone, @2x, @2x~ipad, or @1x (in this case, the suffix can be omitted), depending on the devices that you want the game to be available on.

Providing the needed files will not only result in a better resolution, but also will avoid the programmatic upscaling or downscaling of the image, thus improving the game's performance. Upscaling an image will result in smudgy-looking images but, on the other hand, downscaling images will allow you to reuse a high-resolution image for lower resolution devices. However, this approach is not recommended due to the waste of memory that a non-retina display could lead to.

From now on, when we add a new image to the game, we will need to include the corresponding @2x, @2x~iphone, @2x~ipad and @3x files, if available. Let's add the required images by performing the following steps:

  1. In the project navigator, right-click on Art and select Add Files to "InsideTheHat"….

  2. You'll find [email protected], rabbit@2x~ipad.png, [email protected], [email protected], background@2x~ipad.png, and [email protected] in the 7338_01_Resources folder. Select these four files and click on Add.

You can now run the game on other devices and check whether the resolution is maintained in all of them.

Another way of including new image files in a project is by taking advantage of the assets catalog that we mentioned at the beginning of the chapter. If you take a look at this folder, you will see something that is similar to the following screenshot:

Here, you can create a New Image Set by clicking on the + button and filling the 1x, 2x, and 3x slots with the corresponding images.