Moving Sprites along Path with Sprite Kit

With Sprite Kit you can create actions to move sprites along a predifined path. This path can be anything like, for example a line, square or circle. In this tutorial we will move a sprite along some different paths.

Open Xcode and create a new SpriteKit Game. For product name, use FollowPathSpriteKitTutorial 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 will add the following section to the Scene.m file.

@interface MyScene ()

@property (nonatomic) SKSpriteNode *giraffe;


The SKSpriteNode property is for our convenience, because we will refer to it a couple of times in our application. Next, we will need an image to use for the sprite movement, so download the image of the giraffe here. Unzip it and add it to the project. Remove the touchesBegan:withEvent method as we don't need user input for our application. Next, in the initWithSize method remove all lines between the braces after the if (self = [super initWithSize:size]) line. Inside the braces add the following lines of code.

self.backgroundColor = [SKColor whiteColor];

self.giraffe = [SKSpriteNode spriteNodeWithImageNamed:@"giraffe"];
self.giraffe.position = CGPointMake(100, self.frame.size.height/2);
[self addChild:self.giraffe];

We change the background color to white and we position our giraffe on to the screen. Continue with adding the following lines.

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 0);
CGPathAddLineToPoint(path, NULL, 50, 100);
SKAction *followline = [SKAction followPath:path asOffset:YES orientToPath:NO duration:3.0];

We create a graphic path to which we will add a line. Then we create a action that moves the sprite along a path. The parameter of the followPath:asOffset:orientToPath:duration are

  • path - The path to follow
  • offset - YES means the path is relative from the sprite's starting position, NO means absolute.
  • orient - YES means the sprite will rotate following the path. NO means no rotation.
  • sec - The duration of the action in seconds

Add the following line after the previous lines.

SKAction *reversedLine = [followline reversedAction];

The previous action will be reversed, so the sprite will move back to its original position.

UIBezierPath *square = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
SKAction *followSquare = [SKAction followPath:square.CGPath asOffset:YES orientToPath:NO duration:5.0];

The UIBezierPath class lets you define a path consisting of lines and curves. Here we create a square path using the bezierPathWithRect method. The CGPath property is used to define the Core Graphics representation of the path. Next, we will add the next path

UIBezierPath *circle = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) cornerRadius:100];
SKAction *followCircle = [SKAction followPath:circle.CGPath asOffset:YES orientToPath:NO duration:5.0];

Here we create a circle path using the bezierPathWithRoundedRect method. Finally, add the last line.

[self.giraffe runAction:[SKAction sequence:@[followline, reversedLine, followSquare, followCircle]]];

We create a runAction with our previous created actions in a sequence so the action will run after each other. Build and Run the project and you will see the sprite move along the paths.

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