Dynamic Text Buttons using Phaser and images

Dynamic Text Buttons using Phaser

A lot of my game development time will be eaten up by looking for the right buttons or artwork. It drives me crazy when I want to code. I needed a good library of buttons. It will take up more of my time if I have to copy the buttons and change the text on each one. So it was important to write something where I could pass the button text as a string.  Coding is made so much easier by being able to reuse code and assets over and over. That’s why I came up with Dynamic Text Buttons using Phaser

Here are a few examples:

dynamic text buttons using phaser

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…

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

You will find the images for the text buttons in the images folder: images/ui/buttons

I refer to the folders as sets and the numbers of each png image as a style

So set 1 style 2 would be a path of images/ui/buttons/1/2.png

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