Buttons with different sizes based on size of text

[alarian]

I'm probably missing something here but I've searched and found nada!

Ideally I would want to create buttons like I do in css... this is not happening in canvas but come on...

Png files including text and Everything??

I'm going to need HUNDREDS of buttons in my game.

Help! :'(

[Trissolo]

Best way is extending Phaser.Sprite/Phaser.Image/Phaser.Button object, passing a JSON file with all your params.

Or you can use a function similar to this one:

function create() {game.stage.backgroundColor = '#104111';createPropButton(10,10,"Tiny");createPropButton(10,55,"- Medium -");createPropButton(10,100, "BIG FAAAAAT BUTTON");//just for "doSomething" function:message=game.add.text(5, 160, "--", {font: 'bold 15pt Courier', fill: '#2345AF', strokeThickness: 2});}function createPropButton(x, y, text) {    var width=30+text.length*16;    var propButton=game.add.graphics(0, 0);    propButton.lineStyle(2, 0x222222, 0.8);    propButton.beginFill(0xDDDDFF, 0.8);    propButton.drawRoundedRect(x, y, width, 30, 3);        propButton.text = game.add.text(x+propButton.width/2, 1+y+propButton.height/2, text);    propButton.text.anchor.setTo(0.5, 0.5);    propButton.inputEnabled = true;    propButton.events.onInputDown.add(doSomething, this);    propButton.events.onInputOver.add(buttonOver, this);    propButton.events.onInputOut.add(buttonOut, this);        //just for "doSomething" function:    propButton.name=text;}function doSomething(button) {    message.text = button.name;}function buttonOver(button) {button.lineStyle(2, 0xEDDE33, 0.9);button.beginFill(0xFF3333, 0.8);button.drawRoundedRect(button.graphicsData[0].shape.x, button.graphicsData[0].shape.y, button.graphicsData[0].shape.width, button.graphicsData[0].shape.height, 3);}function buttonOut(button) {button.lineStyle(2, 0x222222, 0.8);button.beginFill(0xDDDDFF, 0.8);button.drawRoundedRect(button.graphicsData[0].shape.x, button.graphicsData[0].shape.y, button.graphicsData[0].shape.width, button.graphicsData[0].shape.height, 3);}

[alarian]

Wow thank you!

This is exactly what I was looking for.

 

I'm definitely going to look into extending and using json.

I also learned a lot by reading the code you provided.

 

You've helped me beyond expectations. Thank you so much!