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

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":1385,"date":"2017-08-02T15:21:24","date_gmt":"2017-08-02T15:21:24","guid":{"rendered":"https:\/\/phasergames.com\/?p=1385"},"modified":"2017-08-02T15:28:12","modified_gmt":"2017-08-02T15:28:12","slug":"phaser-animated-buttons","status":"publish","type":"post","link":"https:\/\/phasergames.com\/phaser-animated-buttons\/","title":{"rendered":"Phaser Animated Buttons"},"content":{"rendered":"

This post is in\u00a0response to a Phaser Game Makers Group<\/a> member’s question. The question arose from trying to convert a flash slot game into Phaser. Now most of us coming from flash remember that it is quite easy to make a button in flash with the IDE tool. By dragging images we were able to quickly define up, down and over states. Phaser also includes a way to define a button in this way.<\/p>\n

game.add.button(x,y,imageKey,clickFunction,this,over_frame,normal_frame,down_frame)<\/pre>\n
In this case, what the programmer is trying to copy is a button that looks as if it is being pressed on its own, to try\u00a0to draw the attention of the player into pressing it. So for this example, I will not be using a Phaser button, but instead a sprite. Now I want to stress at the start, that there are so many different ways to do this. This is simply the first one that came to mind.<\/p>\n
I was sent two different images, but I have replaced them with my own, just for demonstration purposes, and combined them into 1 sprite sheet.<\/p>\n
\"\"<\/p>\n
I will be using a function to make a copy of the buttons, so I can have 1 normal, and 1 animated button. You can see more about this technique in my Complex Objects Tutorial<\/a>. I will also funnel all button events through 2 central functions. If this were a full game or app, I would simply make a switch statement inside the buttonPressed function.<\/p>\n
var StateMain = {\r\n    preload: function() {\r\n        \/\/load the sprite sheet\r\n        game.load.spritesheet(\"buttons\", \"images\/buttons.png\", 144, 68, 2);\r\n    },\r\n    create: function() {\r\n        \/\/just some debug text\r\n        this.text1 = game.add.text(game.width \/ 2, 0, \"0\");\r\n        this.text1.anchor.set(0.5, 0);\r\n        this.text1.fill = \"#ffffff\";\r\n        \/\/create 2 buttons\r\n        this.button1 = this.makeButton(game.width \/ 2, game.height * .25, 1);\r\n        this.button2 = this.makeButton(game.width \/ 2, this.button1.y + this.button1.height * 1.1, 2);\r\n        \/\/add animation to the 2nd button\r\n        \/\/add more zeros to slow down the animation\r\n        \/\/use less zeros to speed up the animation\r\n        this.button2.animations.add(\"auto\", [0, 0, 0, 0, 0, 0, 1], 3, true);\r\n        this.button2.animations.play(\"auto\");\r\n    },\r\n    \/**\r\n     * Function to make a copy of the button template\r\n     *\/\r\n    makeButton(xx, yy, index) {\r\n        var button = game.add.sprite(xx, yy, \"buttons\");\r\n        button.index = index;\r\n        button.anchor.set(0.5, 0.5);\r\n        button.inputEnabled = true;\r\n        button.events.onInputDown.add(this.buttonPressed, this);\r\n        button.events.onInputUp.add(this.buttonReleased, this);\r\n        return button;\r\n    },\r\n    buttonPressed(target) {\r\n        \/\/show the down frame\r\n        target.frame = 1;\r\n        this.text1.text = target.index;\r\n    },\r\n    buttonReleased(target) {\r\n        \/\/show the up frame\r\n        target.frame = 0;\r\n        this.text1.text = 0;\r\n    },\r\n    update: function() {}\r\n}<\/pre>\n
And Here is the result<\/p>\n\n\n