SpriteKit Basics

5 min readJul 6, 2017

SpriteKit is a framework that helps you create animated 2D scenes and effects. Every scene in SpriteKit is made up of nodes. The scene object (SKScene) is the root node and any additional content in the scene are nodes (SKSpriteNote) built off of the root node.

Let’s get to it!

Open up a new Xcode project and select Game as the template. If you look in the project’s files, you will see that a GameScene and GameViewController have already been set up for you by Apple. Run the project and you will see Apple has already provided a cool “Hello, World” 2D animation when you click and drag on the simulator.

[Brief Aside] Definitions:

You might notice on the bottom of the simulator the words “nodes” and “fps.”

Nodes: building blocks of content in the SpriteKit scenes. A node’s position is determined in relationship to its parent and to its anchorPoint. We will delve deeper into this below.

fps: “frames per second”

GameViewController’s root view is an SKView, which is a view that contains a SpriteKit scene. Interestingly, a SpriteKit point of (0, 0) is on the bottom left corner of the screen. Note that this is different from point (0,0) in UIKit, which is the top left corner.

The position of a node in an SKView is determined by two properties: anchorPoint and position. According to Apple’s documentation, “A sprite node’s anchorPoint property determines which point in the frame is positioned at its position.” If not explicitly set, the anchorPoint is set to (0.5, 0.5) by default. This means that the point in the frame where the node is positioned is half the height and half the width of the frame; therefore, it is in the center of the frame.

I found the image below from Apple’s documentation to be helpful in understanding the anchorPoint.

A node’s position property determines the amount by which the node is moved in relation to its anchorPoint.

In the code above, greenGrass node’s anchorPoint is defaulted to (0.5, 0.5). I set the dog’s anchorPoint to (0.5, 0.5) as well. Since the dog node is a child of greenGrass, it means that the dog node’s anchorPoint should be half of greenGrass’s height and width. Therefore, the dog node’s anchorPoint is in the middle of greenGrass’s frame.

Makes sense! Now lets set the node’s position property. The position property adjusts where the node is positioned relative to its anchorPoint.

Specifically, CGPoint(x: 50, y: -50) indicates that the node’s horizontal offset is 50% of its parent’s (greenGrass) width and its vertical offset is 50% of greenGrass’s height. A positive X value indicates movement to the right and a negative value moves the node to the left. Similarly, a positive Y value moves the node up and a negative Y value moves the node down.

If you are still confused, I found this post very helpful in understanding a node’s anchor point and position.

An Example:

Head over to GameScene.swift; you will see the code Apple provided for the “Hello,World” animation. You can go ahead and erase all of that as we will be writing in new code.

As you can see from the below, I created a new node by using the name of an image in my project’s assets file. I left the default values for the node’s anchorPoint (0.5, 0.5) and position (0, 0).

Great. We have a node that is in the center of the screen — now lets add some animation to it! As you can see from the below, all you have to do is initialize an SKAction and pass that property into the .run(action) func provided by Apple. I decided to move the node by half the frame’s width and half the frame’s height.

Cool! Let’s add in another node. Just like we did before, we can create another node using an asset’s image name. Instead of leaving this node’s position as the default position, let’s have it slightly off centered. You can do this but setting the node’s .position property to a GCPoint (as shown below). Remember, the position you give it is in relation to the anchorPoint.

As you can see, I have changed the dog’s moveAction slightly from the previous demo; it is now moving directly to the owner’s position. After it reaches the owner, I remove it from its parent (effectively removing it from the screen). Check it out below!

Two things to note: 1) you may provide a sequence of actions on any given node and 2) the actions do not have to be done only once — you can set the action to repeatForever or repeat and pass in an Int for the number of times you would like it to be repeated. Example below: