Phaser 3 Input Text – Form Ui- Part 1

Phaser 3 Input Text

About a month ago I needed to find a way to implement a Phaser 3 input text field. This was due to needing to put a form into a Phaser 3 virtual world project I was working on. I had already placed an input element below the canvas for users to send chats to each other, but this needed much more space. 

Could I accomplish my project’s goals without having to totally rewrite a text field, dropdowns, and other form elements ?

Then I remembered in Phaser 2 we did have an input field that was a plug-in. I recalled that the developer added an actual HTML form element over the existing HTML5 canvas. Could I use some of the experiments I’ve been doing with the AlignGrid for form elements as well? So far I had only been using it to align sprites, text and images inside the canvas.

I realized I could do it but with a limitation.  That limit being that the canvas had to be in the top left-hand corner of the webpage. If I did need it to be in the middle of a webpage I could accomplish the task using an iframe. This did not pose too much trouble with my work because my games are either on mobile which means they’re in the top left-hand corner already or I use a pop-up window if the player is trying to use the game on a desktop or laptop. This post will focus on the Phaser 3 text input and I will follow up with additional posts covering buttons and dropdowns. 
  Here is the final result below. 

Phaser 3 Input Text and Form Elements

The Phaser Code

Instead of adding a text field dynamically I decided to work with existing form elements placed into the index.html. I would then write a class that would allow me to keep writing in the Phaser code style I was accustomed to. It was important that I did all the scaling and aligning from a Phaser Scene. You can see what I mean in  a sample of my sceneMain.

The Html Code

For the HTML I used simple form elements after the game div tag with the id tags set to ‘myText’ for the text field and ‘area51’ for the text area.

The FormUtil Class

For the formUtil class, I borrowed a lot of code from my AlignGrid class.  I also added a few functions to get the text value as well. The text area on change only works when the text area loses focus, but you could easily check the value when a button is pressed, which I will cover in the next section. 

Phaser 3 input text example

I hope this has been helpful. If you give it a try, I’d love your feedback.


Leave a Reply