Drop Downs – Form UI part 3

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.

This project builds on the code written in the other 2 blog post of this series. Adding input text and adding HTML buttons.

Adding the drop down to the html

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

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

Adding new functions to formUtil

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, and then create a new option. Fill in the data and then add it to the drop down.

From Phaser we can add options to the drop down like this

Listen for Events

We can use the functions already written to add a change callback

Then we need to be able to get information that is selected. There are 3 different functions we can create for this.

Get the selected data

Get the selected index, such as 0,1,2,3

Get the text displayed in the dropdown

Callback function

Then all that’s left is to create the function that we referenced earlier.

Adding Labels

Since the formUtil also contains an alignGrid, we can use that alignGrid to place Phaser game objects around the form elements.

Here is the final result

Phaser 3 Drop Downs

I hope this has been helpful to you. You can download the complete code below.

Leave a Reply