[SOLVED] Text input in a 2D screen

Help & Support
1

I am making a simple menu and I need a text input field where the player can quickly type a name and join the game and I don’t know how to achieve that, what do I need to do? right now I am searching the tutorials

2

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
3

add this into suggestions and feedback PLEASE

4

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

5

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
6

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.

7

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
8

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

9

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

1 Like
10

The thing is I’m broke

11

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

12

What is it?

13

A way to limit how many characters can be entered

14

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.

15

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

16

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

1 Like
17

Great! Thanks for letting me know!

18

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?

19

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

20

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.