Chapter 1. An Introduction to Sprite Kit

In this book we will be discussing about iOS game development using Sprite Kit. We will be taking a fun approach and shall make an actual 2D platform game on the iPhone in the process. We are going to develop a 2D (two dimensional) game; a game which relies on only two coordinates. Some famous 2D games include Mario, Hill Climb Racing, Angry Birds, Cut the Rope, and so on.

A 2D game only deals with two dimensions along x and y axes (left/right and up/down) but not along the z axis (forward/backward). So basically, players cannot rotate or move the camera freely in a 3D space to view objects from other angles and perspectives. Although there are exceptions such as 2.5D games; we will be talking about that in later chapters. So, let's not keep things waiting and dive into the book.

What's new in iOS 8?

You might be familiar with Apple's mobile operating system, popularly known as iOS; the latest version of this operating system is iOS 8. This version has a lot of new additions over its predecessor, iOS 7. Some of the additions in this version are the introduction of the Swift programming language, loads of new API's, and most importantly, improvements in Sprite Kit and its peripheral frameworks.

In this book, we will be using the Swift programming language over Objective-C. Although, you can use Sprite Kit with either Objective-C or Swift, Swift offers much easier syntax, and has a simpler learning curve.

Getting to know Swift

Swift is Apple's entirely new multi-paradigm programming language for developing applications on Apple devices. Swift has been in development for 4 years, and was announced in 2014 at the Worldwide Developer Conference (WWDC). Swift is both, a scripting and programming language; it has the ability to return multiple return values. Swift takes different constructs that are loved from many languages including Objective-C, Rust, Haskell, Ruby, Python, C#, CLU, and more. It has type safety feature that is, to prevent you passing string as int thus minimizing possible errors in your code.

We will be discussing more about Swift, as and when required, in the further topics covered.

Getting to know Sprite Kit

Sprite Kit is a framework from Apple, meant for developing 2D games for iOS devices. It is one of the best ways to make games for iOS devices. It is easy to learn, powerful and fully supported by Apple, which makes it more reliable to use than third-party game development engines.

Sprite Kit was introduced in iOS 7 and allowed easy, fast game development; it has similarities with Cocos2d, which is a popular library for game development. If you are somewhat familiar with Cocos2d, Sprite Kit will be a breeze for you.

Sprite Kit provides various functionalities that are useful for games, such as graphics rendering, animation utilities, sound playback, a particle system, and physics simulation. In Sprite Kit, every node will have a property name and physics body, which can consist of arbitrary shapes such as rectangles, polygons, circles, paths, and so on. Sprite Kit provides a richer particle system, where any aspect can be changed by code during the animation. In Sprite Kit's particle system, you can also add custom actions to the particles created. In addition, Xcode provides built-in support for Sprite Kit so that you can create complex special effects and texture atlases directly in Xcode. This combination of framework and tools makes Sprite Kit a good choice for games and other apps that require similar kinds of animation.

Because Sprite Kit supports a rich rendering infrastructure, and handles all of the low-level work to submit drawing commands to OpenGL, you can focus your efforts on solving higher-level design problems and creating your game functionality.

As Sprite Kit is a native framework of iOS, it provides in-built support for using the particle effects, texture effects, and physics simulations. The performance of Sprite Kit is better than other third-party frameworks/gaming engines, as it is a native framework.

Advantages of Sprite Kit

The main advantage of Sprite Kit is that it's built into iOS. There is no need to download any other third-party libraries or depend on external resources to develop 2D games. Other iOS APIs such as, iAd, In-App purchases, and so on, can be easily used without banking on extra plugins. You don't have to get familiar with any new programming language, the languages supported for Sprite Kit can also be used for app development on iOS. The best thing of all is that it is free, you get all the functionalities of Sprite Kit at no cost. You can run your game on both Mac and iOS without much effort, all you need to do is change its controls.

Elements of Sprite Kit

Now we are going to discuss some elements of Sprite Kit, which are essential for game development. A game made in Sprite Kit consists of many scenes which are made of nodes, and the functioning of a node in a scene is determined by actions.

Scenes

A level or environment in a game is termed as a scene. We make scenes as per our requirement, such as menus, levels, and so on. So, there are different scenes for different levels and also for different menus in a game. It's like a canvas where you position your elements.

A scene in Sprite Kit is represented by an SKScene object. A scene holds sprites and other contents to be rendered. To switch scenes, we can use the SKTransition class.

Nodes

Nodes are fundamental building blocks for all content in a scene. The SKScene class is a descendant of the SKNode class, so a scene is a root node. The SKNode class does not draw anything on scene by itself; we can think of it as a base class for other node classes. There are node subclasses as follows:

SKSpriteNode: This can be used for drawing textured sprites, playing video content, and more
SK3DNode: This can be used for rendering a Scene Kit scene as a 2D textured image
SKVideoNode: This can be used for playing video content
SKLabelNode: This can be used for rendering a text string
SKShapeNode: This can be used for rendering shape, based on a core graphics path
SKEmitterNode: This can be used for creating and rendering particles
SKCropNode: This can be used for cropping child nodes using a mask
SKEffectNode: This can be used for applying a core image filter to its child node
SKLightNode: This can be used for applying lighting and shadows to a scene
SKFieldNode: This can be used for applying physics effects to a specific portion of the scene

Actions

An action tells a node what to do and allows you to perform different things, such as:

Moving nodes in any direction
Making any node follow a path
Rotating nodes
Scaling of nodes
Showing or hiding a node
Changing the content of a sprite node
Playing sound
Removing nodes from a scene
Performing action on a child's node, and so on

To create a run action, first, create the action using the particular action class, configure the properties for the created action, and call a run action by passing action object as a parameter. When the scene processes the node, the actions of that particular node will be executed.

Features of Sprite Kit

Sprite Kit provides many features to facilitate the development of a game. These features can be used for enhancing the experience as well as performance of the game. Let's discuss them in brief.

Particle editor

This feature was introduced in iOS 7. Particle editor is used to add special effects in a game, like adding a mist effect in a game scene. Here, we can customize many things, such as:

The number of particles
Limit of particles allowed
The color of particles
The size of a particle
The life of a particle
The location of a particle in a scene, and so on

Texture atlas generator

Texture atlas generator combines all image files into one or more large images, in order to improve performance. We will discuss this in detail in the later chapters. It is recommended to use a lesser number of images to reduce draw calls (number of images rendering on a scene).

Shaders

Shaders were introduced in iOS 8. They are used to produce a variety of special effects; they calculate rendering effects on graphic hardware with a high degree of flexibility, for example, we have seen ripple effects in many apps/games. Wherever a user touches the screen, a ripple effect will be produced.

In Sprite Kit, shaders are represented by the SKShaderNode class object.

Lighting and shadows

Lighting and shadows were introduced in iOS 8. These effects are produced using the SKLightNode class object. The SKLightNode object can:

Spread a lighting effect at any desirable position on the scene
Add lighting in any sprite
Support colors and shadows

It's just a type SKNode, so we can apply any property that we apply to any SKNode.

Physics

Simulating physics in Sprite Kit can be achieved by adding physics bodies to the scenes. A physics engine has the sole purpose of moving objects around in a simulated world. The physics bodies take the properties of objects, such as mass, shape material, current trajectory, and so on, and calculate a new position for all those objects.

Every object on the Sprite Kit game scene will have a physics body. A physics body object is connected to a node on the node tree of a particular scene. The scene will simulate the effect of forces and collisions on those particular physics bodies that are connected to the node tree, whenever the scene computes a new frame of animation. We can apply a particular physics property on those nodes using their particular physics properties such as gravity, mass, force, friction, and so on.

The game loop

Following is a frame life cycle diagram:

At the start, the update function is called to where we set up the logic of the game. After that, the scene evaluates the actions. After the actions are evaluated, we get a callback. After that, we set up physics, if any. When the physics simulation is finished, we get another call with didSimulatePhysics. Then, we apply constraint and get another callback, didApplyConstraints. The last callback method is didFinishUpdate; we get it just before frame is completed and view is ready to render. Finally SKView renders the scene; the frame is complete and it continues 60 times per second.

Setting up a project

We have discussed many things about Sprite Kit, now it's time to see a project in action and gain some practical knowledge.

The Hello World project

We'll need to create a new project to build Hello World. An Xcode project organizes everything your app needs into one convenient place. Let's begin by creating a brand new game project in Xcode by carrying out either of the first two points, and then continuing as shown in the list:

Click on Create a new Xcode project on the welcome screen:
Instead, you can also select File | New | Project… from the file menu:
Select Game from the new project selection window:
The next window asks you to customize options for your project. Fill out the fields as shown in the following screenshot:
- Product Name: It is the name of the game
- Organization Name: If you are an individual, then your name, or the name of the organization
- Organization Identifier: A unique identifier of your organization
- Bundle Identifier: It is a default ID generated automatically using organization identifier and product name.
- Language: The programming language you are using, that is, Objective-C or Swift
- Game Technology: The game framework being used, like Scene Kit, Sprite Kit, Metal, and so on
- Devices: The devices you want your game to run on; iPad, iPhone, or both
- These fields can be anything you want
Press Next and Xcode will ask where to save your new project. Choose a directory and then click on Create.
After saving, it should open Xcode to your brand new Hello World project, specifically to the project properties screen. On this screen, unselect the Portrait option under Device Orientation. This file will be automatically saved, so you won't have to do anything further:

Result

Run the default game project by pressing ⌘ + R on your keyboard, or by clicking on the little play button in the top left corner. If a simulator isn't present, Xcode will download one for you before launching the app. The result will look as follows: