UI Looks different on different devices Problem

So I’m pretty much done with this game but one thing that is stopping me from publishing it to the public is that I’m having problems with UI Scaling (How it looks like on different kinds of devices)

The confusing thing is that I’ve tried UIAspectRatio/SizeConstraint and a bunch of plugins but none of them seems to have fixed the problem that I’m now having.

Examples

Example of what it looks like on an iPhone X:

iPad Pro:

VGA:

HD 1080 (1920x1080):

What it should look like:

3 Likes

That is due to you using a fixed size.
{0, 50},{0, 50} size (example)
It will be 50 x 50 pixels

Try changing the first value there
{0.05, 0}, {0.1,0} and it will be more consistent between screens

(Mobile sorry for typos!)

Don’t really understand what you mean by that. It just makes the UI smaller

The first value makes the GUI a percentage of the screen, whereas the second is a fixed amount of pixels. Since different screens have different pixel counts, using the first value will create consistent GUI whereas the second won’t.

Read more about it here,

You can use this plugin to convert from “Scale” to “Offset” (percentage and pixel) and back if you are struggling to do it manually,

1 Like

Basically this is what he means:


image


As shown above, the first value of the bracket is the percentage and the second is the fixed size (amount of pixels)

So if I were to make the y {0.5,0}, it would take up 50% of the y axis in the screen.

But if it was {0,0.5}, it would only take up half a pixel on all devices.


Sorry If I didn’t explain properly.

How does the value work? It is scale,offset and you need to put It to right place with setting scale to 1 and offset to what offset you need (it will be number smaller than 1)

There’s a very simple solution to this. As I’ve encountered this situation myself, all I needed to do was watch a YouTube tutorial on how to fix this. Here’s the link:

UI Scaling

Hope this answers your question.

— Drinkinix

1 Like