How to make this coin UI animation?

Help and Feedback Scripting Support
1

How would I make an animation UI for coins?

Basically the coins appear onscreen and then move over in a satisfying way to the coin icon which displays how many coins you have

How do i script this

2 Likes
2

I am guessing there is a plugin for this sort of thing, particles as UI. I personally would love to know more about this type of thing, but I might have a way that could make something similar:

  1. Have an image label with the image you want and put it somewhere, like replicated storage or something. Make sure to use the aspect ratio and have sizes in scale.
  2. Clone the UI a bunch of times, parent the UI to a screen GUI, and then set a random position but relatively near the middle of the screen.
  3. Have a local script inside each UI or something that would take the image label UI and tween it towards the position of where you want it to end. The end in this case would be where the coin amount is at.
  4. You can randomize many things here, but the end has to be the same. Speaking of the end goal, it seems like in the video that it bounces when the coin image labels touch it. I believe the coin amount UI to be playing a tween when the pop-up coins finish their tween.

The main thing here is tweening, but you need to randomize some things to sell the look. Sorry if this was confusing. I haven’t done anything like this before and this is just how I might try to go about it.

5 Likes
3

Sorry for the necropost, but I’m wondering on how to create this too

4

It’s just math.random() and tweening.

5

local TweenService = game:GetService(“TweenService”)

local Coin = script.Parent:WaitForChild(“CoinTemplate”)
local EndPos = script.Parent:WaitForChild(“Cash”)

local function CreateAnimation(Amount)
for i=1, Amount do
task.spawn(function()
local ClonedCoin = Coin:Clone()
ClonedCoin.Visible = true
ClonedCoin.Size = UDim2.fromOffset(40, 40)
ClonedCoin.Parent = script.Parent

		local FirstTween = TweenService:Create(
			ClonedCoin,
			TweenInfo.new(0.7),
			{
				["Position"] = UDim2.fromScale(math.random(300, 700) / 1000, math.random(300, 700) / 1000),
				["Size"] = UDim2.fromOffset(60, 60)
			}
		)

		FirstTween:Play()
		FirstTween.Completed:Wait()

		local LastTween = TweenService:Create(
			ClonedCoin,
			TweenInfo.new(),
			{
				["Position"] = script.Parent.Cash.Position,
				["Size"] = UDim2.fromOffset(50, 50)
			}
		)

		LastTween:Play()
		LastTween.Completed:Wait()
		ClonedCoin:Destroy()
	end)
end

end

while task.wait(2) do
CreateAnimation(math.random(5, 15))
end

may this could help?

6 
local function animateCoins()
	local TweenService = game:GetService('TweenService')
	local imageId = "rbxassetid://12345678" -- The Asset Id of the ImageLabel
	local gui = game.Players.LocalPlayer.PlayerGui.ScreenGui -- ScreenGui path here
	local coinDisplay = game.Players.LocalPlayer.PlayerGui.ScreenGui.Coins.ImageLabel -- This is the Coin ImageLabel of where the coins will fly to
		
	local coinStartSize = UDim2.new(0, 50, 0, 50)
	local coinEndSize 	= UDim2.new(0, 100, 0, 100)
	local coinDuration  = 0.5 -- Time to complete the tween
	
	
	
	for i=1, 20 do
		task.spawn(function()
			local coin = Instance.new('ImageLabel')
			coin.Image = imageId
			coin.BackgroundTransparency = 1
			coin.Size = coinStartSize
			coin.Parent = gui
			coin.AnchorPoint = Vector2.new(0.5,0.5)
			
			local position = UDim2.new(0.5, 0, 0.5, 0)
			coin.Position = position
			
			local tweenInf = TweenInfo.new(coinDuration, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
			local pos = UDim2.new(0.5 + math.random(-20, 20) / 100, 0, 0.5 + math.random(-20, 20) / 100)
			local tween = TweenService:Create(coin, tweenInf, {Size = coinEndSize, Position = pos})
			tween:Play()
			task.wait(0.25)
			
			local tweenInf = TweenInfo.new(0.8, Enum.EasingStyle.Quad, Enum.EasingDirection.In)
			local pos = coinDisplay.Position
			local tween2 = TweenService:Create(coin, tweenInf, {Size = coinDisplay.Size, Position = pos})
			tween2:Play()
			tween2.Completed:Connect(function()
				coin:Destroy()
			end)
		end)
	end
end
1 Like