How to make a custom shaped loading bar function properly near extreme values?

Help and Feedback Scripting Support
#1

Hello! I’ve got a custom loading bar that starts filled and moves towards the left.

I have a similar loading bar for the ores (see the video), but for some reason this one just doesn’t seem to work properly.
Here’s a quick video of the issue:

https://gyazo.com/64077d317381b5fe1e63037144bb1e27

I have looked through the only few DevForum posts that exist about custom shaped loading bars and none of which seem to work with mine for some reason. Here’s my explorer setup, in theory it should be fine:

Backing Image:
image

Clipping Frame:
image

Filling Image:
image

Here’s the snippet of code responsible for the whole setup:

rs.Remotes.Cooldown.OnClientEvent:Connect(function(cooldown)
	local Base = script.Parent.Backing
	local THISVALUE -- See below
	
	Base.Clipping.Size = UDim2.new(1,0,1,0)
	Base.Clipping.Filling.Size = UDim2.new(1,0,1,0)
	
	Base.Clipping:TweenSize(UDim2.new(0,0,1,0),nil,nil,cooldown)
	Base.Clipping.Filling:TweenSize(UDim2.new(THISVALUE,0,1,0),nil,nil,cooldown)
	
end)

The value I’m having troubles with has been replaced with “THISVALUE”, in the video it was set to 2.

This is what I am struggling with, in theory it should just be 1/Base.Clipping.Size.X.Scale but that can’t work because I’m tweening and can’t just take the value at the start. That would also result in a 1/0 situation.

I also attempted function solutions, however these seemed to be really laggy and the waiting time for the cooldown was just wrong. They did however work and scale properly though.

I was hoping by using a linear tween I would be able to make this in a more performance-optimised way rather than having to deal with repeating functions, but I have no idea how to make this work.

Any help is really appreciated, but when you answer please note that I’m a new-ish developer and I might not understand it. Thanks for any help! :slight_smile:

edit: quick reword

#2

Maybe you could have the filling be set to the Backing’s AbsoluteSize whenever it changes? By using offset instead of scale you can skirt the issue.

Something like

local function UpdateFilling()
  local size = Base.AbsoluteSize
  Base.Clipping.Filling.Size = UDim2.fromOffset(size.X, size.Y)
end
Base:GetPropertyChangedSignal("AbsoluteSize"):Connect(UpdateFilling)
UpdateFilling()
1 Like
#3

This ended up working! Thanks for the help :slight_smile:

To any other developers, here’s what my final script ended up being:

local rs = game.ReplicatedStorage
local playerstats = rs.PlayerStats
local Base = script.Parent.Backing
local AbsoluteSize

local function UpdateFilling() -- We're updating the absolute size if the player changes their window ratio
	AbsoluteSize = Base.AbsoluteSize.X
end

rs.Remotes.Cooldown.OnClientEvent:Connect(function(cooldown)
	
	Base.Clipping.Size = UDim2.new(1,0,1,0)
	Base.Clipping.Filling.Size = UDim2.new(0,AbsoluteSize,1,0)
	
	Base.Clipping:TweenSize(UDim2.new(0,0,1,0), nil, nil,cooldown)
	
end)

Base:GetPropertyChangedSignal("AbsoluteSize"):Connect(UpdateFilling)
UpdateFilling()