When to add a scene to the scene array

Phaser 3
1

I’m working with Phaser 3.21.0 on Glitch and trying to convert from using states in Phaser 2 to using scenes in Phaser 3.
I have ‘Add Scene from Another Scene’ with the scene classes all in the same file running now but it required putting only the first scene in the scene array when I was thinking I needed to have each of them in the array. So I got each scene to run as one scene in the array and then tried Add Scene from Another Scene with a second scene and realized I didn’t need to add the second scene to the scene array. So then I just added the input function to each scene class of three scenes with only one scene in the scene array.

When do I need to add each separate scene in the array? When I am loading them from external scene class files?

2

There are three ways to add a scene:

  1. Put in the scene array in the game config.
  2. Call this.scene.add() or game.scene.add().
  3. Call this.load.sceneFile() during preload.

(1) is the simplest. (3) is the most complicated.

You only really need to use (2) if you’re depending on something that happens after the game starts (vs. before).

You rarely need to use (3). It’s the only one that requires one scene per file.

3

@laserblue Do you really add a scene from another scene or by game, 2nd way @samme explained, or you need to start a scene from another scene?

I prefer passing all the scenes to the game config scene property in an array. I understand it is the scenes you are going to use (run/start/launch) and only the first one is started by default (not sure the difference of run from start though, I would be thankful if someone explains that as well.).

@samme I wonder if a new scene (called from another scene with this.scene.start or this.scene.launch) should be used for showing a modal (modal or popover like in web apps) and for a different view includes nothing that a current view includes ? And generally when to employ a different scene and when to not, what would be a good approach? Can you answer this?

4

Yes, adding a scene isn’t starting a scene (although it can include starting it). You can usually use (1) and then start/switch as necessary.

For a modal scene you could use launch–stop if it should start fresh each time or run–sleep if it should keep its state when you leave it. I wouldn’t use start for that because it would shutdown the first scene (the one underneath). Details in Phaser 3 Scenes Summary. I also wrote a good demo for this but never finished the tutorial.

2 Likes
5

fselcukcan I am trying to reproduce a sequence of screens/background images that go from a loading screen and/or a Splash screen background to a menu screen with choices like 1. Play Game, 2. View Preferences/Options, 3. Show Credits.
The menu screen has a background image and each of the possible choices leads to a screen with a different background image. There is also a “Game Over” background image that is shown after a game and that allows one to play the game again or return to the menu screen.
I haven’t been able to get samme’s “1. Put in the scene array in the game config” to work yet. Perhaps I am not using the right code or have it in the wrong sequence etc.

So this is why I’m trying to figure out the Phaser 3 scene examples (which don’t follow the same code pattern all the time. e.g. “var MyScene = new Phaser.Class({” vs. “class MyScene2 extends Phaser.Scene {”

6

Thank you that was helpful.

7

I have an example I can share I have taken from Phaser labs and ported the code style and expanded it to have multiple scenes with different backgrounds etc. Basic splash, loader, menu, game scenes. It is here.

That is right. Phaser examples show different ways to create game scenes. I think they have been written to demonstrate those ways, object literal way (my favourite), es6 class syntax way, Phaser scene instance way, and Phaser class helper way (the one you have mentioned above). All works same after you hand them to Phaser, so no worries fundamentally. To me, it is about style and phylosophy. Also one can manually be ported to other easily, sometimes I do.

8

If you want to use simple objects/functions, follow scenes/multiple scenes from objects. It includes a lot of optional config values, but probably you’ll be using just key, preload, create, update.

If you want to use classes, follow scenes/multiple scenes from classes.

If you want to run multiple scenes of the same class, follow scenes/copies of the same scene.

9

I hope we can do everything with objects as well. Like adding physics to a scene, or adding specific default scene plugins, using injection maps etc. as I have seen done with classes in the devlogs 119 or 121 you had mentioned. Something like:

var backgroundSceneConfig = {
    key: 'background',
    active: true,
    create: createBackground,
    render: renderBackground,
    pack: {
        files: [
            { type: 'image', key: 'face', url: 'assets/pics/bw-face.png' }
        ]
    },
    physics: {
        default: 'matter',
        matter: {
            debug: true,
        }
    },
};

I dont understand the render funcitons in scenes/multiple scenes from objects though.
What are they doing?

10

I’m using half a dozen scenes with this pattern and things seem to work. Only one scene is more complicated than just a background image scene. Working with Code Pen made it clear that I need to pay very close attention to placement of brackets, parentheses etc. and letter case. However, I’m still struggling to replace one of these working scenes with an external scene file version.

var OptionsScene = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function OptionsScene ()
{
Phaser.Scene.call(this, { key: ‘optionsScene’, active: false });
},
preload ()
{
this.load.image(‘vavilov’, ‘https://cdn.glitch.com/dad6f70b-d7f8-4b6b-812a-427943582a20%2F800px-Maize_diversity_in_Vavilovs_office_(3421259242).jpg?v=1574372062843’);

},

create ()
{

// this.optionsScene = this.add.image(400, 300, ‘optionsscene’);
this.optionsScene = this.add.sprite(400, 300, ‘vavilov’).setOrigin(0.5, 0.5);
this.add.text(20, 20, ‘Options Scene’, { fontFamily: ‘Arial’, fontSize: 64, color: ‘#ffff00’ });
this.add.text(100, 200, ‘toggle music\ntoggle sound\nreturn to menu’, { fontFamily: ‘Arial’, fontSize: 64, color: ‘#ffffff’ });
this.input.once(‘pointerdown’, function () { // just for temporary viewing of scenes
console.log(‘From Options Scene to GameScene’);// actually will be coded to return to menu
this.scene.start(‘gameScene’); // view the intro game scene that will run from Menu -> Start Game
}, this);
}
});

let config = {
type: Phaser.AUTO,
backgroundColor: ‘#00ff00’, // variation: backgroundColor: 0xffff00,
scale: {
mode: Phaser.Scale.FIT,
parent: ‘gameArea’, // div tag id
width: 800,
height: 600
},
pixelArt: true,
zoom: 1,
physics: {
default: ‘arcade’
},
scene: [ BootScene, MenuScene, OptionsScene, GameScene, FSMScene, GameOverScene, CreditsScene ] // adding SceneMain (the external scene file) to the list gives a SceneMain not defined error
};

var game = new Phaser.Game(config);

11

I collected the js files and put them in a separate js folder and things still seemed to work but I could not get a version of that code to work for my own files yet.

12

Why don’t lay-scene and hatch-scene work?

13

The sometimes work sometime don’t work. I am not sure why. I am on the move now, I will try to find a solution and answer when possible.

14

I have been working with your example in Glitch. There seems to be a problem getting lay-scene to run. Usually, clicking on the loader scene brings up a black screen (waiting 1-2 mins. before clicking doesn’t seem to make a difference). (Waiting for the black screen to change or load something in does not seem to matter - how long should one wait for audio to load? - no indicator of loading or progress)
Now, if I refresh the screen (and I don’t know if waiting before clicking helps) layscene might run when I click on the loader scene. It doesn’t always work on the first refresh and I don’t know if it is due to a need to wait for the scene to load or what.
Once lay-scene and hatch-scene run once, they will still run after refreshing the screen/window (circular icon).
If the window is closed, however, one gets the loading scene and then click to black screen and lay-scene won’t run until a certain amount of time passes and the window is refreshed.