How can I make a number animation like this?

Help and Feedback Scripting Support
#1

Hello, I am trying to make an animation for a cash value that is trying to look something like this:
https://gyazo.com/b3016d20d08e1b6c6c8f1cc86e54544f

So I had an idea using for loops, but I don’t know how i would get the value that the cash is being changed to.

5 Likes
Is it posible to tween a number in a textlabel to count up?
#2

A for loop would work for what you are trying to do. So, you could do something like this.

local c = 500 -- this is what you want the cash to go up to
for i = player.leaderstats.Cash.Value,c, 1 do --you might want to change the increment to scale with the amount of cash they have, like blokav mentioned
	script.Parent.Text = i --Wherever your text GUI is
	wait()
end

You will need a way to get the player though. You could use a local script, but an exploiter could change their value on the client and that’s what the script would use. So, you could use something that has a player parameter in it, or, while not advised, you could just use lots of script.Parent’s to find the player.

#3

I have actually been developing my own leaderboard system that uses a similar ‘GTA style’ incrementing for number values:

example:

local function int(current, target)
	current, target = math.floor(current), math.floor(target)
	return current + math.sign(target - current) * (10 ^ math.max(math.floor(math.log10(math.abs(target - current))) - 1, 0))
end

local start = 0
local finish = 123456
local n = start
while (n ~= finish) do
	n = int(n, finish)
	print(n)
	wait()
end

If you just increment by 1 every frame, it’s going to take a really long time to traverse big differences, so my method takes into account the number of digits in the difference between numbers.

#4

For this I would most definitely use TweenService.

I’ve done this a few times before and what I did was making an int value in the script, then use TweenService on that number to smoothly animate it with a lot of easing options.

Example of how I’d set it up:

-- assuming that you have an intvalue called "TweenNumber" in the script
local TweenService = game:GetService("TweenService")

function AnimateNumber(n)
	TweenService:Create(script.TweenNumber, TweenInfo.new(.3), {Value = n}):Play()
end

script.TweenNumber:GetPropertyChangedSignal("Value"):Connect(function()
	print(script.TweenNumber.Value) -- or e.g. TextLabel.Text = script.TweenNumber.Value
end

AnimateNumber(10000)

This is just the concept for how I would set it up. With TweenService you have loads of options, you can cancel a tween mid-through to tween to a different number from where it stopped and you can tween multiple properties at once. Best of all, it’s very performant.

Extra: For textlabels, make sure to use the font “Code” to make the text not shake when tweening. This is a special type of font which has the exact same width and height space for every character. I.e. the letter “I” and “W” would take the exact same amount of pixel space with this font.

API:

18 Likes
#5

So I used your code and saw it don’t get the exact number, it’s either a few numbers off. it works perfectly though but how would you fix this.

#6

It’s some weird bug where the text doesn’t update until you interact with it in the explorer, I ended up working around this by making a copy of the textlabel that appears after it finishes tweening

1 Like
#7

I ended up doing that too, when the function completes. it will print the exact number so it’ll look like it was suppose to do that.

1 Like