I’m new to this .Can anyone tell me how can I get responsive UI for all devices
Use standard html/css UI approach with unique IDs for each element and than connect your UI with your functions from inside PlayCanvas: https://developer.playcanvas.com/en/tutorials/htmlcss-ui/
In editor there are 2D screen and 3D screen .can we use them for responsive in all devices .I have tried but its not responsive in all devices
PlayCanvas doesn’t have fully responsive features for UI unfortunately. There’s some elements of being able to anchor UI elements to corners, center, sides of the screen and scale them up/down based on the aspect ratio.
Doing something that works for both landscape and horizontal is difficult and would recommend using two different layouts.
i have a bg and i want it to be responsive in all device ,How can I do that .pls help
It sounds like you are looking to do something like CSS cover.
Here’s a quick example where the image element resizes based on the screen dimensions: https://playcanvas.com/editor/scene/1023568
Warning: Not fully tested.
I’d just like to leave a comment here. This solution only works properly if the Device Pixel Ratio property under Render Settings is on. Otherwise, it can happen that the image has an original width or height bigger than the height/width from the resize, and then the image won’t cover the whole screen. Don’t ask me why.
I can’t reproduce this issue in the project I created
Do you already have Device Pixel Ratio on? Turn it off, and try it with this image
The parameters are
Try it on the phone. On desktop it works. You will see that it won’t cover the whole screen.
To make the script work on mobile with the image above, you need to do 2 things
1- change to blend with reference resolution of 1280x720
2- turn on device pixel ratio
I don’t know why the steps above are necessary, but it works. Would be nice if the script worked regardless of reference resolution/blend mode and the device pixel ratio.
Looks like a bug in my code on resize where it tries to work out what area to cover.
The recent addition of fitMode fixes this which has the feature of being able to cover the element area: https://playcanvas.com/project/972342/overview/mobile-background-cover