[SOLVED][Error] this.add.button is not a function

[Techassi]

Hello,

I recently started working on a small game using Phaser 3.

I started of by creating a new scene for my mainmenu with a "play" button. And there is my problem: I can't add a button to my scene.

My main JS file looks like this:

var dimensions = {
    height: window.innerHeight,
    width: window.innerWidth
}

var config = {
    type: Phaser.AUTO,
    width: dimensions.width,
    height: dimensions.height,
    scene: [Mainmenu],
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {y: 200}
        }
    }
};

var game = new Phaser.Game(config);

My mainmenu class looks like this:

class Mainmenu extends Phaser.Scene {
    constructor() {
        super({key: 'Mainmenu'});
    }

    preload() {
        this.load.image('sky', 'assets/sky.jpg');
        this.load.image('startBtn', 'assets/button.jpg');
    }

    create() {
        console.log(this);
        this.sky = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'sky');
        this.startBtn = this.add.button(100, 100, 'startBtn', startGame, 2, 1, 0);
    }

}

function startGame() {
    console.log('Game started!');
}

But the console is stating that "this.add.button is not a function" at line 14. So I ask you where my error is and how can I make it work?

With best regards, Techassi

[Colbydude]

As far as I'm aware, Phaser 3 doesn't have a built-in button game object. Though you can achieve the functionality you want by doing something like this:

create () {
    this.startBtn = this.add.sprite(100, 100, 'startBtn').setInteractive();

    this.startBtn.on('pointerover', function (event) { /* Do something when the mouse enters */ });
    this.startBtn.on('pointerout', function (event) { /* Do something when the mouse exits. */ });
    this.startBtn.on('pointerdown', startGame); // Start game on click.
}

 

[Techassi]

Ok thanks, I will report back!

[Techassi]

On 4/5/2018 at 8:42 AM, Colbydude said:

As far as I'm aware, Phaser 3 doesn't have a built-in button game object. Though you can achieve the functionality you want by doing something like this:

create () {
    this.startBtn = this.add.sprite(100, 100, 'startBtn').setInteractive();

    this.startBtn.on('pointerover', function (event) { /* Do something when the mouse enters */ });
    this.startBtn.on('pointerout', function (event) { /* Do something when the mouse exits. */ });
    this.startBtn.on('pointerdown', startGame); // Start game on click.
}

 

Ok thank you very much for the answer! Works very well.

[BdR]

On 4/5/2018 at 8:42 AM, Colbydude said:

As far as I'm aware, Phaser 3 doesn't have a built-in button game object.

Wait what, no buttons? Will they be added at a later time?