5,159 reads

Swift SpriteKit Basics

by Jeremy JacobsonMarch 11th, 2017

Too Long; Didn't Read

Want to build 2D games on <a href="https://hackernoon.com/tagged/ios" target="_blank">iOS</a>, macOS, tvOS, and <em>even </em>watchOS? SpriteKit gives you everything you need from rendering sprites to physics simulation.

Want to build 2D games on iOS, macOS, tvOS, and even watchOS? SpriteKit gives you everything you need from rendering sprites to physics simulation.

Everything in a SpriteKit game lives in an instance of the SKScene class. This object is the root of what is called the node hierarchy, a collection of nodes with parent-child relationships. For example, you might have an effects node, which is a child of your player node and that player node is child of the root node, the scene.

All of this fancy hierarchy stuff works because every SpriteKit class is inherited from SKNode. This class contains the logic for constructing the parent-child relationships of nodes in the scene.

let scene = SKScene()let player = SKSpriteNode(imageNamed: "player")scene.addChild(player)

The addChild call places our player node in the scene. As you might have noticed, our player is an SKSpriteNode, another valuable class that you will use countless times in a SpriteKit game. As the name suggests, SKSpriteNode pulls a sprite from your asset catalog, in this case one named "player" and creates a node.

Since SKSpriteNode inherits from SKNode, we get a property on our sprite called position, which is a CGPoint (a simple struct that has two properties of its own, x and y). The position property defaults to the point (0.0, 0.0), which is relative to the anchorPoint of the parent node. Let’s break all this down.

First of all, it is important to note that in SpriteKit 0 on the y-axis is at the bottom-left of the screen, unlike in UIKit or AppKit, where 0 on the y-axis is at the top-left.

x and y-axes in SpriteKit

The scene has an origin point which is determined by its anchorPoint, a percentage of its height and width. Let’s say our scene is as big as our screen, which happens to be 480 pixels in height and 320 pixels in width, and the anchorPoint is (0.25, 0.75). This means that the scene’s origin is at 25% of the width and 75% of the height, in exact terms, 0.25 * 320 = 80 and 0.75 * 480 = 360, so the origin is (80, 360).

In the example above, we add our player node to the scene without setting the player’s position, so it will be at (0, 0), relative to the scene’s origin. Therefore on the screen we’ll see the player node at the coordinates (80, 360). For more practical purposes, let’s set the scene’s anchorPoint to (0.5, 0.5) (the default anchorPoint for a scene created with Xcode’s SpriteKit game project).

let scene = SKScene(size: CGSize(width: 320, height: 480))scene.anchorPoint = CGPoint(x: 0.5, y: 0.5)let player = SKSpriteNode(imageNamed: "player")scene.addChild(player)

Now when we place our player node, the player will be at (160, 240) on the screen. Then we’ll use what’s called an SKAction to move our player from its current position to a new on, for example, 80 pixels to the right and 120 pixels down, taking a total of 2 seconds.

let moveAction = SKAction.move(byX: 80, y: -120, duration: 2)player.run(moveAction)

Calling the run method on our player node with the move action will tell SpriteKit to update the node’s position over the course of 2 seconds, animating it across the screen.