[SOLVED] Text input in a 2D screen

As far as I know there is no text input field in PlayCanvas. You can make one by yourself with an HTML overlay. Below a link to a starters kit for this that it’s made by @Leonidas, but this one is not for free.

https://forum.playcanvas.com/t/released-aphrodite-starter-kit-ui-text-input/

1 Like

add this into suggestions and feedback PLEASE

is there a tutorial or forum code that talks about HTML overlay based text input?

Here is an example project of using HTML/CSS. I hope this gets you started.

https://developer.playcanvas.com/en/tutorials/htmlcss-ui/

1 Like

Text input is tricky. The way I would approach it would be similar to unity have a HTML element that appears above the keyboard. And the when enter is pressed, the value gets passed to the text element in the game.

Hello @sir_akc. Today I saw a text input field on this sample project of @commention. I think this can be very useful for you, me and others.

2 Likes

Hey is there a way to set a character cap with playcanvas ui components

I highly recommend buying input from this site: https://pic.pirron-rodon.one/
Support was great, and it works on any platform

1 Like

The thing is I’m broke

Plus I’m already using the playcanvas UI components so it makes more sense just to edit that

What is it?

A way to limit how many characters can be entered

I gave it a try and below is what works for me.

if (this.element.value.length > 5) {
    this.element.value = this.input;
}
else {
    this.input = this.element.value;
}

I store the input of the user in a variable and I block new input with this if the user is over the limit.

I have applied the solution above in the example below.

https://playcanvas.com/project/832373/overview/input

I add a inputLimit attribute to the input script so you can apply a limit for each inputfield.
If the inputLimit attribute is set to 0 there is no limit for that inputfield.

image

image

hey @Albertos the first reply worked great I made a couple minor adjustments and implemented it into my game.

1 Like

Great! Thanks for letting me know!

Hey @Albertos,
thanks for the Input example.

I made a fork but when I launched the project nothing happend.
When I use your original project it’s the same. Only the pre-published project (Play-Button) is working.

Any ideas what’s wrong or missing?

Hi @jro! Thanks for reporting. Since the project itself has not changed, it must be related to a change elsewhere. I will look into it as soon as possible.

Edit: I just checked the original project of @commention and that project still seems to work correctly.

https://playcanvas.com/project/644577/overview/uicomponents

The problem was that I enabled Device Pixel Ratio for testing and forgot to disable it after testing. Also the original project will not work with Device Pixel Ratio enabled.

Hey, thank you for your help!

Just wanted to post that I found the problem with Device Pixel Ratio in Rendering.
Now I see your post about it :slight_smile:

I definitely need DPR, if I switch it off my scene looks blurry.
Bad luck.

1 Like