Introduction to Sprite Kit

Login to Access Code

Sprite Kit is, for me at least, one of the most fun libraries in Cocoa. It makes 2D feel simple and for little effort often returns tremendous satisfaction. In this post, we will break down the individual components of Sprite Kit before getting in to creating a game in our next posts.

What is Sprite Kit?

Launched alongside of iOS 7, Sprite Kit provides developers with a framework for graphics rendering and animation in 2D for both iOS and OS X. Sprite Kit fits along side of two other animation frameworks in iOS: Core Animation and Scene Kit. While Core Animation is too basic for games, and Scene Kit is for more advanced gaming such as 3D, Sprite Kit handles 2D gaming very well. Sprite Kit renders each frame with content while optimizing the rendering, animation and memory in the frame. It is well suited for many 2D games providing support for sprites, shapes, texture, text, sound, physics simulation and video. Sprite Kit also supports special effects for your content such as cropping and image manipulation.

In short, Sprite Kit provides feature complete rendering and infrastructure that handles all of the low-level processes within OpenGL, allowing developers to focus on creating great gameplay and design.

The Sprite Kit Life Cycle

Like many Cocoa libraries, Sprite Kit has a built-in lifecycle and processing loop. In Sprite Kit, this loop allows for individual frames to be created and stacked like tiles within a viewport that moves between them. The lifecycle goes as follows:

Sprite Kit Life Cycle

The Viewport

A window is created as a viewport and container for scenes of the game. Each window usually contains a specific section of the game. For example you might have the playable game in one window, a score screen in another, and purchases in a third. To create a typical game window, the application first creates an SKView object for the game which can then be placed within a window. The SKView is then able to receive scenes to render and animate the content within. In many ways SKView acts as a scene manager, allowing scenes to pass through it and preparing the next scene as the current one is being played.

Typically a controller would use the didMoveToView and update methods in this phase to allocate and update things like saved state, score, and other global data that is shared between scenes.

Creating a Scene

Scenes are created to act as frames within the window. These frames can be positioned along a grid to create a scrollable and moving background that the objects transition between. These individual scenes are a collection of SKScene objects. These scenes have finite definitions and lifetime, making object creation easier to calculate, animate and manage in memory. While a scene is visible, all animations and logic are continually executed until the next scene is rendered. This compartmentalization allows for complex interactions and many various aspects of design to be flexible and abundant, while remaining easy for the application to allocate resources to and then purge once the scene is complete and the next one begins.

SKScene provides us with the didEvaluateActions and didSimulatePhysics methods to update properties of the game according to interactions within the scene.

Adding Nodes

Within each scene is a collection of various nodes. Nodes are simply objects that serve as the building blocks of all content, collectively working together to determine how content is drawn and rendered. The SKScene class is actually a descendant of the SKNode class, serving as the parent node with child nodes contained within. Much like DOM nodes on the web, SKNodes have similar features, properties and inheritance. Nodes share state and pass down properties to their children in much the same way as DOM nodes on the web have inheritance of certain CSS attributes. The SKNode class by itself does not draw anything, but instead manages properties and state of its child nodes. This allows for rendering to change simply by applying different properties to nodes or changing their order or position.

As an example of Node inheritance, look at the figure of the smiley face below. The face was made a out of four nodes: a yellow circle as the parent node, with two eyes and a mouth each as their own node. If the parent node is then rotated 45 degrees, the child nodes also rotate to match. However, if the parent Nodes background color were to change, the child nodes would not be effected.

node tree example

Properties, Attributes, and Textures of Nodes

As stated previously, SKNode class itself does not draw anything. Nodes are simply objects with properties that can be manipulated. This may be slightly confusing at first, as those properties can be manipulated to create a graphic, but it is important to recognize that by default a Node has no shape nor appearance.

To give a Node visual purpose, textures are often used. In many scenarios, a texture is created using image assets to render sprites. In this way, these images become reusable and easy to modify by simply updating image assets. Textures can also be created at runtime with Core Graphics or by simply modifying a Node’s properties.