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.


Position the button

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


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


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.


Setting the text properties

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

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.

Listening for events

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

Here is a practical example.

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!