Phaser 3 Input Text Example Code

Needing a way to put text input into a Phaser 3 game, I came up with this FormUtil.js class. You can read more about it here.

This example relies on you placing form elements inside the HTML file.

Usage

  1. Make an instance of the formUtil class

this.formUtil = new FormUtil({
scene: this,
rows: 11,
cols: 11
});

2. show the grid for aligning and debugging

this.formUtil.showNumbers();

3. scale and place the input text.

this.formUtil.scaleToGameW(“myText”, .3);
this.formUtil.placeElementAt(16, ‘myText’, true);