JHenriP

Basic Menus/Classes/Scenes

Recommended Posts

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("");
        }
    }
}

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.