General Rule to UI Scaling

[nin900500 (nin)]

I’m confused about UI scaling. I know how to scale properly, but which UI elements should be considered when scaling?

What’s the general rule of thumb when deciding on which UI elements should be scaled?

[nin900500 (nin)]

you didnt answer the question

[Blue101black]

Everything should be scaled, the only optional thing to have scaled would be items in a scrolling frame.

Every item in the UI below is scaleable except each item under the car section. This is because with items in a scrolling frame, you can just scroll through to see more of the item and don’t need to worry about it being cropped or hard to read.

https://i.gyazo.com/3591fed385cfa66531285214dc809433.mp4

There are a few use-cases for using offset aswell. I want this bar to always be 2 pixels wide, but I use scale for the y-axis so that if I change the parent frame it will make it longer/shorter.

[eemsias (saismeesaimonsaimes)]

Usually what I do is use Offset and only use Scale in combination with AnchorPoint. The only time Scale is technically used for me is for mobile. Inside the parent ScreenGui I have a UIScale object. If the LocalScript detects mobile (TouchGui) then it sets the UIScale.Scale to 0.5 so all UI should fit.

[ZacBytes (Zachary)]

Hey, if you’re new to UI development you should take a look at this plugin I made. If you need anything just tell me

[Plugin] AutoScale Lite for GUIs - Scale your UI

[AutoScale Lite Banenr] Overview The plugin has two main functions. Converting a UI element’s size/position to Scale or Offset, and the auto scaling feature. The Add Constraint feature makes use of the UIAspectRatioConstraint which ensures that your UI retains it’s size on all screen sizes. You can add this constraint to your UI manually but my plugin does the calculating of the AspectRatio property by dividing the AbsoluteSizes so you don’t have to! [image] How do I use it hmmmmm? Firs…

[TOFOXN (eduarnm2)]

I am also in the same friend, I try and find those IU but I do not get help please but I also look for one of animations for attack or etc please if you have one send me thanks my name is foxy

[XandertjeKnal (Xander)]

Personally I scale based on vertical resolution. This means that all the UI elements have a certain size ratio to them that never changes and that basically the DPI of the screen determines the UI size.
This results in my complete UI looking basically the same whether I play on a 4k screen or on a 1080p or lower resolution screen.

Most games outside of Roblox do it in a similar way: when you resize your window horizontal (wide-screen or ultra-wide screen), you only see the position of the game elements change.
If you change the vertical size of your window (on a high DPI screen, for example), the size of all the elements will stay in the same aspect ratio.

This method is also pretty safe to use because most of the time games are played in landscape mode.
(If you’re doing this method on a UI for a phone for example, you’d have the X axis as the dominant axis.)

Using this method is quite easy, you insert a UIAspectRatioConstraint in a UI element, set the dominant axis to vertical. Then you set the size of the element to (1, 0, x, 0) where x will determine the size relative to the screen.

You can choose make your whole UI scaling like this, but you can also choose to make exceptions, like @Blue101black did in his method.