Text Input

Phaser 3
1

Hey all,

I’m creating a game that needs text input, but I don’t seem to see any examples for a text input.

For context, I don’t need to do any specific task with the text, I just need the player to enter some and keep it displayed during the game.

I tired this: https://github.com/azerion/phaser-input
but that requires an installatio from npm which I don’t have.

Any suggestions on how I can download it from github and where do I install it if I download it from that repo?

2

Hi,

You could use the phaser.dom for this.
Here is the example from the phaser dom examples that shows how to add text input.
https://labs.phaser.io/view.html?src=src\game%20objects\dom%20element\input%20test.js

Hope this helps :slight_smile:

1 Like
3

i have a text-edit plugin, which creating an input element when clicking the tex tobject.
Here is a demo, document. And this plugin is also a part of my rexUI plugin, here is another demo.

4

Hey @kdhingra are you using Phaser3 or the older one, Phaser CE? If the one with PIXI inside, you can use my HTML Element Wrapper : https://github.com/EneaEntertainment/phaser-html-element-wrapper

Just include the script into game et voila.

5

I’m using Phaser 3, I don’t know if has PIXI

6

this is exactly what I wanted, but if I put more than one text box, only the last one works?
I need multiple in my game, is it possible to change that?

Also, is there a way to store the entered text in a variable? I tried using the printText variable but it didn’t work. Any suggestions?

Thank you so much!

7

Input element will be shown when clicking the text object (from touch event), and this text object will be set to invisible.
Text changing of input element will be stored into origin text object, once user closes input element, it will be destroyed and origin text object will be set to visible. Therefore you can read the result from origin text object.
And yes, only 1 input element will be created, which means that user is editing that text object. This plugin still support multiple textbox, see that demo, it has 2 editable text objects.

8

I came up with a workaround that keeps most of the code in Phaser.

9

I tried to do this, there an html file that is loaded in the preload function. What I put in my html file did not work ( I put the html code for a button and text input box) . Do you know what I should put in the html file?

10

Hi kdhingra,

Here is the link to the html file that is loaded in the examples

Only things I can think of is to make sure you use ‘name’ or ‘id’ on the input like the example. Also the phaser dom can only be used with version 3.17 or above.

Hope this helps :slight_smile:

1 Like
11

This worked! Thank you.
Is there any way to edit the text afterwards?

12

I realize this is an old post, but for anyone else who reads it, looking for a way to implement input forms, here is a code for creating input forms directly in the phaser canvas with no HTML/DOM overlay.
Code: https://github.com/ErlendKK/Input-form-built-in-Phaser-3.5-with-no-DOM-Element/blob/main/menu.js
Demo: Input Form Phaser 3.5