Changing Scenes

From Coder Merlin
Jump to navigation Jump to search

Background[edit]

Director[edit]

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[edit]

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/


Start button green arrow
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.)

HintIcon.png
Helpful Hint
It's useful to bookmark this page in your browser.


Experiment[edit]

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

Getting Started[edit]

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/
HintIcon.png
Helpful Hint

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

Play Button[edit]

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()                                                                                                                                                                                             
    }
HintIcon.png
Helpful Hint

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

Exercises[edit]

ExercisesIcon.png
Exercises
  • Add functionality to the Play Button
  • Style Start Screen and Play Button


Designed with pride in Silicon Valley, CA, USA