Button text

[petrc]

Is it possible to have text overlay the button image?

 

The reason I dont want the text as part of the image is to simplify localization.

[Alvin]

Yes you can create your text as a separate Text object and use a button sprite which doesn't have any text on it.

I would advise you to put them in the same group as well.

 

Here is a simple text example : http://examples.phaser.io/_site/view_full.html?d=text&f=hello+arial.js&t=hello%20arial

[ivanix]

FYI

 

The link above is dead. Examples have moved.  I searched through the existing examples but have yet to find an example of a button with modifyable text.

[XekeDeath]

This small extension acts exactly like a Phaser.Button, but has a label that you can style and change the text on...

I wrote this just now, but will probably keep it and make it a little more interesting when I get home...

//Only difference to a Button constructor is the label parameter...LabelButton = function(game, x, y, key, label, callback, callbackContext, overFrame, outFrame, downFrame, upFrame){    Phaser.Button.call(this, game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame);    //Style how you wish...    this.style = {        'font': '10px Arial',        'fill': 'black'    };       this.label = new Phaser.Text(game, 0, 0, "Label", this.style);    this.addChild(this.label);    this.setLabel("Label");};LabelButton.prototype = Object.create(Phaser.Button.prototype);LabelButton.prototype.constructor = LabelButton;LabelButton.prototype.setLabel = function(label){    this.label.setText(label)    this.label.x = Math.floor((this.width - this.label.width)*0.5);    this.label.y = Math.floor((this.height - this.label.height)*0.5);};

[Alvin]

@ivanix, Just updated the link, and a custom class such as the one XekeDeath sent is also perfect.

[ivanix]

Thanks guys!

 

I was missing the how to relate the text object to the button object, but with the examples I finally got mine working.

[mand]

var LabelButton = function(game, x, y, key, label, callback,                       callbackContext, overFrame, outFrame, downFrame, upFrame){    Phaser.Button.call(this, game, x, y, key, callback,        callbackContext, overFrame, outFrame, downFrame, upFrame);    //Style how you wish...    this.style = {        'font': '10px Arial',        'fill': 'black'    };    this.anchor.setTo( 0.5, 0.5 );    this.label = new Phaser.Text(game, 0, 0, label, this.style);    //puts the label in the center of the button    this.label.anchor.setTo( 0.5, 0.5 );    this.addChild(this.label);    this.setLabel( label );    //adds button to game    game.add.existing( this );};LabelButton.prototype = Object.create(Phaser.Button.prototype);LabelButton.prototype.constructor = LabelButton;LabelButton.prototype.setLabel = function( label ) {       this.label.setText(label);};

Fixed a few things w/ Xeke's button, great start, works well.

The only problem is get the text to fit perfectly within the button, just like an html button.

 

[BdR]

Excellent answers here, I really like the extension of a standard button to a custom label button.  It wasn't immediately obvious to me how to add such a button object to the game, but this is how I did it: 

 

create: function() {

    ..

​    // adding a custom label button

    this.btnStart = new LabelButton(this.game, 480, 512, "buttonsprite", "Start game!", this.doBtnStartHandler, this, 1, 0, 2); // button frames 1=over, 0=off, 2=down

    ..

}