Product College starts on September 5. Submit your application today. Apply now.

You are going to build the main menu scene. The main menu will lead the player into the gameplay scene that you will develop in the next chapter. Also this is great place to add game options :]

The Main Scene

Create a new SKS file (File > New > File > SpriteKit Scene), set Name to MainMenuScene.sks Set Size to iPhone SE MainMenuScene attributes

Set Custom Class to MainMenuScene MainMenuScene custom class

Add a background

Drag menubackground.png onto the scene and snap it to the center.

Add a play button

The main menu needs a play button to trigger the player's transition to the GameScene. SpriteKit does not provide any native button nodes, so you need to roll your own. You may recall the MSButtonNode class we provided in the Hoppy Bunny tutorial. If you took on the challenge to build a better button please show it off and add to your project.

If you need the original button, please Download MSButtonNode.swift and drag the file into your project, ensuring Copy items if needed is checked.

Drag button.png into the scene, place it wherever looks great to you. You will be creating a code connection for this node later so set Name to buttonPlay. Set Custom Class to MSButtonNode:

Setting a custom class

Adding the companion code

To make the button work you will need some code to to perform the scene transition to the game scene

Create a new empty Swift file (File > New > File > Swift File), set Name to MainMenuScene.swift Replace the contents of this file with the following code:

import SpriteKit

class MainMenuScene: SKScene {

    /* UI Connections */
    var buttonPlay: MSButtonNode!

    override func didMove(to view: SKView) {
        /* Setup your scene here */

        /* Set UI connections */
        buttonPlay = self.childNode(withName: "buttonPlay") as! MSButtonNode

        /* Setup button selection handler */
        buttonPlay.selectedHandler = { [unowned self] in

            if let view = self.view {

                // Load the SKScene from 'GameScene.sks'
                if let scene = SKScene(fileNamed: "GameScene") {

                    // Set the scale mode to scale to fit the window
                    scene.scaleMode = .aspectFill

                    // Present the scene
                    view.presentScene(scene)
                }

                // Debug helpers
                view.showsFPS = true
                view.showsPhysics = true
                view.showsDrawCount = true
            }
        }

    }
}

This code creates the code connection for the button and sets up the selectedHandler to launch your GameScene when the button is touched.

Default scene

Although the MaineScene.sks is displayed, it's not connected to your MainScene.swift. This is easily rectified.

Open GameViewController.swift, and replace:

if let scene = SKScene(fileNamed: "GameScene") {

with:

if let scene = SKScene(fileNamed: "MainMenuScene") {

Finally time to run your game...

You should be presented with your MainMenuScene, be able to to touch the Play and be presented with the GameScene. Good job :]

MainMenu Screenshot

Summary

You've learnt to:

  • Implement multiple scenes
  • Change the default launch scene
  • Add a custom button and present a new scene

In the next chapter you start to build the game scene.

Feedback

If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations across the USA and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more