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. If you prefer, I’ve made a video example here.

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);

50 Downloads