Make UI look good on multiple resolutions?

Help and Feedback Art Design Support
#1

I’m looking to expand upon my UI skills, but have hit a hard wall. I am wanting to make my UI look good on multiple resolutions, but I don’t seem to know how. One of the main reasons as to why I am wanting to make UI look good on multiple resolutions is simply because many resolutions are used today.

  • If an offset is the number of pixels, wouldn’t those who have a 4k monitor see UI elements ~2x size smaller than those on 1080p monitors? If so, it’d be really hard to see these UI elements.
  • When using a scale, sometimes UI elements feel they are too stretched, for example, on an ultrawide monitor.

Is there any object, property or anything I can do to adjust my UI style to combat these issues? Really stumped on this one.

PS: I came across a game which seems to fix these issues (not 100% sure) https://gyazo.com/48b23668b643a395fd52d33703ec2d87. As you can see, it automatically resizes, and nothing seems stretched. Any ideas on how this is done?

Thank you in advance.

1 Like
#2

UIAspectRatio constraint saves the day! It lets you make your elements size with scale but keep their proportions.

I don’t have a lot of time so I can’t make this in-depth right now, but essentially just use Scale and a UIAspectRatio constraint and you’re good to go. Other constraints may be useful too, such as UISizeConstraint for min/max sizes.

4 Likes
#3

Ahh, you’re a hero.

Thank you :slight_smile:

#4

After playing around with it, I’ve got it to a size that I like.

The only issue is when I specify UI elements using offsets inside the frame that has the UIAspectRatio applied, the elements just stay the same size when I diagonally resize the window. They don’t scale up/down at all. Is this intended behaviour?

Scaling elements is a bit of a hit or miss. They may look good on my screen, but as soon as I stretch my window. They get messed up. I just want everything to retain their dimensions, but scale the entire GUI down when needed. Not individual elements.

#5

You need to design everything in Scale. It’s annoying to update it if you’ve made everything in Offset, but that’s really the only downside. You don’t need to worry about the aspect of child elements – if the parent element has its aspect ratio set, remember that everything inside it will always be at the aspect ratio too.