UI Resizing Based on Device Resolution

Hello!

Thanks for clicking on this article and/or helping.

I’ve been trying to work on this for a little while and can’t seem to find any tutorials that can help. I want my Player UI’s to look and stay in the same place on different device resolutions. i have a fairly large monitor for my PC, and when designing UI’s on here they look deformed on my laptop.
This is also the same story with mobile devices.

I’m a complete beginner on making UI’s look the same on different platforms so I put my trust in the friendly arms of the devforum to help me out.

Thanks,
E_Link

6 Likes

Well firstly the most useful tool for this is the device emulator in the test menu in studio.
It allows you to see and test with a variety of different resolutions.

Secondly, check out my UI design guide. It tells you a bit about using offset and scale, and how to use them together, as well as a few other bits of information.

Here are a few tips to do with UIs to start you off:

  • Don’t design for a specific screen size – get the idea of how you want it to look in your head or down on paper, then design it so it can look like how you want it to across a number of sizes with minimal changes
  • Don’t position things with offset (unless you’re just making a margin or working inside another object with a set size)
  • Be consistent (explained more in my guide)
  • Have a different UI for mobile (due to smaller screen sizes and different input methods)

Good luck :slight_smile:

5 Likes

Thank you very much.

1 Like

Recently released a new pugin that automatically scales your gui on all devices

Might help you out

21 Likes