How to make a simple button that changes/starts a scene?

Phaser 3
1

I’ve been scratching my head to find an easy way to make a “Main Menu” and start a scene on button click but everything I found online is in a different structure to the way I did my code (following this tutorial series: https://www.youtube.com/watch?v=frRWKxB9Hm0).

I currently have:

class Boot extends Phaser.Scene{
    constructor(){
        //super() inherits all the characteristics of the Phaser "scene" class
        super("bootGame");
    }
    create(){
        this.add.text(256,256, "Loading Game...");
        this.input.once('pointerup', function () {this.scene.start("playGame")}, this);
    }    
}

And I want to make it so that I start the playGame scene when I click a button instead of anywhere on screen.

2

Use an interactive Game Object: http://labs.phaser.io/edit.html?src=src\input\mouse\click%20sprite.js

You can also see this example if you want it to change its frame when you move your mouse over it: http://labs.phaser.io/edit.html?src=src\input\mouse\over%20and%20out%20events.js

2 Likes
3

Ah perfect thank you!. One question though, how do I set specific keys from the keyboard to listen for? Also where can I see how to identify each key on the keyboard? For example if I wanted to use the letter ‘r’ for reloading.

4

Each key has its own event: http://labs.phaser.io/edit.html?src=src\input\keyboard\keydown.js

2 Likes
5

Right but is there anyway I can see what I need to write to identify that key?

For example, the "A"key:

this.input.keyboard.on('keydown-A', function (event) {
        console.log('Hello from the A Key!');
});

Uses ‘keydown-A’ to identify the ‘A’ key. How would I do tilde for instance?
Is it as easy as ‘keydown-~’?

6

https://photonstorm.github.io/phaser3-docs/Phaser.Input.Keyboard.KeyCodes.html

2 Likes
7

Exactly what I was looking for. Thank you.