Problem with rounded edge exp bar - the exp bar is with autoscale moving with the clipping frame and without its too big on other screen's

Hello my problem is that when i try to autoscale the imagelabel because i want it the same size at every screen but i have this problem that you can see in the video

the problem is that i need offset to set the imagelabel because scale don’t work with clipdescendants
i want that the imagelabel is not affected by the frame with clipdescendants

1 Like

I can’t really tell from the video, could your please explain?

If I understand correctly, this is because the ImageLabel’s size is still in Offset. But, you can’t just change its size to use Scale, because that will be relative to the parent bar (which is what you need to resize for the clipping effect to work).

So it looks like you need to manually set the size of the ImageLabel to match the size of the Background frame (or the size of the ImageLabel’s parent when it is a full size) when the screen size changes.

Unfortunately this problem is one of the things Roblox GUIs are unable to solve on their own, so you will need to do it using a script. Something like this:

-- every time the size of the object changes
-- (this will happen when screen size changes)
Background:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
   local absoluteSize = Background.AbsoluteSize
   -- set ImageLabel to be the same AbsoluteSize size as the Background object
   ImageLabel.Size = UDim2.new(0, absoluteSize.X, 0, absoluteSize.Y)
end)

EDIT: Simplified because the original was too complicated and didn’t answer the question.

Original
-- the size of the bar when it is full (in scale)
local DESIRED_SCALE_SIZE = Vector2.new(0.4, 0.2)

-- runs every time the size of the screen changes
-- you should also run this code when the game loads
Background:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
   -- variable representing the size (in Offset) of the bar when it is full
   -- since this value is scale you will need to update it when the screen size changes
   -- (to do this, you can use the formula SCALE_SIZE * SCREEN_SIZE)
   local fullSize = DESIRED_SCALE_SIZE * workspace.CurrentCamera.ViewportSize

   -- if you are using RelativeXX or RelativeYY then
   -- this example uses RelativeXX, note how second value is calculated with viewport X
   local fullSize = Vector2.new(DESIRED_SCALE_SIZE.X * viewportSize.X, DESIRED_SCALE_SIZE.Y * viewportSize.X)

   -- finally update the size of the ImageLabel
   ImageLabel.Size = UDim2.new(0, fullSize.X, 0, fullSize.Y)
end)
1 Like

i have a little problem to understand this and to use it
scale don’t work with this
i think

Yeah it can be difficult to understand on its own, I guess the language barrier isn’t helping.

What do you mean by scale doesn’t work with this? Setting the Scale values of the object of the ImageLabel we are resizing will not work as it is being overwritten by the script (which is using Offset).

I will make some pictures explaining the solution.

I have a bar like this:

100% 09_12_03_23
50% 09_12_03_41

I have these objects.
image

I could make the Scale size of Image to {1, 0}, {1, 0} (so that it fills the bar) like in the 100% picture. But this is a problem! Because when Clip is resized, Image will also resize so that it is smaller:

50% again, notice how the colours are different from the first 50% picture image

09_12_09_10 09_12_09_16

So we can’t use Scale to make Image be the same size as Back. Instead, we need to use Offset. Which is where your problem happens:

In that video, the size of Image never changes. It is always {0, 255}, {0, 25}. So we need to use a script to change the size, copying what the Scale property does.

We can do this using the AbsoluteSize property. GuiBase2d | Roblox Creator Documentation

Here’s the code to do this without comments so it may be a little easier to understand without lots of English:

Background:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
   local absoluteSize = Background.AbsoluteSize
   ImageLabel.Size = UDim2.new(0, absoluteSize.X, 0, absoluteSize.Y)
end)

(Also go check my first reply, I edited it because it wasn’t good.)

Thanks for helping me :slight_smile:

1 Like