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. This tutorial is built in iOS 8.1 and Xcode 6.1
Open Xcode and choose iOS->Application->Game.
For product name, use SpriteKitSwiftFollowPathTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language, select SpriteKit as Game Technology and make sure only iPhone is selected in Devices.
Next, we will need an image to use for the sprite movement, we will use the Swift log, so download the image here. Add it to the project. Go to the GameScene.swift file and remove the touchesBegan:withEvent method as we don't need user input for our application. Next, in the didMovetoView method remove all lines between the braces. All further code will be done in the didMovetoView method. Add the following lines.
let logo = SKSpriteNode(imageNamed:"SwiftLogo.png") logo.position = CGPointMake(self.frame.size.width/2, self.frame.size.height/2) self.addChild(logo)
he Swift logo is posititioned on the center of the screen. Add the following lines.
var path = CGPathCreateMutable() CGPathMoveToPoint(path, nil, 0, 0) CGPathAddLineToPoint(path, nil, 50, 100) var followLine = SKAction.followPath(path, asOffset: true, orientToPath: false, 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 - true means the path is relative from the sprite's starting position, false means absolute.
- orient - true means the sprite will rotate following the path. false means no rotation.
- sec - The duration of the action in seconds
Add the following line after the previous lines.
var reversedLine = followLine.reversedAction()
The previous action will be reversed, so the sprite will move back to its original position.
var square = UIBezierPath(rect: CGRectMake(0, 0, 100, 100)) var followSquare = SKAction.followPath(square.CGPath, asOffset: true, orientToPath: false, duration: 5.0)
The UIBezierPath class lets you define a path consisting of lines and curves. Here we create a square path using the init(rect:) method. The CGPath property is used to define the Core Graphics representation of the path. Next, we will add the next path
var circle = UIBezierPath(roundedRect: CGRectMake(0, 0, 100, 100), cornerRadius: 100) var followCircle = SKAction.followPath(circle.CGPath, asOffset: true, orientToPath: false, duration: 5.0)
ere we create a circle path using the init(roundedRect:) method. Finally, add the last line.
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.
ou can download the source code of the SpriteKitSwiftFollowPathTutorial at the ioscreator repository on Github