How should I tween a GUI according to a number? (ex. Health)

What do you want to achieve?

I want to tween this Jetpack’s GUI, according to its fuel.

What is the issue? Include screenshots / videos if possible!

How should I do it? If I would want it as a tween, When should I play it? Would it be smooth enough, and not jittery?

What solutions have you tried so far? Did you look for solutions on the Developer Hub?

I don’t what it’s called, I have tried asking people in different servers, some of them have no idea how to.

Get the percentage of fuel left (current / total) but don’t multiple by 100. You should get a value between 0 and 1.

Now, convert the percentage into size of the gui.

local percentage = current / total
local neededSize = totalSize * percentage

totalSize should be a value not a UDim2 value, so use either the Scale or Offset properties.

Then just tween the GUI size’s to the new size.

1 Like

I see, I’ll try it right now. Ive heard i should use tweensize for this. Not sure how to do so though.

May i also ask what value does the totalsize have?

Not too hard, just divide the jetpackFuel by the total fuel and use tweenService to tween the size

local fuel = (jetpackFuel / totalFuel)
local jetpackUi = playerGui:WaitForChild("YourUI")
local frame = jetpackUi:WaitForChild("Frame") -- The frame that shows the amount of fuel
local tweenService = game:GetService("TweenService")
local size = frame.Size
local goal = {Size = UDim2.new(fuel, size.X.Offset, size.Y.Scale, size.Y.Offset)}

local tween = tweenService:Create(frame, info, goal)
tween:Play() 

you have to run when the fuel changes

1 Like