So I have been experiencing a lot of difficulties when designing UI, this has been an ongoing thing. I have done a lot of research, watched a lot of tutorials, but I can’t seem to figure it out. A lot of games have UI that keeps its size and position like nothing ever changed when minimizing and editing your game window, or just by playing on different devices. So what I’m trying to achieve with all of this, is good UI that will not look all messy for players on all sorts of devices and or with a different resolution.
The issue that I’m currently trying to resolve, is that my UI looks off once the window’s scaled, or the resolution is not the same. And because I’m making the UI in Roblox Studio, it automatically makes it look and feel awkward when starting and playing ROBLOX from the website. Here’s an example of what I mean:
How I would like the UI to look like:
What it looks like once you change the window’s size:
Here’s what it looks like if I use a UIAspectRatioConstraint and then changing the window size:
… This is what it should look like (Fullscreen):
(Helpful post: Mobile UI Scaling Help)
What is confusing me the most, though, is that the UI looks just fine when using the emulator, so this is where I’m stuck. I have read through posts on the Developer Forum, watched tutorials on YouTube, and I cannot seem to find anything that I can fully understand.
I have tried using UIAspectRatioConstraints to keep the Aspect Ratio the same, but that results in a lot of wasted space on some resolutions. I have tried UISizeConstraints, but I can’t seem to figure it out, is it what I’m supposed to use?
I have been using Scale and not Offset, but that results in squished UI, looking something like this:
In ‘My Restaurant’ for example, the UI is just fine regardless of resolution, window size or device. Here’s an example:
This is when the window’s full screen
And here’s where I have flattened the window so that its width is greater than its height
… And as you can see, the UI from ‘My Restaurant’ keeps its charm even when editing the window size, so that’s really what I’m looking to achieve from this post, an answer to how I can fix this, or just a link to a post from another developer that I could’ve missed. This is starting to really frustrate me as I want the games that I work on to look good and actually be interactable for the players that might be playing them.
Here is a very helpful post that I have been trying to use:
… However, I’m still stuck, and I don’t know what to do at this point.
I have also seen a lot of people recommend plugins such as ‘AutoScale’. I don’t know if it’s accurate or not, but is it worth giving it a try? And is it safe?
Thank you so much for taking your time reading this!