Is there any way to scale UI across all devices using offset?

Help and Feedback Scripting Support
#1

My image loading bar uses a transparent frame with ClipDescendents and a duplicate of the image bar under it. It requires the second bar to be the same size as the first bar, which is only achievable with offset. However, this doesn’t scale across all devices.

3 Likes
#2

is it ok if you could show an image or the hierarchy of the loading bar

#3

Why does Scale not work with your loading bar?

#4

Use scale plugins, or just use scale properties itself. Scale will always place the gui or frame at the same place for all screens.

#5 
ImageLabel 1 (Loading bar Background)
 |
 |— Frame (Transparent, ClipsDescendants)
       |
       |— ImageLabel 2 (The actual loading bar's progress)
2 Likes
#6

I need the second image label to maintain the same size as the first image label, despite its parent (the frame) being resized.

1 Like
#7

are you using offset to represent how far the progress is instead of scale?

1 Like
#8

I’m using offset because the second image label needs to keep the exact same size as the first image label, despite being parented to a frame that’s size keeps changing.

1 Like
#9

Ah Image labels, yeah those can be quite annoying, i think that you could use scale but you’re gonna have to edit some things to have the image cover the entire canvas

1 Like
#10

if its parented to a frame that’s size keeps changing then set the second image label’s UDim2 for position to 1,0,1,0 so that it always matches its scale regardless of its pixel size

1 Like
#11

I don’t want the second image label to stay the same size as its parent though, I want it to stay the same size as the first image label. The frame is being resized only to show/hide parts of the second image label, as it uses ClipsDescendants.

#12

Yes, you can scale your UI across all devices while using offset. You can achieve this by utilizing UIScale, where you have “container” frames that have automatic size, and positioned via scale, and anchor points, while their children are mostly sized, and positioned using offset. Here is an example video that I made:

example.rbxm (4.6 KB)

5 Likes
#13

wait so you want it to be the size of the first image label but not the frame

#14

Yes, that is correct. The frame is only there to limit how much of the second image label is actually seen, through ClipsDescendants.

#15

oh yeahh i forgot about ui constraints, maybe you should try this to see if it helps

#16

ok and its limiting it so it shows the percentage of it being finished loading right

#17

Yes. The first image label is the background for the loading bar, and the second one is the actual progress. The second one is a recoloured version of the first one, and parented to the frame so that when the frame resizes, it shows/hides the image.

#18

maybe you could use a script that gets the first imagelabel’s AbsoluteSize, and sets the second image label’s offset to that

#19

alternatively you can try to use the UIConstraints to figure out a way to maintain the scale

#20

Use a script to determine the offset you want. That is something I have done very often as I really don’t like working with scale