Sprite Movement with Actions 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 10 and built for iOS 12.

Project Setup

Open Xcode and create a new Single Game Template

For product name, use IOSSpriteKitActionsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and SpriteKit as Game Technology.

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

Go to the GameScene.sks file and delete the hello World label. Select the Scene and in the Attributes inspector change the X and Y values of the Anchor point to 0.

The Game template added some code to the project we will not need. Go to the GameScene.swift file and delete all code inside the GameScene class. Add the didMove(to:) method to the empty GameScene class.

override func didMove(to view: SKView) {
    let apple = SKSpriteNode(imageNamed: "Apple.png")
    apple.position = CGPoint(x: size.width/2, y: size.height/2)
        
    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.

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 IOSSpriteKitActionsTutorial at the ioscreator repository on github.