Making a number slowly change until it reaches another one

Help and Feedback Scripting Support
#1

So im making a health bar system, and i already got the health bar inner to work, but instead of changing the number i wanted it to be a little cooler and slowly change numbers

Can anyone help me do it?

humanoid:GetPropertyChangedSignal("Health"):Connect(function(newh)
    -- this is the part that changes the bar
	local t1 = tService:Create(hInner, TweenInfo.new(0.25, Enum.EasingStyle.Quart, Enum.EasingDirection.InOut), {Size = UDim2.new(api.gethum().Health/maxhealth, 0, 1, 0)})
	t1:Play()

    -- here i wanna make it change the number

end)
#2

You can use a lerp on a sine wave. UDim2 | Roblox Creator Documentation

#3

You cannot lerp numbers. I’ve tried it already.

#4

You can lerp a UDIM2, which can represent the value. It’s a UI element anyways.

local endSize = UDim2.new(0, 200, 0, 200) -- ending size of the Udim2
local currentHP = 50 -- current hit points (range: 1-100)

local function lerpSize(start, finish, amount)
    return start + (finish - start) * amount
end

local lerpedSize = UDim2.new(
    lerpSize(startSize.X.Scale, endSize.X.Scale, currentHP / 100),
    lerpSize(startSize.X.Offset, endSize.X.Offset, currentHP / 100),
    lerpSize(startSize.Y.Scale, endSize.Y.Scale, currentHP / 100),
    lerpSize(startSize.Y.Offset, endSize.Y.Offset, currentHP / 100)
)

print(lerpedSize)

Now just run this in a loop, get the currentHP, and it’ll work

#5

Yes, but he’s already TWEENED the gui, as you can see in the post. I have a better method. Give me a moment.

#6

I’ve already tweened the bar in the gui, what i wanna tween or whatever is a number (textlabel) that shows the current hp of the player, so it doesnt just instantly changes but instead it slowly changes

#7

Yea I understand but that means you have to stop the tween and make a new one every time there’s a change. You could use the Fusion library and use a spring, in that case it’s super easy

#8 
local smoothness = 30
local speed = 2
local endhealth = newh
local starthealth = -- the previous health

local func = math.sin -- function for the "tween"
local startpos = 0
local endpos = math.pi / 2 -- these numbers represent the starting position and end position of the makeshift "tween"

local i = 0

while wait(1 / smoothness) and i < smoothness do
    textlabel.Text = math.round(tostring( starthealth + ((func((i / smoothness) * endpos) - func(startpos)) / endpos * (endhealth - starthealth)) ))
    i += 1 * speed
end

This should work.

#9

that should be alright since it will be in a .Changed function? also dont know what is fusion library neither a spring lol, i will wait for @Den_vers 's answer

#10

Ohh this looks like it will work, i will test it here too

#11

It probably won’t, I just wrote some stuff down. Basically a tween.

#12

is there a way to make that a tween? like using number values and then changing the text to the number value?

#13

You cannot tween actual numbers, only properties. So I attempted to make code for tweening. So you can set the smoothness, and the function it uses, but it’s probably broken. I’ve made a health system like this before, and I tweened the GUI but didn’t add an animation for the number. Plus, it may confuse people because they may think they have THIS health, but in reality they have this health because it hasn’t finished tweening yet.

#14

But like what about number values? it should work since tween works with stuff like lighting time or transparency

#15

My solution still works by the way

#16

Yes, it only works with actual properties. You’re right you can do transparency and all that stuff. The reason why it doesn’t work with numbers is that you have to actually provide a dictionary of properties to change.

#17

yeah but its for the bar, and i already made the bar change

1 Like
#18

Try this one, I edited it. It should work now :slight_smile:

#19

Alright ima try it after i finish restarting studio

1 Like
#20

You seemed to have solved your own problem, and this would definitely be the easiest way; but not the most optimal.

I would recommend taking a look at this website; Easing Functions Cheat Sheet if you plan to actually code the tween equation itself. Which shouldn’t be too difficult.

Here is an example usage in which I scripted a while back; you would need to modify it.

self.Maids[TextLabel]:GiveTask(RunService.RenderStepped:Connect(function(DeltaTime)
		CurrentEasingTime += DeltaTime
		
		local NormalizedTimeToTake = (CurrentEasingTime / TimeToTakeEasing)
		if NormalizedTimeToTake >= 1 then return self.Maids[TextLabel]:Destroy() end
		
		local EasedNumberValue = 1 - math.pow(1 - NormalizedTimeToTake, 4)
		TextLabel.Text = self:FormatIntegerWithCommas(ConvertedStringNumber + (Difference * EasedNumberValue))
	end))

If you’re looking to avoid scripting the actual easing equation within your code, then you could just make a number value (as previously mentioned), like you seem to want to do.

local NumberValue --// Put this outside of your connection!

--// Put this inside of your PropertyChangedSignal!
if not NumberValue then
   NumberValue = Instance.new('NumberValue')
   NumberValue.Value = humanoid.MaxHealth

   --// Track when the number value changes.
   NumberValue:GetPropertyChangedSignal("Value"):Connect(function(Value)
      --// Update your GUI Element
      TextLabel.Text = Value;
   end
end

--// TweenService, you named your variable tService
tService:Create(NumberValue, TweenInfo.new(0.25), {Value = newh}):Play()

All code is untested.