Add Text Input to Your Phaser 3 Game with RexUI

Let players input text with the TextEdit plugin.

by Tommy Leung on March 2, 2020 4 minute read updated on March 17, 2020

At some point, your game will want text input to collect information from your player like their name for a save file or a high score leaderboard.

Phaser doesn't have native UI controls although you can use any CSS UI framework via the DOMElement like we did here for buttons.

But maybe you just aren't into HTML. You're a game developer; not a web developer. 💁‍♀️

If you've done your share of searching in the Phaser community then you've probably come across RexUI by Rex Rainbow.

In this article, we will look at using Rex's Text Edit plugin to let players enter text.

Load the RexUI Plugins

If you are not using npm then you can load the plugins in the Scene preload method like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


preload()
{	
	this.load.scenePlugin({
		key: 'rexuiplugin',
		url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
		sceneKey: 'rexUI'
	})
	
	this.load.plugin('rextexteditplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexteditplugin.min.js', true)
}

Those URLs might change so consider downloading the files and adding them to your project instead of loading them from Github.

Alternatively, you can use npm and install the phaser3-rex-plugins package.

npm install phaser3-rex-plugins

And then add the plugin to your game config:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin'

const config = {
	// ...
	parent: 'phaser-container',
	dom: {
        createContainer: true
    },
	plugins: {
		scene: [
			{
				key: 'rexUI',
				plugin: RexUIPlugin,
				mapping: 'rexUI'
			}
		]
    }
}

export default new Phaser.Game(config)

Note that we are specifying the id of the container that Phaser should add its canvas to in the parent key and setting dom.createContainer to true.

We need both these settings because the Rex TextEdit plugin uses an Input element.

Using the TextEdit Plugin

We will need to create a normal Phaser.GameObjects.Text instance to use with the TextEdit plugin.

The plugin works by hiding the Text instance and then overlaying an HTML Input element that allows text input.

1
2
3
4
5
6
7
8
9


create()
{
	const text = this.add.text(400, 300, 'Hello World', { fixedWidth: 150, fixedHeight: 36 })
	text.setOrigin(0.5, 0.5)

	text.setInteractive().on('pointerdown', () => {
		this.rexUI.edit(text)
	})
}

The above code should be in the create() method of your Scene.

The text becomes editable after it is clicked on. The plugin will automatically close on click off or pressing the Enter key.

Give it a spin and you should be able to edit text after clicking on it. 🎉

Things to Consider

The revealed Input element did not align perfectly with the Phaser Text instance in our tests so it doesn't look seamless.

A potential solution is to access the Input element and adjust it. The this.rexUI.edit() method returns a TextEdit instance.

1
2
3


const editor = this.rexUI.edit(text)
const elem = editor.inputText.node
// use elem as necessary

We have not tested this approach so your mileage may vary.

Another thing to note is that you can't keep it in edit mode. The player has to click on the text before making edits.

This could be a problem depending on your intended UX and game flow.

Lastly, this is based on the Input DOM element so it will always render above everything else in your game. This is almost never a problem for UI but knowing this might save you hours of trying to layer it between Phaser GameObjects. 😅