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

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":3067,"date":"2017-12-17T05:07:13","date_gmt":"2017-12-17T05:07:13","guid":{"rendered":"https:\/\/phasergames.com\/?p=3067"},"modified":"2017-12-17T05:11:50","modified_gmt":"2017-12-17T05:11:50","slug":"dispatching-events-phaser-signal","status":"publish","type":"post","link":"https:\/\/phasergames.com\/dispatching-events-phaser-signal\/","title":{"rendered":"Dispatching Events with Phaser.Signal"},"content":{"rendered":"

The Event Dispatcher<\/h2>\n

In my opinion, one of the best and most overlooked features of Phaser is the Signal class.\u00a0 With just a few steps you can create a clean global broadcasting system.\u00a0 It also eliminates the headache that javascript often causes with scopes and callbacks.<\/p>\n

Here’s a quick example to show you how to do that.<\/p>\n

I’ll be starting with the basic template<\/a> and the dot image below.<\/p>\n

Let’s create a dot that is either blue or pink and place in a random position. We will make a class that extends Phaser.Group called dot in the js folder.<\/p>\n

\"\"<\/p>\n

class Dot extends Phaser.Group\r\n{\r\n\tconstructor()\r\n\t{\r\n\t\tsuper(game);\r\n\t\t\/\/add sprite\r\n\t\tvar s=game.add.sprite(0,0,\"dot\");\r\n\t\ts.anchor.set(0.5,0.5);\r\n\t\tthis.add(s);\r\n\t\t\/\/\r\n\t\t\/\/place at random position on stage\r\n\t\tthis.x=game.world.randomX;\r\n\t\tthis.y=game.world.randomY;\r\n\r\n\t\t\/\/chose a random frame(color)\r\n\t\ts.frame=game.rnd.integerInRange(0, 1);\r\n\r\n                \/\/promote to class property to access from \r\n                \/\/other functions\r\n                this.s=s;\r\n\r\n\r\n\t\t\/\/add an onInputDown event\r\n\t\ts.inputEnabled=true;\r\n\t\ts.events.onInputDown.add(this.pressed,this);\r\n\t}\r\n\tpressed()\r\n\t{\r\n\t\t\/\/move the dot down and left\r\n\t\tthis.x++;\r\n\t\tthis.y++;\r\n\t}\r\n}<\/pre>\n
Include the dot.js file in index.html<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Game Title Here<\/title>\r\n    <script src=\"js\/phaser.min.js\">\r\n    <\/script>\r\n    <script src=\"js\/main.js\"><\/script>\r\n    <script src=\"js\/stateMain.js\"><\/script>\r\n    <script src=\"js\/dot.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html><\/pre>\n
Load the dot sprite sheet in stateMain.js and make a new dot<\/p>\n
var StateMain = {\r\n    preload: function() {\r\n        game.load.spritesheet(\"dot\", \"images\/dots.png\", 40, 40);\r\n    },\r\n    create: function() {\r\n        var dot = new Dot();\r\n    },\r\n    update: function() {}\r\n}<\/pre>\n
Just for reference, this is the main.js which creates the game. We will be modifying\u00a0it later.<\/p>\n
var game;\r\nwindow.onload = function() {\r\n    var isMobile = navigator.userAgent.indexOf(\"Mobile\");\r\n    if (isMobile == -1) {\r\n        game = new Phaser.Game(480, 640, Phaser.AUTO, \"ph_game\");\r\n    } else {\r\n        game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, \"ph_game\");\r\n    }\r\n    game.state.add(\"StateMain\", StateMain);\r\n    game.state.start(\"StateMain\");\r\n}<\/pre>\n
 <\/p>\n
Run the code in your browser and you’ll get a random dot. Press the dot and it moves down and to the right.<\/p>\n
 <\/p>\n
\"\"<\/p>\n
 <\/p>\n
Now let’s add more dots by surrounding the code used to make the dot with a for loop<\/p>\n
var StateMain = {\r\n    preload: function() {\r\n        game.load.spritesheet(\"dot\", \"images\/dots.png\", 40, 40);\r\n    },\r\n    create: function() {\r\n    \tfor (var i = 0; i < 50; i++) {\r\n    \t\tvar dot = new Dot();\r\n    \t}\r\n        \r\n    },\r\n    update: function() {}\r\n}<\/pre>\n
\"\"<\/p>\n
Now everytime you click a dot that single dot moves down. But what if we want to move all of the dots?<\/p>\n
We could call to a function using this.parent to loop all the children through the group. This would work in this example but would break if the dot moved to somewhere else, such as another group.<\/p>\n
A more elegant solution, and one that once you become used to using it is going to save you a lot of time and trouble.<\/p>\n
Introducing Phaser.Signal<\/h3>\n
Phaser.Signal allows us to have a global broadcasting station, and we can listen to it from anywhere!<\/p>\n
In main.js we create a global instance of Phaser.Signal called eventDispatcher (This is a holdover reference from my flash days)<\/p>\n
var game;\r\n\/\/create a global reference\r\nvar eventDispatcher;\r\nwindow.onload = function() {\r\n    var isMobile = navigator.userAgent.indexOf(\"Mobile\");\r\n    if (isMobile == -1) {\r\n        game = new Phaser.Game(480, 640, Phaser.AUTO, \"ph_game\");\r\n    } else {\r\n        game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, \"ph_game\");\r\n    }\r\n    \/\/make the event dispatcher\r\n    eventDispatcher = new Phaser.Signal();\r\n    game.state.add(\"StateMain\", StateMain);\r\n    game.state.start(\"StateMain\");\r\n}<\/pre>\n
Broadcast!<\/h2>\n
To broadcast an event we simply need to dispatch it<\/p>\n
eventDispatcher.dispatch(eventName);<\/pre>\n
where eventName is a string.<\/p>\n
Listen In!<\/h2>\n
To listen for an event<\/p>\n
eventDispacher.add(function,this);<\/pre>\n
So back to our sample code, let’s move the code in the function pressed in the class dot to its own function called moveMe()<\/p>\n
pressed()\r\n{\r\n\t\t\r\n}\r\nmoveMe()\r\n{\r\n   \/\/move the dot down and left\r\n    this.x++;\r\n    this.y++;\r\n}<\/pre>\n
In the now empty function pressed() let’s dispatch an event instead<\/p>\n
pressed()\r\n{\r\n    eventDispatcher.dispatch(\"moveDot\");\r\n}<\/pre>\n
and now listen for that same event by placing this code in the event function.<\/p>\n
eventDispatcher.add(this.gotEvent,this);<\/pre>\n
Then we build the function gotEvent<\/p>\n
gotEvent(call)\r\n\t{\r\n\t \/\/check for which event\r\n\t \/\/in case we broadcast more than one\r\n\t   if (call==\"moveDot\")\r\n\t   {\r\n\t    this.moveMe();\r\n\t   }\r\n\t}<\/pre>\n
Now clicking a dot will move every dot! Even if you add the dot’s parent changes, like if you add it to another group, the call will still get through<\/p>\n
Adding Parameters<\/h3>\n
But what if we only want to move the same color as the dot that is clicked?<\/p>\n
Phaser.Signal allows for a parameter to be passed along with the event. It can be a number, string or object.<\/p>\n
We just need to make a few small changes.<\/p>\n
Add the parameter to the dispatch, in this case, the frame of the sprite<\/p>\n
pressed()\r\n{\r\n    eventDispatcher.dispatch(\"moveDot\",this.s.frame);\r\n}<\/pre>\n
Add in the parameter as the second parameter\u00a0of the gotEvent function and check it against the frame of the sprite inside that instance of dot<\/p>\n
gotEvent(call,params)\r\n\t{\r\n\t\t\/\/check for which event\r\n\t\t\/\/in case we broadcast more than one\r\n\t\tif (call==\"moveDot\")\r\n\t\t{\r\n\t\t\tif (params==this.s.frame)\r\n\t\t\t{\r\n\t\t\t\tthis.moveMe();\r\n\t\t\t}\t\t\t\r\n\t\t}\r\n\t}<\/pre>\n
Now only the color that you click will change!<\/p>\n\t
\n\n\t\t\n\t\t
\n\t\t\t