Hello fellow people!
I am having some confusion on how to achieve a perfected Scrolling Frame, with all of its children looking the same on all screen sizes, etc. I know that there are a ton of topics on there, but most of them sadly don’t make sense or don’t even work in my scenario.
don’t mind the ZIndex btw…
Sadly I’m the last person to know about scaling and device support for UI, etc. This is what happens when I try a diff. device:
I also want to autoscale the canvas because I don’t know the exact number of slots. It would be also much appreciated if you can do it step by step
Thanks for stopping by and helping!
Set the SizeConstraint relative to YY. This is because most resolutions are either wider or thinner and rarely ever taller, allowing a small ‘hack’ of keeping the UI sized about the same for almost all devices. (Also make sure to keep the X-axis relative to the dominant Y-axis)
I’ve only ever used scale for Sizing to keep it constant. The SizeConstraint helps with the stretching that comes with not using offset.
I set the Anchor Point to where I want the UI to start at, position its scale values to the anchor point, and then use offset to keep it exactly at a certain amount of pixels. This ensures that the UI elements are perfectly spaced.
The downside to method number 3 is that it requires some scripting to ensure the pixels stay constant throughout all resolutions if the positioning happens to overlap or be too distant on another device. (Eg. 200px on pc is 50px on a mobile device, and thus must work around it.)
Or 5. Use a scale plugin (which I don’t use because it’s generally unhelpful for me).