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":10113,"date":"2019-03-13T10:11:08","date_gmt":"2019-03-13T03:11:08","guid":{"rendered":"https:\/\/phasergames.com\/?p=10113"},"modified":"2019-03-13T10:14:10","modified_gmt":"2019-03-13T03:14:10","slug":"drop-downs-form-ui-part-3","status":"publish","type":"post","link":"https:\/\/phasergames.com\/drop-downs-form-ui-part-3\/","title":{"rendered":"Drop Downs – Form UI part 3"},"content":{"rendered":"\n

In this final part of my series of Phaser Form UI, we will look at adding drop downs to the form. I originally came up with this for adding a form to report abuse in a virtual world. It can also be useful for choosing a range of options when starting a game, especially if there are too many to display with buttons or other graphics. <\/p>\n\n\n\n

This project builds on the code written in the other 2 blog post of this series. Adding input text <\/a>and adding HTML buttons<\/a>.<\/p>\n\n\n\n

Adding the drop down to the html<\/h2>\n\n\n\n

First let’s add a drop down to the index.html. Place this at the end of the HTML just above the <\/body> tag<\/p>\n\n\n\n

<select class=\"form-control\" id=\"optList\" name=\"selectbasic\">\n        \n    <\/select><\/code><\/pre>\n\n\n\n
We can place and scale the optList drop down using the functions we built before. Place these at the end of the create function in SceneMain<\/p>\n\n\n\n
this.formUtil.scaleToGameW(\"optList\", .8);\nthis.formUtil.placeElementAt(27, \"optList\");<\/code><\/pre>\n\n\n\n
Adding new functions to formUtil<\/h2>\n\n\n\n
Our FormUtil will need some new functions to deal with drop downs. The first being to add an option. We will pass in the id of the drop down, the text to display and an object that can contain data for the item. The code will get the drop down element,<\/g> and then create a new option. Fill in the data and then add it to the drop down.<\/p>\n\n\n\n
 addOption(dropDown, text, item) {\n        var select =  document.getElementById(dropDown);\n        var option = document.createElement('option');\n        option.text = text;\n        option.data = item;\n        select.add(option, 0);\n    }<\/code><\/pre>\n\n\n\n
From Phaser we can add options to the drop down like this<\/p>\n\n\n\n
this.formUtil.addOption(\"optList\", \"Wizard\", {\n            id: 1,\n            magic: 10,\n            str: 5\n        });\n        this.formUtil.addOption(\"optList\", \"Elf\", {\n            id: 2,\n            magic: 6,\n            str: 6\n        });\n        this.formUtil.addOption(\"optList\", \"Warrior\", {\n            id: 3,\n            magic: 1,\n            str: 10\n        });<\/code><\/pre>\n\n\n\n
Listen for Events<\/h2>\n\n\n\n
We can use the functions already written to add a change callback<\/p>\n\n\n\n
this.formUtil.addChangeCallback(\"optList\", this.optListChanged, this);<\/code><\/pre>\n\n\n\n
Then we need to be able to get information that is selected. There are 3 different functions we can create for this.<\/p>\n\n\n\n
Get the selected data<\/p>\n\n\n\n
 getSelectedItem(dropDown) {\n        var e = document.getElementById(dropDown);\n        return e.options[e.selectedIndex].data;\n    }<\/code><\/pre>\n\n\n\n
Get the selected index, such as 0,1,2,3<\/p>\n\n\n\n
getSelectedIndex(dropDown) {\n        var el = document.getElementById(dropDown);\n        return el.selectedIndex;\n    }<\/code><\/pre>\n\n\n\n
Get the text displayed in the dropdown<\/p>\n\n\n\n
  getSelectedText(dropDown) {\n        var e = document.getElementById(dropDown);\n        return e.options[e.selectedIndex].text;\n    }<\/code><\/pre>\n\n\n\n
Callback function<\/h2>\n\n\n\n
Then all that’s left is to create the function that we referenced earlier.<\/p>\n\n\n\n
optListChanged() {\n        console.log(\"optListChanged\");\n        var obj=this.formUtil.getSelectedItem('optList');\n        console.log(obj);\n\n    }<\/code><\/pre>\n\n\n\n
Adding Labels<\/h2>\n\n\n\n
Since the formUtil<\/g> also contains an alignGrid<\/a>, we can use that alignGrid to place Phaser game objects around the form elements. <\/p>\n\n\n\n
var label=this.add.text(0,0,\"Character name\",{fontSize:game.config.width\/20,color:'#ffffff'});\n label.setOrigin(0.5,0.5);\n this.formUtil.alignGrid.placeAt(5,0.5,label);<\/code><\/pre>\n\n\n\n
Here is the final result<\/p>\n\n\n\n
\"\"
Phaser 3 Drop Downs<\/figcaption><\/figure><\/div>\n\n\n\n
I hope this has been helpful to you. You can download the complete code below.<\/p>\n\n\n\t
\n\n\t\t\n\t\t
\n\t\t\t