BudBrain Posted November 9, 2016 Share Posted November 9, 2016 Hi, Is it possible to create text only buttons with events, without background/foreground images? Thanks Link to comment Share on other sites More sharing options...
venomdev Posted November 10, 2016 Share Posted November 10, 2016 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. Link to comment Share on other sites More sharing options...
toggthedog Posted November 10, 2016 Share Posted November 10, 2016 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. samme 1 Link to comment Share on other sites More sharing options...
s4m_ur4i Posted November 10, 2016 Share Posted November 10, 2016 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. Link to comment Share on other sites More sharing options...
BudBrain Posted November 10, 2016 Author Share Posted November 10, 2016 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 Link to comment Share on other sites More sharing options...
squilibob Posted November 12, 2016 Share Posted November 12, 2016 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); Link to comment Share on other sites More sharing options...
Recommended Posts