petrc Posted December 31, 2013 Share Posted December 31, 2013 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. kararty 1 Link to comment Share on other sites More sharing options...
Alvin Posted December 31, 2013 Share Posted December 31, 2013 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 Link to comment Share on other sites More sharing options...
ivanix Posted May 14, 2014 Share Posted May 14, 2014 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. Link to comment Share on other sites More sharing options...
XekeDeath Posted May 14, 2014 Share Posted May 14, 2014 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);}; ivanix, mand and BdR 3 Link to comment Share on other sites More sharing options...
Alvin Posted May 14, 2014 Share Posted May 14, 2014 @ivanix, Just updated the link, and a custom class such as the one XekeDeath sent is also perfect. Link to comment Share on other sites More sharing options...
ivanix Posted May 15, 2014 Share Posted May 15, 2014 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. Link to comment Share on other sites More sharing options...
mand Posted July 20, 2014 Share Posted July 20, 2014 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 1 Link to comment Share on other sites More sharing options...
BdR Posted November 19, 2014 Share Posted November 19, 2014 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 .. } Nikola Lukic 1 Link to comment Share on other sites More sharing options...
Recommended Posts