Changing Scenes

Within these castle walls be forged Mavens of Computer Science ...

— Merlin, The Coder

Background

Director

Before understanding how to change scenes, we must first understand what the director is and its function, the director is responsible for both managing the application as well as enqueueing and transitioning to scenes.

Prepare

Create a new Scenes shell project within your Experiences directory:

ty-cam@codermerlin:~$  cd ~/Experiences

ty-cam@codermerlin:~/Experiences$  git clone https://github.com/TheCoderMerlin/ScenesShellBasic ChangingScenes

Enter the Sources/ScenesShell directory of the new project:

ty-cam@codermerlin:~/Experiences$  cd ChangingScenes/Sources/ScenesShell/

Run the program. ty-cam@codermerlin:~/Experiences/ChangingScenes/Sources/ScenesShell$  run

Ensure that you are logged on to the wiki. Then, click on the Tools menu followed by right-clicking on IGIS and selecting the menu item Open in New Window or Open in New Tab.

You'll know you're successful if you see the title bar change to "Coder Merlin: IGIS". (The browser window will be blank because we haven't added any graphics yet.)

Helpful Hint

It's useful to bookmark this page in your browser.

Experiment

Within the next 3 Lessons, we will create an endless runner with 2 scenes, a scrolling world, and smooth character animations.

Getting Started

In order to transition between different scenes, we must first have different scenes to transition to. Make a new directory called MainScene:

tariq-mahamid@codermerlin:~/Experiences/ChangingScenes/Sources/ScenesShell/MainMenu$ mkdir MainScene

You can then move all the necessary files:

tariq-mahamid@codermerlin:~/Experiences/ChangingScenes/Sources/ScenesShell/MainMenu$ mv BackgroundLayer.swift Background.swift ForegroundLayer.swift InteractionLayer.swift MainScene.swift MainScene

After making the new scene, copy it into a new directory called GameScene:

tariq-mahamid@codermerlin:~/Experiences/ChangingScenes/Sources/ScenesShell/MainMenu$ cp -r MainScene/ GameScene/

Helpful Hint

Remember to rename all of the file and class names in the respective scenes.

Play Button

We can now create a play button inside of the MainScene that will transition to the GameScene

Inside of the Main Scene directory, create a script called PlayButton.swift. Inside of the play button, add a switch to game function that will both enqueue and transition to the game scene:

    private func switchToGame() {                                                                                                                                                                                                    
        director.enqueueScene(scene: GameScene())                                                                                                                                                                                    
        director.transitionToNextScene()                                                                                                                                                                                             
    }

Helpful Hint

Remember to include EntityMouseClickHandler as a super class for the PlayButton subclass when adding functionality

Exercises

Exercises

• Add functionality to the Play Button
• Style Start Screen and Play Button