Dynamic Text Buttons in Phaser

A lot of my game development time has been eaten up by looking for the right buttons. It was further taken up by copying the buttons and changing the text on each one.  Coding is made so much easier by being able to reuse code and assets over and over.

Here are a few examples:

First I’ll show you how to use the buttons, and then we will go over how the button is made.

How to use the TextButton

The button dispatches events via a Phaser.Signal, you can learn about events here.

The format for using the button is

and a practical example is

Let’s have a quick look at the parameters…


Text- the button text
Set – the folder number containing the image
Style – image number
Event- a string
Params-parameters to pass along with the event
Font Size-the font size in pixels
TextColor-a hex color like #ff0000 (red)  passed as a string

The images for the text buttons can be found at images/ui/buttons

I refer to the folders as sets and the number png image as a style

How to make the TextButton

The button is part of the ultimate game parts template, but in case you’d like to see how it is made:

Listen for the button press

So now when I’m building a game and I need a quick button all I need to do is

  1. Create a button

2. Set up a listener anywhere in the game

3. Set up the listener’s function

Once I get to this point, adding new buttons is a snap!

This has sped up my production time quite a bit, and I hope you find it helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *