Create button by using Graphics and Text objects?

[spinnerbox]

Hello. I managed to create code that draws a button along with a textfield and also with the four states that a button have, onInputUp, onInputDown, onInputOver and onInputOut.

However, it is still experimental, and since I add text object as a child of Phaser.Graphics, the text is a bit blurry. But the bigger issue is, new graphical elements are added without removal, so I have a bug somewhere, or it is just not possbile to create dynamically drawn button with text and all states and to add custom click event handler.

I will post another topic for the code itself, but here i just want to ask if there is a plugin for Phaser that draws buttons dynamically, or buttons on which I can change the text dynamically?

Or how can I create button and be able to change its text dynamically?

Should I just place Graphics object below and on top a text field both pointing to the same click listener?

[spinnerbox]

Well it works with a normal sprite based button with text field above it but still a good try:

drawRoundedRect: function (graphics, x, y, width, height, radius, bSize, bColor, bAlpha, fColor, fAlpha) {
    var rect = artm.gameObject.add.graphics(0, 0);
    rect.name = artm.Const.Graphics.RECT_KEY + this.randomNumber(width, height);
    rect.lineStyle(bSize, bColor, bAlpha);
    rect.beginFill(fColor, fAlpha);
    rect.drawRoundedRect(x, y, width, height, radius);
    rect.endFill();

    graphics.addChild(rect);

    return rect;
},
            
/**
  * Draws graphics object with rounded/sharp rectangle and with text field inside.
  * @radius raidus {Number}, set 0 for sharp corners.
  * @param btnStyle {Object}, structured like this: {bSize: x, bColor: y, bAlpha: z, fColor: u, fAlpha: v}
  */
drawButtonWithText: function (graphics, x, y, width, height, radius, btnStyle, text, textStyle, btnName) {                   
    var buttonRect = null,
        buttonText = null;
                    
    graphics.clear();  
    graphics.name = btnName;
                
    buttonRect = this.drawRoundedRect(graphics, x, y, width, height, radius, btnStyle.bSize, btnStyle.bColor, btnStyle.bAlpha, btnStyle.fColor, btnStyle.fAlpha);
                
    buttonText = artm.gameObject.add.text(x + width / 2, y + height / 2, text, textStyle);
    buttonText.smoothed = true;
    buttonText.anchor.x = 0.5;
    buttonText.anchor.y = 0.4;
    graphics.addChild(buttonText);
                
    return graphics;
},
            
/**
  * Create you own clickHandler and include the following code inside above your own custom code:
  * artm.Utility.drawButtonWithText(this, x, y, width, height, radius, btnStyleDown, btnText, textStyle, btnName);
  * Example: var clickHandler = function () {
  *              artm.Utility.drawButtonWithText(this, x, y, width, height, radius, btnStyleDown, btnText, textStyle, btnName);
  *              // your own code comes here
  *           }
  */
createGraphicsButton: function (btnText, btnName, textStyle, x, y, width, height, radius, btnStyleDown, btnStyleUp, btnStyleOver, btnStyleOut, clickHandler, priority, args) {                         
    var graphics = artm.gameObject.add.graphics(0, 0);
                
    graphics.inputEnabled = true;
    graphics.inputEnabled = true;
    graphics.input.useHandCursor = true;
                
    graphics.events.onInputDown.add(clickHandler, graphics, priority, args);
                
    graphics.events.onInputUp.add(function () {
        //this.removeChildren(0, this.children.length - 1);
        artm.Utility.drawButtonWithText(this, x, y, width, height, radius, btnStyleUp, btnText, textStyle, btnName);
    }, graphics, priority, args);
                
    graphics.events.onInputOver.add(function () {
        //this.removeChildren(0, this.children.length - 1);
        artm.Utility.drawButtonWithText(this, x, y, width, height, radius, btnStyleOver, btnText, textStyle, btnName);
    }, graphics, priority, args);
                
    graphics.events.onInputOut.add(function () {
        artm.Utility.drawButtonWithText(this, x, y, width, height, radius, btnStyleOut, btnText, textStyle, btnName);
    }, graphics, priority, args);
                
    artm.Utility.drawButtonWithText(graphics, x, y, width, height, radius, btnStyleOut, btnText, textStyle, btnName);
                                                
       return graphics;
},

var answer1BtnHandler = function () {
    artm.Utility.drawButtonWithText(this, 40, 250, 100, 30, 7, gameGraphics.getBasicBtnStyle(), rightAnswer, gameGraphics.getVerdana14BoldCenter(), artmConst.ANSWER_1_BTN_NAME);
    artm.ClassicGameScreen.guess(this.getChildAt(1).text);
};

var answer1Btn = artm.Utility.createGraphicsButton(rightAnswer, artmConst.ANSWER_1_BTN_NAME, gameGraphics.getVerdana14BoldCenter(), 40, 250, 100, 30, 7, gameGraphics.getBasicBtnStyle(), gameGraphics.getBtnOverStyle(), gameGraphics.getBtnOverStyle(), gameGraphics.getBasicBtnStyle(), answer1BtnHandler);
thisObject.menuObjects.add(answer1Btn);