In the first part of this tutorial, William Clarkston shows us how to create a text input field for Phaser 3.

Article by Scott Westover. Posted on 10th Jun 2020.   @swestover06

image

William Clarkson has released an excellent tutorial on creating a Phaser 3 Text Input on Phaser Games. In the first part of this tutorial, you will start creating a simple text form ui that you can use in your Phaser game.

From the article: "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.

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."

image

Read More