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":9213,"date":"2019-01-16T08:54:11","date_gmt":"2019-01-16T01:54:11","guid":{"rendered":"https:\/\/phasergames.com\/?p=9213"},"modified":"2019-01-16T09:00:01","modified_gmt":"2019-01-16T02:00:01","slug":"html-buttons-in-phaser-3-form-ui-part-2","status":"publish","type":"post","link":"https:\/\/phasergames.com\/html-buttons-in-phaser-3-form-ui-part-2\/","title":{"rendered":"HTML Buttons in Phaser 3 – Form Ui Part 2"},"content":{"rendered":"\n

Why use HTML buttons in Phaser 3? Normally I use images for buttons in Phaser, but if I’m using other form elements, like input text<\/a>, sometimes it makes sense to use HTML buttons. It also allows me to use CSS styles on the buttons. This can be important because many times I’m handed designs by UI designers who don’t understand the difference between canvas and non-canvas design. <\/p>\n\n\n\n

Adding the buttons<\/h2>\n\n\n\n

Building on the first part of this series<\/a>, I’ve added two HTML form buttons in the HTML with the ids of ‘btnSend’ and ‘btnCancel’. I’ve also added some bootstrap classes for stlying<\/p>\n\n\n\n

<body>\n    <div id=\"phaser-game\">\n    <\/div>\n    <input id=\"myText\" type=\"text\"\/>\n    <textarea id=\"area51\">\n        SOME TEXT HERE\n    <\/textarea>\n    <button class=\"btn btn-success\" id=\"btnSend\" name=\"btnSend\">\n        Send\n    <\/button>\n    <button class=\"btn btn-danger\" id=\"btnCancel\" name=\"btnCancel\">\n        Cancel\n    <\/button>\n<\/body><\/code><\/pre>\n\n\n\n
Adding Bootstrap<\/h2>\n\n\n\n
Next for the styling I’ve linked in the bootstrap from a CDN between the head tags<\/p>\n\n\n\n
 <link crossorigin=\"anonymous\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" integrity=\"sha384-MCw98\/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\n
Scaling and Placing<\/h2>\n\n\n\n
Now for the Phaser part, we can use the same functions we used for lining up and scaling the input text,  for the buttons. In sceneMain’s create function add: <\/p>\n\n\n\n
this.formUtil.scaleToGameW(\"btnSend\", .25);\nthis.formUtil.placeElementAt(101, \"btnSend\");\n\n this.formUtil.scaleToGameW(\"btnCancel\", .25);\n this.formUtil.placeElementAt(107, \"btnCancel\");<\/code><\/pre>\n\n\n\n
Result<\/h2>\n\n\n\n
\"\"
Form Result with number guide on<\/figcaption><\/figure><\/div>\n\n\n\n
Adding Callbacks to the buttons<\/h2>\n\n\n\n
While we could just use simple JavaScript to call functions, I decided to create a function in the FormUtil.js to speed things up, and bring it more in line with the style we are already using in Phaser. In the formUtil.js add the following function:<\/p>\n\n\n\n
 addClickCallback(elName, fun, scope = null) {\n        var el = document.getElementById(elName);\n        if (scope == null) {\n            el.onclick = fun;\n        } else {\n            el.onclick = fun.bind(scope);\n        }\n    }<\/code><\/pre>\n\n\n\n
The addClickCallback function takes an element id that is passed as a string. It gets the element from the document based on the id and then adds a click event linking to the function to that element. If a scope is passed then it binds the scope to the function. Here is how we can use it in sceneMain (bottom of create function)<\/p>\n\n\n\n
 this.formUtil.addClickCallback(\"btnSend\", this.sendForm, this);\n this.formUtil.addClickCallback(\"btnCancel\", this.cancelForm, this);<\/code><\/pre>\n\n\n\n
And then the functions we will be calling<\/p>\n\n\n\n
 sendForm() {\n        console.log(\"sendForm\");\n    }\n cancelForm() {\n        console.log(\"cancelForm\");\n    }<\/code><\/pre>\n\n\n\n
\"\"
Final Result with number guide off<\/figcaption><\/figure><\/div>\n\n\n\t
\n\n\t\t\n\t\t
\n\t\t\t