Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php on line 101

Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks/edd-blocks.php on line 101

Warning: The magic method GAINWP_Manager::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/gainwp.php on line 78

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 555

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 585

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 617

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 651

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 686

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 745

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 785

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":3062,"date":"2017-12-20T08:06:40","date_gmt":"2017-12-20T08:06:40","guid":{"rendered":"https:\/\/phasergames.com\/?p=3062"},"modified":"2018-05-23T07:36:18","modified_gmt":"2018-05-23T07:36:18","slug":"dynamic-text-buttons-phaser","status":"publish","type":"post","link":"https:\/\/phasergames.com\/dynamic-text-buttons-phaser\/","title":{"rendered":"Dynamic Text Buttons using Phaser and images"},"content":{"rendered":"

Dynamic Text Buttons using Phaser<\/h1>\n
A lot of my game development time will be eaten up by looking for the right buttons or artwork. It drives me crazy when I want to code. I needed a good library of buttons. It will take up more of my time if I have to copy the buttons and change the text on each one. So it was important to write something where I could pass the button text as a string.\u00a0 Coding is made so much easier by being able to reuse code and assets over and over. That’s why I came up with Dynamic Text Buttons using Phaser<\/p>\n
Here are a few examples:<\/p>\n
$\"dynamic$ <\/p>\n
First I’ll show you how to use the buttons, and then we will go over how the button is made.<\/p>\n

How to use the TextButton<\/h2>\n

The button dispatches events via a Phaser.Signal, you can learn about events here<\/a>.<\/p>\n

The format for using the button is<\/p>\n

var btnLevel=new TextButton(text,set,style,event,params,font size,text color);<\/pre>\nand a practical example is<\/p>\nvar btnLevel=new TextButton(\"Press Me\",6,2,G.CHANGE_STATE,\"StateLevels\",32,'#ffffff');<\/pre>\nLet’s have a quick look at the parameters…<\/p>\nParameters:<\/h3>\n\n\n\nText- the button text<\/li>\n
Set – the folder number containing the image<\/li>\n
Style – image number<\/li>\n
Event- a string<\/li>\n
Params-parameters to pass along with the event<\/li>\n
Font Size-the font size in pixels<\/li>\nTextColor-a hex color like #ff0000 (red)\u00a0 passed as a string<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nYou will find the images for the text buttons in the images folder: images\/ui\/buttons<\/p>\n
I refer to the folders as sets and the numbers of each png image as a style<\/p>\n
So set 1 style 2 would be a path of images\/ui\/buttons\/1\/2.png<\/p>\n
<\/p>\nHow to make the TextButton<\/h2>\nThe button is part of the ultimate game parts template<\/a>, but in case you’d like to see how it is made:<\/p>\n
class TextButton extends Phaser.Group {\r\n    constructor(text = 'button', set = 1, style = 1, event = null, params = null, size = 22, textColor = '#000000') {\r\n        super(game);\r\n        \r\n        \/\/place in center of the screen\r\n        this.x = game.width \/ 2;\r\n        this.y = game.height \/ 2;\r\n        var key = \"buttons_\" + set + \"_\" + style;\r\n        \r\n        \/\/promote parameters to class variables\r\n        this.key = key;\r\n        this.text = text;\r\n        this.event = event;\r\n        this.params = params;\r\n        \/\/\r\n        \/\/\r\n        \/\/\r\n        \/\/make the back\r\n        this.buttonBack = this.create(0, 0, this.key);\r\n        \/\/set the anchor to center\r\n        this.buttonBack.anchor.set(0.5, 0.5);\r\n        \/\/\r\n        \/\/\r\n        \/\/\r\n        \/\/add the textfield\r\n        this.textField = game.add.text(0, 0, text);\r\n        \/\/anchor the text in the center\r\n        this.textField.anchor.set(0.5, 0.5);\r\n        \/\/\r\n        \/\/\r\n        \/\/set the size\r\n        this.textField.fontSize = size + \"px\";\r\n        \/\/set the color\r\n        this.textField.fill = textColor;\r\n        \/\/add the textField \r\n        this.add(this.textField);\r\n\r\n        \/\/enable the button and add events\r\n        this.buttonBack.inputEnabled = true;\r\n        this.buttonBack.events.onInputUp.add(this.onReleased, this);\r\n        this.buttonBack.events.onInputDown.add(this.onDown, this);\r\n    }\r\n    \/\/preload a single style\r\n    static preload(set, style) {\r\n        var key = \"buttons_\" + set + \"_\" + style;\r\n        var path = \"images\/ui\/buttons\/\" + set + \"\/\" + style + \".png\";\r\n        game.load.image(key, path);\r\n    }\r\n    \/\/preload all the buttons\r\n    static preloadAll() {\r\n        var lenArray = [10, 8, 15, 14];\r\n        for (var i = 1; i < 5; i++) {\r\n            for (var j = 1; j < lenArray[i - 1] + 1; j++) {\r\n                TextButton.preload(i, j);\r\n            }\r\n        }\r\n    }\r\n    \/\/set the x and y position of the button\r\n    setPos(x, y) {\r\n        this.x = x;\r\n        this.y = y;\r\n    }\r\n    \/\/get the back, in order to add events directly to the sprite\r\n    getBack() {\r\n        return this.buttonBack;\r\n    }\r\n    \/\/move up a bit when pressed\r\n    onDown() {\r\n        this.buttonBack.y = -5;\r\n    }\r\n    \/\/dispatch the event\r\n    onReleased() {\r\n        this.buttonBack.y = 0;\r\n        if (this.event) {\r\n            if (this.params) {\r\n                eventDispatcher.dispatch(this.event, this.params);\r\n            } else {\r\n                eventDispatcher.dispatch(this.event);\r\n            }\r\n        }\r\n    }\r\n    \/\/set the text size\r\n    setTextSize(size) {\r\n        this.textField.fontSize = size + \"px\";\r\n    }\r\n    \/\/set the text position\r\n    setTextPos(xx, yy) {\r\n        this.textField.x = xx;\r\n        this.textField.y = yy;\r\n    }\r\n    \/\/set the text color\r\n    setTextColor(textColor) {\r\n        this.textField.fill = textColor;\r\n    }\r\n    \/\/get the text field\r\n    getTextField() {\r\n        return this.textField;\r\n    }\r\n    \/\/get the text inside the textField\r\n    getText() {\r\n        return this.textField.text;\r\n    }\r\n}<\/pre>\nListen for the button press<\/h2>\nSo now when I’m building a game and I need a quick button all I need to do is<\/p>\n\nCreate a button<\/li>\n<\/ol>\nthis.btnStart=new TextButton(\"Start\",4,1,\"loadState\",\"StateMain\",14,'#ffffff');<\/pre>\n<\/p>\n
2. Set up a listener anywhere in the game<\/p>\neventDispatcher.add(this.gotEvent, this);<\/pre>\n3. Set up the listener’s function<\/p>\ngotEvent(call, params) {\r\n   if (call==\"loadState\")\r\n   {\r\n   \tgame.state.start(params);\r\n   }\r\n}<\/pre>\nOnce I get to this point, adding new buttons is a snap!<\/p>\n
This has sped up my production time quite a bit, and I hope you find it helpful.<\/p>\n\t\n\n\t\t\n\t\t\n\t\t\t

Parameters:<\/h3>\n\n\n\nText- the button text<\/li>\nSet – the folder number containing the image<\/li>\nStyle – image number<\/li>\nEvent- a string<\/li>\nParams-parameters to pass along with the event<\/li>\nFont Size-the font size in pixels<\/li>\n

Listen for the button press<\/h2>\nSo now when I’m building a game and I need a quick button all I need to do is<\/p>\n