Add Text Input to Your Phaser 3 Game with RexUI

Let players input text with the TextEdit plugin.

by on 4 minute read updated on


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

Next Steps

Rex has over a dozen other UI components you can use in your Phaser game.

Check them out here.

The documentation is not amazing but the general set up is going to look a lot like what we did here for TextEdit.

Be sure to sign up for our newsletter so you don't miss any future Phaser 3 game development tips and techniques! Drop your email into the box below.

Don't miss any Phaser 3 game development content

Subscribers get exclusive tips & techniques not found on the blog!

Join our newsletter. It's free. We don't spam. Spamming is for jerks.

Updated March 17th, 2020: Removed unnecessary plugin imports and onTextChanged callback after insights from Rex Rainbow.

Phaser 3 UI rexui text input

Want tips and techniques more suited for you?


You may also like...


Video Guides


Beginner Guides


Articles Recommended For You

Command Pattern to Undo Player Actions

by on

Are you looking for a clean and reusable way to implement undo for player actions? Perhaps you are making a turn-based …

15 minute read

Advanced Logging with the Strategy Pattern

by on

Have you ever tried debugging a problem with your game that only seems to happen in production? The Developer Tools …

7 minute read

State Pattern for Character Movement in Phaser 3

by on

Writing clean and well-organized code is something all game developers aspire to. We want code to be reusable and easy …

7 minute read

Memory Match in Modern Javascript with Phaser 3 - Part 6

by on

If you've got the basics of Phaser 3 in modern JavaScript down then it might be time to try making something a bit more …

8 minute read

Didn't find what you were looking for?


comments powered by Disqus