PlayCanvas UI Components

,

Nice job ! Very useful to me!

1 Like

Hi @commention I can’t seem to get it to work.

Thanks
-William Boersma

Many thanks
It is a wonderful contribution

Awesome Works! Thank you.

Hey Can I Have Some Help With Setup?

Hi @WilliamBoersma31! What is the problem you have? When I have some time I’ll give it a try.

I can’t seem to get the text input field to work.

Can I see your project please?

I’ve looked at your project, but I can’t find why it isn’t working. I suspect it has to do with your positions. I recommend starting with a new entity from the top left corner of your screen. That way everything will be in the right place. (Don’t forget to set the preset of the parent element to ‘Top Left Anchor & Pivot’). When you are done you can move the parent to the desired location. I tried it myself and it works as expected.

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

Sorry, I saw the project was private. It’s public now.

It works fine when Device Pixel Ratio is disabled. However when Device Pixel Ratio is enabled, the text and background get misaligned.
Is there any solution to that?
Thank you

Hi @Faisal! I will take a look later today.

I don’t see any difference when I enable Device Pixel Ratio in my example project. Everything works as expected. Do you have a sample project that shows your problem?

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

This is how it appears when Pixel Ratio is on. On most of the mobile screens, this issue is so prominent. I am taking screenshots from your project that you provided here.

That’s strange. I don’t see this issue. Are the screenshots from my example project or from your own project? Below you can see my results.



Alright, I see the issue indeed on my iPhone 12 pro. I’m not sure how to solve this problem. Maybe someone can point us in the right direction.

I think something need to be changed here:

image

Yes
The screenshots are from your example project.

Hi @Albertos, Is it possible to create a bigger text field that includes text wrapping when the user inputs a paragraph? And maybe edit the alignment of the text. Like top left.

Hi @Charlize_Diederiks and welcome! I’m afraid this functionality isn’t built in and I can’t add it myself. Maybe @commention can help you with this.

Please see this post for a version that works with Pixel Device Ratio: [SOLVED] Text input in a 2D screen - #22 by yaustar

2 Likes