Techassi

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.
}

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.