Jump to content

Create button by using Graphics and Text objects?


Recommended Posts

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?

Link to post
Share on other sites

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

 

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.

×
×
  • Create New...