Input Text

[sky-is-winning]

It's pretty annoying to have to create the input text boxes manually with the Rex plugin every time I want to add an input option to my game. I'm not sure how possible it'd be, since it's not supported without a plugin in Phaser3 iirc, (pretty sure you did it with nineslicing though?) but it'd be a great help, I keep running into issues with input boxes not being hidden or destroyed properly - positioning and sizing them is a pain too, and having a way to do it in the editor would be amazing. I'd be willing to sponsor and throw you a few more $$ if that'd be something you'd be willing to look into ASAP.

[PhaserEditor2D]

Hi. I see two problems here. The implementation of the Input object and the tools in the editor.

Do you think the Rex implementation is fine?

[sky-is-winning]

The Rex implementation is alright, main issue with it is the destroying / hiding of the input text, but without it being native in phaser any implementation would have that issue I think.

[PhaserEditor2D]

What do you mean with hiding it? Overlaping it with another objects? Or just hiding it from the whole scene?

[sky-is-winning]

Overlapping it with another object is not possible, since it's in html as a DOM object it's always on top. Hiding it from the whole screen sometimes just doesn't work for an unknown reason. It's never happened to me, so I haven't been able to check what causes it, but some other players of my game have reported it.

[PhaserEditor2D]

Ok.

[sky-is-winning]

I suppose alternatively you could create some way to detect if the mouse is over the portion of the screen it's meant to be visible in and otherwise replace it with a phaser text object? Even with this, it'd still appear on top when the user is interacting with it though.

[PhaserEditor2D]

I am not sure. For that reason I asked to you if the implementation of the Rex plugin is ok. Then I can focus more on the editor side and less in the input text implementation.

Anyway I will take a look. Whi knows and I end making my own implementation more friendly with the editor. Just like I did with the ninepatch plugin.

[sky-is-winning]

I am not sure. For that reason I asked to you if the implementation of the Rex plugin is ok. Then I can focus more on the editor side and less in the input text implementation.

Anyway I will take a look. Whi knows and I end making my own implementation more friendly with the editor. Just like I did with the ninepatch plugin.

Thanks so much for taking a look! It'll be a great help if you do end up implementing it :))

[PhaserEditor2D]

You know... Maybe I will mske my own implementation just as you said. Using a Text and showing up an input only when you click the text.

It would be great if you showme some images of how would you like to see it.

[sky-is-winning]

Yeah sure. Made a mockup of how it could be used in the editor. Actual positioning and stuff would be very similar to the standard text tool, with sizing done how the rectangle tool does. For the interactivity part, it could be as simple as just cloning the input text as a standard text option, something like

const input_text_whatever = new InputTextPlugin(scene, size, position, defaulttext, whatever other options)

export default class InputTextPlugin{
     constructor(scene, size, positition, defaulttext, whatever other options){
          this.phasertext = scene.add.text(size, positition, defaulttext, whatever other options);
          this.phasertext.setInteractive()
          this.textobject = new DOM(whatever the input text is)
          this.phasertext.on('pointerover', function (pointer){
              this.textobject.visibility = "shown"
          }
          this.phasertext.on('pointerout', function (pointer){
              this.textobject.visibility = "hidden"
          }
     }

     onTextInput(){
         this.phasertext.text = this.textobject.textContent
     }
}

[PhaserEditor2D]

Thanks!

And how it should look? I mean, visually? An input text with borders? Rounded borders? I want to see your current input text in your game.

[PhaserEditor2D]

Look that if you are going to use a Text object, then you don't need a plugin at all.

You can create an InputDOM user component that will listen for the click event on the Text object. Then it can hide the object and show the DOM element. And you can positioning, resize, etc... the Text object in the Phaser Editor.

For doing it, you don't need to create a Phaser Editor plugin.

[PhaserEditor2D]

You can create a user component or a Text prefab, as you wish.

[PhaserEditor2D]

By the way, do you expect it to work on mobile? The mobile keyboard has different challenges. For example, it fills half of the screen, scrolls the page, and focuses on the input text. I don't know how it will work on a Phaser game.

[sky-is-winning]

Thanks!

And how it should look? I mean, visually? An input text with borders? Rounded borders? I want to see your current input text in your game.

It'd be great to have the option to customise that in the editor. The DOM object itself wouldn't really need styling because the phaser text object would handle that. Here's how one of the input text objects currently looks. The DOM object itself only has the text input, the styling is just controlled by a rectangle behind it. This is preferred because in the case there is something else on top of the text object, with a higher depth, styling the DOM object will make it appear as if the text is on the top, which may create an issue with having a logo, like a search icon in the same space as the text object - it would be layered incorrectly.

[sky-is-winning]

By the way, do you expect it to work on mobile? The mobile keyboard has different challenges. For example, it fills half of the screen, scrolls the page, and focuses on the input text. I don't know how it will work on a Phaser game.

Whilst mobile compatibility is preferred in anything that can be used in a browser, Phaser's mobile compatibility is notoriously poor, so I'm not sure that'd be too much of a priority for me or others.

[sky-is-winning]

Look that if you are going to use a Text object, then you don't need a plugin at all.

You can create an InputDOM user component that will listen for the click event on the Text object. Then it can hide the object and show the DOM element. And you can positioning, resize, etc... the Text object in the Phaser Editor.

For doing it, you don't need to create a Phaser Editor plugin.

That's a good idea. Whilst it would be easier to use native tools, I suppose a usercomponent would be a better way of doing it than the manual method I am currently using

[PhaserEditor2D]

So, do you think you can implement that user component yourself?

[sky-is-winning]

So, do you think you can implement that user component yourself?

Yeah, I can definitely take a look.

[PhaserEditor2D]

Good! Let me know when you finish it.

[sky-is-winning]

Good! Let me know when you finish it.

I have done so! I decided to use a different approach of not using a DOM element at all, and instead using keyboard listeners. Here is the code for the component.

/* CODE REDACTED FOR COPYRIGHT REASONS */

Parts of it might be a bit overcomplicated, and unfortunately it doesn't work on mobile - if people want to implement it in their own projects they might need to create their own keyboard implementation to support mobile.

Limitations are the fact that ctrl actions do not work, and you can only type at the end of the input text, not select characters from inside it - but hey, I made this in about an hour so not bad work for that kind of timeframe.

Feel free to modify it and build it into the editor if you wish - up to you!

[PhaserEditor2D]

Great thanks!

Yes, an InputText is a complex thing, especially on mobile. There are projects that create a complete keyboard simulation on mobile, but that's crazy! Unless you target an specific language like english or spanish.