240 Flat Buttons in Phaser 3

Flat Buttons in Phaser 3

I’m starting to put together my library of Phaser 3 code so I can quickly put together my games. Dynamic buttons are a big part of that. I originally was going to use images as I did in my Ultimate Game Template. I found flat buttons in Phaser 3 can be generated with less effort by using graphics.

What’s included?

  • 120 pill buttons
  • 120 square buttons
  • unlimited customizations

You will have 120 preset colors and You will be able to choose between square or pill buttons.  You can also add custom colors and text as well.

How to use these Flat Buttons in Phaser 3

The buttons will simply need to be passed a single configuration object. Only the scene property is required. This example below will place a red button on the screen with “Press Me”.  The preset property will set the button, text, rollover and pressed colors.

 

var button = new FlatButton({
                'scene': this,
                'text': "Press Me!",
                'preset': 5
            });

Position the button

You can set the position of the button by including an x and y property

var button = new FlatButton({
                'scene': this,
                'text': "Press Me!",
                'preset': 5,
                'x':game.config.width/2,
                'y':200
            });

 

Flat Buttons in Phaser 3

Setting the width

Change the width by adding a width property, the height will be set to 1/2 of the width

var button = new FlatButton({
                'scene': this,
                'text': "Press Me!",
                'preset': 5,
                'width': 200,
                'x':game.config.width/2,
                'y':200
            });

 

Pill Buttons

Change from a square to a pill button by setting round to true. This will make the width of the overall button larger.

var button = new FlatButton({
                'scene': this,
                'text': "Press Me!",
                'preset': 5,
                'width': 200,
                'round':true,
                'x':game.config.width/2,
                'y':200
            });

 

Setting the text properties

You can pass in a custom text object into the config’s textStyle property

var textConfig = {
             fontFamily: "Arial",
             fontSize: game.config.width / 20,
             color: "yellow"
         };
         //
         //
        var button = new FlatButton({
                'scene': this,
                'text': "Press Me!",
                'preset': 5,
                'width': 200,
                'round':true,
                'x':game.config.width/2,
                'y':200,
                'textStyle':textConfig
            });

Custom Colors

You can set the color, overColor, and downColor to set custom colors. If you set the preset property, it will override any custom colors.

var textConfig = {
            fontFamily: "Arial",
            fontSize: game.config.width / 20,
            color: "black"
        };
        var button = new FlatButton({
            'scene': this,
            'text': "Press Me!",
            'width': 200,
            'round': true,
            'color': '0x00ff00',
            'overColor': '0xcc0000',
            'downColor': '0xffffff',
            'x': game.config.width / 2,
            'y': 200,
            'textStyle': textConfig
        });

Listening for events

You will be able to listen for the button being pressed by setting a listener in the scene.

this.events.on('FLAT_BUTTON_DOWN', this.clicked, this);

Here is a practical example.

class SceneMain extends Phaser.Scene {
    constructor() {
        super('SceneMain');
    }
    preload() {}
    create() {
        //
        //
        var textConfig = {
            fontFamily: "Arial",
            fontSize: game.config.width / 20,
            color: "black"
        };
        var button = new FlatButton({
            'scene': this,
            'text': "Press Me!",
            'preset': 5,
            'width': 200,
            'round': true,
            'x': game.config.width / 2,
            'y': 200,
            'textStyle': textConfig
        });
        this.events.on('FLAT_BUTTON_DOWN', this.clicked, this);
    }
    clicked(button) {
        console.log(button.getText() + " CLICKED!");
    }
    update() {}
}

Here are all of the presets with the text of the button replaced with the preset number.

I hope you will find these Flat buttons for Phaser 3 useful!