SpriteKit is, at least for me, one of the most remarkable libraries in Cocoa (very useful in 3D configurator processes). It makes the 2D feeling easy and often delivers very good results with little effort. In this article we will break down the components of SpriteKit and give you a short introduction.
What is SpriteKit?
SpriteKit, introduced alongside iOS 7, provides developers with a framework for 2D visualization and animation for iOS and OS X. SpriteKit fits into iOS alongside two other animation frameworks: core animation and scene kit. With Core Animation is too easy for games and SceneKit is intended for more advanced 3D games, SpriteKit is very well suited for 2D games. SpriteKit rendern each frame with content and simultaneously optimizes the rendering, animation and memory in the frame. It is suitable for a variety of 2D games with support for sprites, shapes, texture, text, sound, physics simulation and video. SpriteKit also supports special effects for its content such as cropping and image editing.
In short, SpriteKit provides complete rendering and infrastructure that covers all low-level processes within OpenGL and allows developers to focus on creating great gameplay and design.
The SpriteKit Life-Cycle.
Like many Cacoa libraries, SpriteKit has a built-in life cycle and processing loop. In SpriteKit, this loop allows you to create and stack individual frames such as tiles within a viewport that moves between them. The life cycle is as follows:
The viewport.
A window is created as a viewport and container for scenes in the game. Each window usually contains a specific section of the game. For example, you can have the game in one window, a score screen in another, and purchases in a third. To create a typical game windows, the application first creates an SKView object for the game, which can then be placed in a window. The SKView will then be able to receive scenes to render and animate the content. In many ways, SKView acts as a scene manager, letting scenes through and preparing the next scene while the current one is playing.
Typically at this stage, a controller uses the didMoveToView and update methods to assign and update things such as stored status, score, and other global data exchanged between scenes.
Create a scene.
Scenes are created as frames within the window. These frames can be positioned along a grid to create a scrollable and moving background between which objects move. These individual scenes are a collection of SKScene objects. These scenes have finite definitions and lifetime, making object creation in memory easier to calculate, animate, and manage.
While one scene is visible, all animations and logic are executed continuously until the scene is rendered. This compartmentalization allows complex interactions and many different aspects of the design to be flexible and abundant, while making it easy for the application to allocate resources and then clean them up once the scene is finished and the next begins.
SKScene provides us with the didEvaluateActions and didSimulatePhysics methods to update the properties of the game according to the interactions within the scene.
Add nodes.
Within each scene there is a collaboration of different nodes. Nodes are simply objects that serve as building blocks for all content and together determine how content is tagged and rendered. The SKScene class is actually a decendant of the SKNode class and serves as a parent node with child nodes included. Similar to DOM nodes on the web, SKNodes have similar properties to their children, similar to DOM nodes on the web that have inherited certain CSS attributes. The SKNode class itself does not draw anything, but manages the properties and state of the child nodes. This make it possible to change the rendering by simply applying different properties to nodes or changing their order or position.
As an example of how nodes are inherited, see the image of the smiley below. The face is made up of four nodes – a yellow circle as parent node, with two eyes and a mouth as separate node. When the patent node is rotated 45 degrees, the child nodes rotate accordingly. However, if the background color of the parent node changes, the child nodes are not affected.
Properties, attributes and textures of nodes.
As already mentioned, the SKNode class itself draws nothing. Nodes are simply objects with manipulable properties. This may be a bit confusing at first, as these properties can be manipulated to create a graphic, but it is important to realize that a node has no shape or appearance by default.
Textures are often used to give a node a visual purpose. In many scanarios, a texture is created using image assets to render sprites. This makes these images reusable and easy to modify by simply updating them, Textures can also be created at runtime with Core Graphics or by simply changing the properties of a node.