Moving Sprites with Actions in Sprite Kit

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 postion 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.

Update: July 23, 2014. The rewritten version in Swift for iOS 8 and Xcode 6 is available here.

Open Xcode and create a new SpriteKit Game. For product name, use SpriteActionsTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices.

First we remove some code from the Sprite Kit template. In the initWithSize remove all code inside the if(self = [superinitWithSize:size]) block. Also remove the touchesBegan:withEvent method. Next we need to add a sprite to the project. Download the following image, unzip it and in the File menu choose "Add Files to SpriteKitTutorial". Select the image and make sure you select "Copy items into destinations group's folders"


Inside the initWithSize method in Scene.m add the following lines

SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"owl"];
sprite.position = CGPointMake(self.size.width/2, self.size.height/2);

[self addChild:sprite];

Build and Run the Project, the sprite is displayed to the center of 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 inintWithSize method

SKAction *moveBottomLeft = [SKAction moveTo:CGPointMake(100,100) duration:2.0];
[sprite runAction: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 posistion you can use the moveBy variant. Change the previous two lines into

SKAction *moveRight = [SKAction moveByX:50 y:0 duration:1.0]|
[sprite runAction:moveRight];

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

SKAction *moveBottom = [SKAction moveByX:0 y:-100 duration:3.0]
SKAction *sequence = [SKAction sequence:@[moveRight, moveBottom]];

[sprite runAction:sequence];

Build and Run, and 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 this two lines.

SKAction *reversedMoveBottom = [moveBottom reversedAction]
SKAction *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 runAction line and add the following lines

SKAction *endlessAction = [SKAction repeatActionForever:sequence]
[sprite runAction:endlessAction];

Build and Run, the action will repeat endlessly.

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