Canvas Scaling - Fill mode explanation?


#1

Hey,

I am trying to make my app responsive and multi-platform, but it’s not working so well with the UI playcanvas elements.

Here are screenshots

Ipad resolution in Landscape orientation (What I want my entities to be placed) :

Ipad resolution in Portrait orientation (Not placed in the right place…) :

This is a big problem for my app because the hotspots has to always be glued to the model.

Thanks in advance


#2

Are you talking about the hotspots or the menu bar at the bottom?


#3

I am talking about the hotspots!

But i find that the menu button is not very well reacting to it either. Especially in mobile resolution when the font is really to small. Do you have any suggestion for both?


#4

Hotspots: I would have an entity the represents where they should be in world space and use a world to 2D screen calculation (there’s a thread with the code on how to do it on here somewhere)

Menu: Use the anchoring in the element to have the position based on an offset from the bottom of the screen. In terms of size, you have to play around with the scale blend value on the screen to get it ‘right’. Otherwise have two separate screens, one for portrait and one for landscape and switch between the two pending on the orientation.


#5

Well, the hotspots are already entity in world space. So I am not sure how putting entities in world space and use a world to 2D screen will help in this case. It was a solution, that we wanted to use for other reasons, but i am sure how it’s helps in this case (weird canvas scaling).

Maybe I am not understanding the solution?


#6

I’m assuming that the hot spots are 2D elements in a Screen Space Screen? If that’s not the case, you may need to share the project to show the setup as at the moment I’m guessing on the implementation you have here.


#7

https://playcanvas.com/project/606654/settings

Here you go, It’s not the exact same project, but i had to remove the models for job confidentiality reasons. But you can still see with the cube that the hotspot moves and doesn’t stay in the right position


#8

In a nutshell, as the elements are rendered on the UI Layer but are actually in World Space, it goes a bit wrong when the window size changes. I’m not 100% sure why but at a guess, it is due to the element anchoring or some bespoke logic on the UI layer.

I’ve moved hotspot 4 to the World Layer, moved it out a bit so it doesn’t clip with the box and also moved the button text out a tiny bit to not z fight with the button itself.

https://playcanvas.com/editor/scene/724434

image