You’ve probably seen many threads about, “How do I fit this on PC and Mobile?”, “How do I make UI scale evenly across all devices?”. Well, if you have these problems, you’ve come to the right place.
Here I will show and explain some concepts for fixing those problems. But first, let me explain a few concepts:
What is Scale and what is Offset?
Scale is a measurement that Roblox uses to determine a percentage from one distance to another. Let’s say the screen size was 1000px wide, having a scale of 0.5 on the x axis would position the element at 500px [1000 * 0.5 = 500]. Having a scale of 0.25 on the x axis would position the element at 250px [1000 * 0.5 = 250].
Offset positions the element based on pixels. Having an offset of 50 in the x axis will place the element 50 pixels to the right.
Keep in mind both of these measurements start from the TOP LEFT CORNER of the screen or element(if it is parented to one). The usage of offset of scale together might be confusing at first, but it takes a little time to get used to, and it’s pretty worth it.
#1. Anchor Point Positioning
Anchor points might seem like a useless property at first, but it’s actually quite useful. The anchor point is something that determines where a GUI element position is based on, and where it resizes itself (red dot is the anchor point, yellow lines show position in offset):
Anchor Point: 0, 0
Anchor Point: 0.5, 0.5
As you can see, the first and second images have different results.
This knowledge can be used to position objects in any corner:
Anchor Point: 0, 0 | Position 0, 0, 0, 0
Anchor Point: 1, 0 | Position 1, 0, 0, 0
Anchor Point: 1, 1 | Position 1, 0, 1, 0
Anchor Point: 0, 1 | Position 0, 0, 1, 0
Anchor Point: 0.5, 0.5 | Position 0.5, 0, 0.5, 0
There are plenty more but you can see a pattern here. The Anchor Points and Scale Position Values are the same. So if you want to position an object 70% on the x axis and 45% on the y axis, the anchor point would be 0.7, 0.45 and the position would be 0.7, 0, 0.45, 0:
#2. Borders / Edge Padding
The white box I’m using in this section is 300 by 300 pixels in size (when it’s unscaled).
Now this section will debunk the stigma of “scale good, offset bad”. I personally use offset more than scale in a lot of UIs I make, because it’s more accurate and generally more useful if used correctly.
When making borders with scale, they may seemingly be fine at first but they become inconsistent when scaled.
The size property of the green square is 0.8, 0, 0.8, 0, the position property is 0.5, 0, 0.5, 0 and the anchor point property is 0.5, 0.5 this looks pretty okay, right? The borders(white) are consistent!
But what? I just scaled it a bit and the sides of the borders don’t stay the same length!
There’s a really simple fix for this problem, all you have to do is use offset! Because the borders are based on the parents’ position, we first have to scale it with Scale to make it fit the entire white box:
Size: 1, 0, 1, 0
Then we would use a Negative Offset to create whitespace on the x and y axis. Negative offset is just normal offset but with a negative integer, this causes the frame to subtract that many pixels on the corresponding axis from its size:
Size: 1, -60, 1, -60
Now let’s scale this and see what happens!
Wow! Isn’t that amazing! The orders kept a consistent size!
#3. Consistent Positioning
Positioning UI elements can be a pain, mostly because we’re bound to using only scale, but offset can make things so much easier for you like I’ve said countless times in this thread!
Let’s say we want an element to be positioned at the bottom of the frame, and we wanted the element to be at the bottom of the frame even after scaling it. Let’s use an example with only scale first:
Anchor Point: 0.5, 0 | Position 0.5, 0, 0.5, 0 | Size 0, 240, 0, 120
But when I scale the white box the green box doesn’t seem to stay in the same position relative to the bottom anymore!
Let’s apply the knowledge from Anchor Points!
We want the element to stick to the bottom of the box while staying in the middle horizontally, so first, we have to make the position of the box relative to the bottom of the box. Setting the Anchor Point of the green box to 0.5, 1 and the position of the green box to 0.5, 0, 1, 0 would make the box stick to the bottom of the white box:
Anchor Point: 0.5, 1 | Position 0.5, 0, 1, 0
But we still need to offset it so there’s still white at the bottom of the green box, so we can use Offset:
Anchor Point: 0.5, 1 | Position 0.5, 0, 1, -30
Now it’s back to the original image from this section! Let’s scale it and see what happens!:
Wonderful! As you can see, the padding on the bottom of the box does not change!
4. Only Scaling One Object
The white box I’m using in this section is 300 by 300 pixels in size (when it’s unscaled).
Let’s say you only want 1 element (it can be more than 1, I just chose 1 for simplicity) to not scale in your UI, you would think you would need a little scripting to do the seemingly “Dynamic” scaling, but do not worry! There’s a way without it!
Let’s identify a problem to make it easier, let’s say that you want to make a UI for your users where they can resize the UI, and you don’t want inconsistent space when they scale it on let’s say, the y axis (scaling the green box). You’ve used the Anchor Point section to position the 2 grey boxes and the green box (keep this in mind, we’re using the y axis for this example only, not the x axis):
GreenBox Only: Anchor Point: 0.5, 0 | Position: 0.5, 0, 0.267, 0 | Size: 1, -60, 0.167, 0
When you scale it, this happens!:
The green box doesn’t seem to dynamically fit the whitespace! “Oh no! I don’t know how to script, what am I going to do?”, you think. But, little did you know, there is another way to do it without scripting! All it takes is a little imagination.
First, we get the offset of the green frame from the top and bottom of the green box in pixels:
As you can see, it is 110px from the top and 140px from the bottom of the box. This means that the green box will always be 250px [110px + 140px = 250px] smaller than the entire white box. We also know that the green box is always 110px from the top of the box.
Since we know that the green box will always be 250px smaller than the box, we scale the size accordingly:
Size: 1, -60, 1, -250 → Notice the -250
We also know that the green box is also always 110 pixels from the top of the white box, so we offset the position accordingly:
Position: 0.5, 0, 0, 110 → Notice the 110
Now notice how the green box scales accordingly!:
That’s all for the tips! If something doesn’t make sense, or you want me to try explaining another issue, PM me or reply to the thread (preferably PM)! I hope you enjoyed it, and have a great day!