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 functionality without dealing some style properties, such as font, positioning and visibility.

There are 4 different input type that can be used in script.

  • Text input
  • Select input
  • Checkbox
  • Slider

Since I use these components in my games, there are some other functions that is useful in games. Like store value option. That function simply keeps value in text element, even after page reload. I was using that functionality on settings, or guest username.

You can simply reach the input’s value with getValue function in the script. If you use input element, you can use entity.script.input.getValue(); to get it. setValue function also can be used.

The scripts are very easy. You can write your own script in a short time. But I wrote these components once and thought it can be good to share with people. I always use them on my projects.

Anyway, here is the demo link :

Here is the project link :
https://playcanvas.com/project/644577/overview/uicomponents

Here is the github repository :

And here is the youtube video, in case you need assist :

Best regards

15 Likes

oml finally I actually needed this for a long time now I can finally tinker with the ui components and make some cool features for my games

2 Likes

Nice job ! Very useful to me!

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?

sure @Albertos
https://playcanvas.com/editor/scene/1184526

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.