[SOLVED] Text input in a 2D screen

[Albertos]

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.

PlayCanvas UI Components

Hello everyone, I was using some UI components on my games, and decided to share this project publicly. You can find scripts on Github, and test UI system on demo link below. I also recorded a video to show you, how it works, how to use it. Please don’t hesitate to share if you have any ideas or suggestions. This components is basically helps you to build forms on your Playcanvas script, without dealing HTML styling. You can simply drag&drop input script to an element and use it’s functional…

[WilliamBoersma31]

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

[Dava]

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

[WilliamBoersma31]

The thing is I’m broke

[WilliamBoersma31]

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

[Albertos]

@WilliamBoersma31

set a character cap

What is it?

[WilliamBoersma31]

A way to limit how many characters can be entered

[Albertos]

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.

[Albertos]

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.

[WilliamBoersma31]

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

[Albertos]

Great! Thanks for letting me know!

[jro]

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?

[Albertos]

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

[Albertos]

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.

[jro]

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

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

[yaustar]

See Office Hours below for working through this problem. Jump 5:42 for the start of the answer

Positioning HTML elements with device pixel ratio - PlayCanvas Office Hours #4

The HTML elements are position in CSS pixel units but the PlayCanvas elements screen corners will use screen coordinates which will be dependent on the device pixel ratio.

Fixed project: https://playcanvas.com/project/877545/overview/UIComponents%20with%20DPR

[Marks]

Thanks for this. I was starting to think I was going to have to implement the form screen with pure HTML/CSS. You saved me from massive pain and suffering.

[yaustar]

@commention did the hard work and kindly shared the code. I just fixed it up for Device Pixel Ratio.