generate buttons programmatically

[frenetikm]

Hi,

 

I'm on a new project, and I'm trying to make my UI Buttons in flat design.

I thought it was possible to make a graphics or bitmapdata object (and put text on it), to generate a sprite sheet with it, and so make buttons with the sprite sheet.

 

It seems to not be as easy as that... It's really easy to load images, and make what you want with, but not generate images by yourself.

 

I managed to do a "hack" with a sprite :

var btnGraphics = new Phaser.Graphics()      .beginFill(0x000000, 0.5)      .drawRoundedRect(0, 4, 200, 60, 5)      .endFill()      .beginFill(0xFFFFFF, 1)      .drawRoundedRect(0, 0, 200, 60, 5)      .endFill();this.playBtn = this.add.sprite(this.world.centerX, 500, btnGraphics.generateTexture());this.playBtn.anchor.setTo(0.5, 0.5);var playBtnLabel = this.add.text(0, 0, 'start', { font: '40px Roboto', fill: '#333333'});playBtnLabel.anchor.setTo(0.5, 0.5);this.playBtn.addChild(playBtnLabel);this.playBtn.inputEnabled = true;this.playBtn.events.onInputDown.add(this.start, this);

But it's not a button... so no benefits of frame management.

 

 

For a perfect solution for my problem :

- is it possible to generate a graphics or bitmapdata and load it to cache like => this.load.image('image', 'assets/img/image.png') ?

- is there a way to add dynamically text with styles on this image before making a button with it ?

 

 

EDIT :

I forgot to say that the objective behind is to reuse the code and choose faster the colors of the game (colors could be in a theme.js for example)

[MichaelD]

Why not use the Phaser.button? http://phaser.io/docs/2.3/Phaser.Button.html

 

It takes images or sprites as arguments, supports up,down,over states, text can be set to it, and you can bind event listeners when you create it or after.

 

load it in a variable like this

var btn = new Phaser.Button(game, x, y, key(image, or sprite), callback, callbackContext (usually this), overFrame (optional), outFrame(optional), downFrame(optional), upFrame(optional));

[frenetikm]

Ok, but how can I define frames from a sprite ?

 

I can generate a graphics and add it to a sprite, then add text or images as childs to it, but I don't know how to define frames size after that ?

 

Another think is button constructor only accept a key name from cache, how can I create it from a dynamically created sprite ?

[jmp909]

there was discussion about adding frame data to a cache texture here.. it might help

http://www.html5gamedevs.com/topic/17770-creating-a-spritesheet-with-a-render-texture/?hl=frame#entry100303

[MichaelD]

I guess you could pass a bitmapData object to it, unless I'm mistaken.

 

I didn't undestand the "I don't know how to define frames size after that ?" part could you explain this?

 

If you want to create a button entity with custom components you could create a Phaser.Group add everything inside that, declare width and height for it and just do group.enabledInput = true; to be able to attach eventListeners to it.

[frenetikm]

The better solution I found is to create different textures for every state of the button.

I create an Image object with the default texture, and manage events on it.

 

Here is a jsfiddle to demonstrate this:

https://jsfiddle.net/q7up5erh/2/

 

 

@MichaelD I wanted to make my texture like a spritesheet to use it directly in the button

@jmp909 thanks the link helped me a lot !

[plissken2013es]

You can use the Phaser's Button class (and take advantage on it) if you add the proper spritesheet to the Cache.

For example, given vars "line_y", "textWidth", "text", "style", "i" and "msgGroup".

var btnTexture = this.make.graphics()
                            .beginFill(0xD4A497, 1)
                            .drawRoundedRect(594-textWidth, line_y - (i*32) - 20, textWidth + 20, 30, 5) // first spritesheet frame
                            .beginFill(0xff0000, 1)
                            .drawRoundedRect(594+20, line_y - (i*32) - 20, textWidth + 20, 30, 5)  // second spritesheet frame
                            .endFill()
                            .generateTexture();
                        this.cache.addSpriteSheet(text, null, btnTexture.baseTexture.source, textWidth + 20, 30);
                        var b = this.add.button(594-textWidth, line_y - (i*32) - 20, text, this.onButtonPressed, this, 1, 0); // you may use the two frames that you just created
                        var t = this.add.text(603-textWidth, line_y - (i*32) - 1, text, style);
                        t.anchor.setTo(0, 0.5);
                        this.msgGroup.addMultiple([b, t]);