Basic Menus/Classes/Scenes

[JHenriP]

Hi everyone, as someone new to Phaser I came across the question most of us (newbies) have after a few hours experimenting.. Am I doing it right?!

Obviously there's never only one "right way" of doing things, after watching a few tutorials I ended up with the code below. I'm looking for a feedback in the following topics:

• Classes - If I am not mistaken I've probably tried 3 differents ways of making classes, this one was the most logical to my eyes. (I'm refering to classes which I want to use as scenes)
• Var vs this. - Is there any difference? I see people using var x and this.x (I assume I can also use let instead of var since I'm always on the same block)
• Starting a new scene - This is the part I am really confused about, I have  menuNumber initialized in another .js and basically I'm waiting for a pointerdown event to happen in one of the images to then change menuNumber value that will be read through update() since it's an infinite loop in order to start a new scene.  

Note: Everything is working fine and I'm preloading all the images in another .js file
 

class MainMenu extends Phaser.Scene {
    constructor() {
        super({key: "MainMenu"});
    }

    create() {
        this.add.image(640, 320, "background");
        //var  title = this.add.image(200, 200, "title"); reduce png size
        var jogarBut = this.add.image(960, 120, "jogarBut").setInteractive();
        var opcoesBut = this.add.image(960, 180, "opcoesBut").setInteractive();
        var ajudaBut = this.add.image(960, 240, "ajudaBut").setInteractive();
        var rankingBut = this.add.image(960, 300, "rankingBut").setInteractive();
        var creditosBut = this.add.image(960, 360, "creditosBut").setInteractive();
        var sairBut = this.add.image(960, 420, "sairBut").setInteractive();

        //Click on title easter egg - to do

        menuNumber = -1;

        jogarBut.on("pointerdown", function (ev) {
            menuNumber = 0;
        });

        opcoesBut.on("pointerdown", function (ev) {
            menuNumber = 1;
        });

        ajudaBut.on("pointerdown", function (ev) {
            menuNumber = 2;
        });

        rankingBut.on("pointerdown", function (ev) {
            menuNumber = 3;
        });

        creditosBut.on("pointerdown", function (ev) {
            menuNumber = 4;
        });

        sairBut.on("pointerdown", function (ev) {
            menuNumber = 5;
        });
    }

    update() {
        if(menuNumber===0){
            this.scene.start("Jogar");
        }
        else if (menuNumber===1){
            this.scene.start("OpcoesMenu");
        }
        else if (menuNumber===2){
            this.scene.start("AjudaMenu");
        }
        else if (menuNumber===3){
            this.scene.start("RankingMenu");
        }
        else if (menuNumber===4){
            this.scene.start("CreditosMenu");
        }
        else if (menuNumber===5){
            this.scene.start("");
        }
    }
}

 

[digitsensitive]

Hello JHenriP and welcome to the forum!

I will try to answer your questions, others will certainly respond to your comments and give their opinion.

1. looks correct to me how you created the scene class
2. as you correctly pointed out, there are differences between let and var and of course a big difference to this

- this: refers to the class and all its defined members and functions & to the extended class (in your case the Phaser.Scene). So you can basically access all the public members and functions of Phaser.Scene.
- `let`: is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in, which is not always the entire containing function.
- `var`: is the weakest signal available when you define a variable in JavaScript. The variable may or may not be reassigned, and the variable may or may not be used for an entire function, or just for the purpose of a block or loop.
- `const`: is a signal that the identifier won’t be reassigned.

3. have a look at this example: https://labs.phaser.io/edit.html?src=src\scenes\changing scene es6.js

[AdamRyanGameDev]

Var & Let

Please be aware of Var; being function scoped and for example that it can be 'hoisted'.

Depending on your programming background Let; may be more intuitive for many/most situations.