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

Posted on 10th Jun 2020. Follow @phaser_ and get the Phaser World newsletter.


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


Read More

Learn to code and lead your intrepid crew on a mission to save The Cloud in TwilioQuest, a PC role-playing game inspired by classics of the 16-bit era. Free forever, and available now for Windows, Mac, and Linux.

The first book on the creation of HTML5 cross platform games using Phaser 3 and other free software.
  • By Emanuele Feronato
  • 155 Pages
  • 28 Source Code Examples
  • Build a complete game from start to finish
  • Cross Platform
  • Scaling for devices
Buy Now