Introducing SpriteKit

SpriteKit is Apple’s 2D game engine—a rendering engine built on top of OpenGL. It was introduced with iOS 7, and each subsequent release has brought great additions to the framework. With the use of textured sprites, a built-in physics engine, and the very powerful SKAction class, you can very quickly build functional 2D games.

Introducing SpriteKit

SpriteKit has built-in editors for scenes and particles, a camera node since the release of iOS9, and built-in support for tilesets since the release of iOS 10. With these new additions, SpriteKit is quickly becoming a powerhouse for creating 2D games.

Below is an image of the built-in scene editor, with a label, a colored sprite, and a textured sprite.

Introducing SpriteKit

Rendering Loop

SpriteKit, like most game engines, uses a rendering loop to render and update the screen. The rendering loop goes through the following steps in rendering each scene:

  1. Update the scene and its objects
  2. Evaluate actions
  3. Simulate physics
  4. Apply constraints
  5. Render the scene

Each of these steps has a corresponding method you can hook into to apply additional logic. The render loop methods are as follows:

  1. update
  2. didEvaluateActions
  3. didSimulatePhysics
  4. didApplyConstraints
  5. didFinishUpdate

For example, if you wanted to manually move objects in your scene, then the update method would be what you would use. Or if you had objects that were being affected by actions or physics, you could tie into the corresponding methods to make sure those actions and the physics simulation are applied before whatever changes you make.

SKNode

The SKNode class is the fundamental building block of SpriteKit. All of your onscreen assets will be an SKNode or subclass thereof.

The SKNode class does not draw any visual assets itself. Its primary role is to provide baseline behavior that other classes implement. For example, the SKScene class is the root node in a tree of SKNode instances and is used to hold sprites and other content that needs to be rendered.

The rendering and animation are done by an SKView instance. The view is placed inside a window and an SKScene instance is added to it, and that scene will be rendered and animated as long as the view is active. You can use a single SKView instance in your window and switch between different scenes at any time.

The framework defines a number of other SKNode subclasses. The most common one used within a scene is the SKSpriteNode class. The SKSpriteNode class can be drawn either as a rectangle with an image mapped onto it with SKTexture, to create a sprite, or as a colored, untextured rectangle. You’ll most often use textured sprites, because this is how you will bring your game’s artwork to life.

Other important types of nodes include:

  • SKShapeNode, which renders a shape defined by a Core Graphics path
  • SKVideo, which displays video content
  • SKLabel, which displays a text label

We’ll look at several of these subclasses of SKNode later in this series.

SKAction

The SKAction class is a very powerful class that is used to bring your nodes to life. SKAction can change your node’s properties over time, for example by moving, scaling, or rotating them. You can chain actions together in a sequence, execute many actions together as a group, and repeat them in a loop. You can also use SKAction to run a custom block of code. For example, suppose you wanted to print out the coordinates of a node after it has moved. You could run a custom block of code within the SKAction to do just that.

SpriteKit Features

Physics

SpriteKit has a built-in physics engine that makes handling complex physics scenarios a breeze. Built on top of the popular Box2D framework, it allows you to respond to collisions and contact events, apply forces and gravity, and build very complex physics simulations using joints, such as pins and springs. You can use the scene editor to visually add physics to the nodes, or you can add physics programmatically.

Coordinate System

In SpriteKit, the coordinate (0,0) is located at the bottom left of the screen instead of the top left, which you may be used to if you’ve worked with Flash, Corona, HTML5 Canvas, and many other game frameworks. Having the origin at the bottom left is an OpenGL convention, and SpriteKit follows it because SpriteKit uses OpenGL under the hood.

Particle System

SpriteKit has a very powerful particle engine which can be used to simulate particle systems such as fire and smoke. There is also a built-in particle editor where you can visually lay out particle systems. If you prefer to stick with code, you can program these systems from the ground up using nothing but code.

Below is an image of the particle editor with a fire-like particle system.

Introducing SpriteKit

Tiles

SpriteKit has a number of classes dedicated to building tiled layouts. Using tilemaps offers better memory usage than using a very large single image. The tiles can be arranged in rectangular, hexagonal, or isometric grids.

Below is an image of a tile map node using a rectangular grid.

Introducing SpriteKit

Conclusion

These are a few of the highlights of the SpriteKit engine. I would suggest reading the SpriteKit overview to learn more about what it has to offer. To learn more about how to get started with SpriteKit, you should also check out Davis Allie’s post here on ThemeKeeper Tuts+.

  • Introducing SpriteKit
    iOS
    SpriteKit From Scratch: Fundamentals
    Davis Allie

Also, check out our SpriteKit courses! These will take you through all the steps of building your first SpriteKit game for iOS, even if you’ve never coded with SpriteKit before.

  • Introducing SpriteKit
    Swift
    Code a Side-Scrolling Game With Swift 3 and SpriteKit
    Derek Jensen
  • Introducing SpriteKit
    Game Development
    Game Development With Swift and SpriteKit
    Derek Jensen