Sprite Movement with Actions in Sprite Kit iOS Tutorial

The mechanism to animate sprites with Sprite Kit is to make use of actions. You can apply a type of action to a node and Sprite Kit automatically updates the position until the action completes. Better yet, you can also chain actions together to create movement combinations easily. In this tutorial we will add some actions to a sprite. This tutorial is made with Xcode 8.3 and built for iOS 10.3

Project Setup

Open Xcode and create a new Single Game Template

For product name, use SpriteKitActionsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

We need a sprite for this tutorial so download our image and add it to the Assets catalog.

Go to the GameViewController.swift file and change the viewDidLoad method to

override func viewDidLoad() {
    super.viewDidLoad()
        
    let scene = GameScene(size: CGSize(width:750, height: 1334))
    scene.scaleMode = .aspectFill
        
    let skView = self.view as! SKView
    skView.presentScene(scene)
}

The gameScene scene is presented. Go to the GameScene.swift file. Here is the GameScene class defined. Delete all code and add the didMove(to:) method.

override func didMove(to view: SKView) {
    let apple = SKSpriteNode(imageNamed: "Apple.png")
    apple.position = CGPoint(x: size.width/2, y: size.height/2)
        
    self.addChild(apple)
}

The apple image is assigned to the apple variable, it is centered to the screen and added to the current scene. Build and Run the project, the apple is centered to the screen.

To make this sprite move we need to create a move action and run this action on our sprite. Add the following lines to the end of the didMove(to:) method

let moveBottomLeft = SKAction.move(to: CGPoint(x: 100,y: 100), duration:2.0)
apple.run(moveBottomLeft)

Build and Run, the sprite will move to the bottom-left with a duration of two seconds.

bottomleft-spritekit-simulator

The moveTo:duration method make use of absolute positions. To move the sprite relative of the current position you can use the moveBy variant. Change the previous two lines into

let moveRight = SKAction.moveBy(x: 50, y:0, duration:1.0)
apple.run(moveRight)

This will move the sprite 50 points to the right. It is also possible to chain actions together using a sequence. Delete the run line and add the following lines.

let moveBottom = SKAction.moveBy(x: 0, y:-100, duration:3.0)
let sequence = SKAction.sequence([moveRight, moveBottom])
        
apple.run(sequence)

Build and Run, you will see the sequence action will run one action after another.

Some actions can be reversed by calling reversedAction so the new actions is the opposite of the older action. Remove the sequence line and add these two lines.

let reversedMoveBottom = moveBottom.reversed()
let sequence = SKAction.sequence([moveRight, moveBottom, reversedMoveBottom])

Build and Run, you will see the moveBottom action is followed by the reversed action. It is also possible to repeat actions a number of times or even unlimited. Remove the run line and add the following lines

let endlessAction = SKAction.repeatForever(sequence)
apple.run(endlessAction)

Build and Run, the action will repeat endlessly.

You can download the source code of the SpriteKitActionsTutorial at the ioscreator repository on github.