Hi,
I am trying to understand how to transition from one scene to another. What I am trying to achieve, ultimately, is to have two scenes. The first one is a game start screen and the second is the main game. I believe that having two scenes transition from one to the other is the way to go about this?
I used an example that I found posted on the Phaser3 site. The problem is that both scenes are running simultaneously when the game starts. I want it to start background first and then demo after the key press.
I have tried changing the active value to false for the second scene which gets half way there, but I then want to play the second scene so am I meant to use a function to activate it if doing it that way?
> import Phaser from "phaser";
>
> var Background = new Phaser.Class({
>
> Extends: Phaser.Scene,
>
> initialize:
>
> function Background ()
> {
> Phaser.Scene.call(this, { key: 'background', active: true });
> },
>
> preload: function ()
> {
> this.load.image('face', './src/assets/bricks/brick1.png');
> },
>
> create: function ()
> {
> this.face = this.add.image(400, 300, 'face');
> this.cursors = this.input.keyboard.createCursorKeys();
> },
>
> update: function()
> {
> if (this.cursors.down.isDown) {
> this.scene.start('Demo');
> }
> }
>
> });
>
> var Demo = new Phaser.Class({
>
> Extends: Phaser.Scene,
>
> initialize:
>
> function Demo ()
> {
> Phaser.Scene.call(this, { key: 'demo', active: true });
> },
>
> preload: function ()
> {
> this.load.image('arrow', './src/assets/bricks/brick2.png');
> },
>
> create: function ()
> {
> this.arrow = this.add.image(400, 300, 'arrow').setOrigin(0, 0.5);
> },
>
> update: function (time, delta)
> {
> this.arrow.rotation += 0.01;
> }
>
> });
>
> var config = {
> type: Phaser.WEBGL,
> width: 800,
> height: 600,
> backgroundColor: '#000000',
> parent: 'index',
> scene: [ Background, Demo]
> };
>
> var game = new Phaser.Game(config);