Text only buttons

[BudBrain]

Hi,

Is it possible to create text only buttons with events, without background/foreground images?

Thanks

[venomdev]

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.

[toggthedog]

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.

[s4m_ur4i]

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.

@venomdev 

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.

[BudBrain]

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

[squilibob]

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);
      buttonelement[0].drawRoundedRect(x,y,width,height);
      buttonelement[0].endFill();

    group.addMultiple(buttonelement);
    group.x = x;
    group.y = y;
    group.onChildInputOver.add(this.onOver, game);
    group.onChildInputOut.add(this.onOut, game);
    group.onChildInputDown.add(this.onClick, game);