How can I space UI perfectly on every device?

Help and Feedback Art Design Support
#1

I am always struggling to properly space UI well on every device. Here is an example
This is what it looks like on an ‘Average Laptop’

918×517 214 KB

https://gyazo.com/7193d8f684868c805170ee6c7cadd1a9
And this is what it looks like on an ‘iPad Pro’

https://gyazo.com/63d1749bac0f73f4d491f1ad92cc71b5
As you can see there is that big gap between the buttons on the left.
Someone who knows why this might be happening or how to fix this please tell me
Best regards
-SOUR

#2

To be honest with you, I’ve had the same problem many, many times.

Your best bet is to use scale and offset for your UIs (read more about that on the Developer Hub), or just position/size them based on what device the player is using.

2 Likes
#3

Try to use scale not offset in the size and position, size constraint at XX or YY, and Anchor Point at .5, .5.

Attention! You’ll need to position and scale everything again

1 Like
#4

Use UIAspectRatioConstraint with a ratio of AbsoluteSize.X / AbsoluteSize.Y of a parent frame + use all other the UI constraints with scale-based padding. Also, make all UI instances scale-based and avoid offset which is in pixels.

2 Likes
#5

There are plugins that convert your size and position to full scale or output without you needing to re-position anything.

1 Like