Scenes Tutorial in SpriteKit with Swift

With Sprite Kit you can create multiple scenes, one for each screen of the app. It is also possible to use animation transition between your scenes. In this tutorial we will create two scenes and create a transition. This tutorial is built in iOS 8.1 with Xcode 6.1

Open Xcode and create a new Project. Choose iOS -> Application -> Game.

For product name, use SpriteKitSwiftScenesTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Set the Language to Swift and Set the Game Technoloy to Swift. Make sure only iPhone is selected in Devices.

For this tutorial we will need two images which will act as buttons to start the transitioning between our scenes. Download the zip file, unpack it and add the images to the project.

First we need to create a new scene. Add a new File to the Project and choose iOS -> Source -> Cocoa Touch Class. Choose Next, name the class SecondScene and make it a subscene of SKScene.

Go to the GameScene.swift file and delete the touchesBegan method. Also delete all code inside the didMoveToView method below the "Setup your scene here" comment. Next, add the following code inside didMoveToView

override func didMoveToView(view: SKView) {
        /* Setup your scene here */
        self.backgroundColor = SKColor(red: 0.15, green:0.15, blue:0.3, alpha: 1.0)
        var button = SKSpriteNode(imageNamed: "nextButton.png")
        button.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame))
        button.name = "nextButton"
        
        self.addChild(button)
}

The background color is changed and the nextButton is positioned to the center of the scene. Next, we need to respond to a click from this button. Add the touchesBegan:withEvent method 

override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        var touch = touches as!  Set<UITouch>
        var location = touch.first!.locationInNode(self)
        var node = self.nodeAtPoint(location)
        
        // If next button is touched, start transition to second scene
        if (node.name == "nextButton") {
            var secondScene = SecondScene(size: self.size)
            var transition = SKTransition.flipVerticalWithDuration(1.0)
            secondScene.scaleMode = SKSceneScaleMode.AspectFill
            self.scene!.view?.presentScene(secondScene, transition: transition)
        }
 }

When the image is clicked the scene is transitioned to the second scene using a flipVertical transition with a duration of 1 second. Go to the SecondScene.swift file and add the didMoveToView and touchesBegan methods

class SecondScene: SKScene {
    override func didMoveToView(view: SKView) {
        /* Setup your scene here */
        self.backgroundColor = SKColor(red: 0.15, green:0.15, blue:0.3, alpha: 1.0)
        var button = SKSpriteNode(imageNamed: "previousButton.png")
        button.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame))
        button.name = "previousButton"
        
        self.addChild(button)
}
    
    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        var touch = touches as!  Set<UITouch>
        var location = touch.first!.locationInNode(self)
        var node = self.nodeAtPoint(location)
        
        // If previous button is touched, start transition to previous scene
        if (node.name == "previousButton") {
            var gameScene = GameScene(size: self.size)
            var transition = SKTransition.doorsCloseHorizontalWithDuration(0.5)
            gameScene.scaleMode = SKSceneScaleMode.AspectFill
            self.scene!.view?.presentScene(gameScene, transition: transition)
        }
 }

The code is almost identical from the GameScene, except now a closing door transition is used. Build and Run the project, press the button to start the transitioning between the two scenes.

You can download the source code of the SpriteKitSwiftScenesTutoriaat the ioscreator repository on Github.