Making UI that looks good on all platforms?

and before you say “just use scale”, i figure it’s more than that! i’m making this post because every other post i see on this topic says scale is the way, but scale by itself doesn’t make it look great everywhere.

i’ve made a ui that i believe looks good on computer and tablets, exclusively using scale for positioning and size, and some aspectratio stuff for the images since they can’t be stretched. the problem is, it looks horrible on phone. and if i adjust it to look good on phone, it looks horrible on computer and tablet.

for example, here’s the ui on computer (looks basically identical to this on tablet!):

and this is what it looks like on a phone (using device emulator, which i can confirm is accurate):

notice how the text overflows, the textbox is too small, and the portrait is huge. plus, the text at the top is squished together. if i decrease the text size, it looks bad on computer & tablet. if i make the text box a bigger scale, it looks bad on computer & tablet. if i decrease the portrait scale… you get it. how do i go about fixing these kinds of problems?

P.S.: everyone recommends autoscale lite, but i’ve heard it’s been broken recently. i’m also just not too big of a fan of plugins as they barely work in my setup, and i like to do things myself.

EDIT: i just discovered text constraints, which at least kind of fixes my text overflow problem? setting minimum and maximum and then enabling text scaling looks good on phones, but i figure the text size will start changing depending on the text itself which would suck. plus, the max looks good on computer but bad on console. if i change it, it looks bad on computer. this is really getting annoying!

Here is what I thought of:

  • I believe ui size constraints could help
  • make sure the text is scaled instead of a set size
  • this post fixes the line thickness Fix UIStrokes! Free script

those should hopefully help with the issue!

i’ll look into ui size constraints, but how would i use textScaled without it changing all of the time? this is a dialog box so the amount of text will change, but in my experience with textScaled enabled, that’ll change the text size too. i’d like to be consistent, just different depending on the platform.

There’s a way to check what device a player is on. you could make a table defining the textsize per device (or do it inside the uistrokes script)
(There might be a better solution though)

i was considering something like that, basically just editing values in the UI per player depending on their platform, but i wanted to check if there was some kind of better way. if no one else responds, i’ll just do that then i think.

don’t use scale

Then you haven’t reached the stage where your UI is good and where you’re smart enough to realize scale isn’t worth it.

For now, you have to live with the fact scale won’t be good.

I know you don’t wanna read the word Scale buttttt…

UIScales :smiling_face_with_horns: