Jump to content

Text only buttons


Recommended Posts

You can create a Phaser.Text and attach listeners to it, like below:

let textString: string = "Button text"            
let text = this.game.add.text(10, 10, textString, {
    font: "20px Arial",
    fontWeight: 'bold',
    fill: "#FFFFFF"
text.inputEnabled = true;
text.events.onInputDown.add(this.onTextButtonPressed, this);

onTextButtonPressed is the listener callback where you handle the event.

Link to comment
Share on other sites

12 hours ago, venomdev said:

Hi, you could create plain stylized HTML button/input using CSS or you could create buttons using normal text in a transparent div with an on click event.


Hint: this would fetch the focus and unfocus the game canvas.

You have to be aware that this can cause several problem in your game and timing mechanisms; depending on your code.
You will also not be able to make a cursor graphics, since these buttons will take over the default cursor graphics again since you go out of context.


@BudBrain / @toggthedog
creating a Phaser.Text(); and adding an input event is quite simple and nice! You could also modify the "hitArea" of it, if you want to have more padding around your text that is triggering the click event.

Link to comment
Share on other sites

Thanks all, however I'm still struggling with this.

Maybe, as you say, I should be using buttons with a background image (sprite?) but I've spent quite some time today getting something to work but failed.

Would it be easier to use something like a UI script/plugin?

I'm only at the beginning of the learning process, but didn't expect to get stumped by buttons this early on :D

Link to comment
Share on other sites

You can create the button as a graphics object and create text on top of it, put them in a group and then add click handlers to that group

      var buttonelement = [];
      buttonelement.push(game.add.graphics(0, 0));
      buttonelement.push(game.add.text(0, 0, text, textstyle));
      buttonelement[0].beginFill(color, 1);

    group.x = x;
    group.y = y;
    group.onChildInputOver.add(this.onOver, game);
    group.onChildInputOut.add(this.onOut, game);
    group.onChildInputDown.add(this.onClick, game);
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...