petrc

Button text

Recommended Posts

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);};

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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
..
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.