How Would I Go About Making a Curved Tween

Hello Devforum,

Recently I have been trying to make a splash Gui animation like this: https://gyazo.com/470a8a4db9dd569c4820c09918b98689

Would there be anyway to tween a gui in a curve or move it relative to it’s rotation. I couldn’t find anything online about it or any modules. Any help is appreciated, thank you.

-HiddenKaiser

3 Likes

Roblox tweens don’t natively support this, but you can create your own function to do what you need. I recommend taking a look at bezier curves.

Edit: Wiki link

2 Likes

Bezzier curves aren’t necessary for this. I suggest looking at some basic physics.

1 Like

I would probably just do a basic simulation of a particle under gravity. For each coin have a table containing position and velocity vector3s. Then have something like this:

game:GetService("RunService").RenderStepped:Connect(dt)
  for _, Coin in pairs(Coins) do
    Coin.Position = Coin.Position + Coin.Velocity * dt
    Coin.Velocity = Coin.Velocity - Vector3.new(0, GRAVITY * dt, 0)
    Coin.UIElement.Position = UDim2.new(Coin.Position.X, 0, Coin.Position.Y, 0)
    Coin.UIElement.Size = UDim2.new(DEFAULTSIZE * (1 + Coin.Position.Z), 0, DEFAULTSIZE * (1 + Coin.Position.Z), 0)
  end
end)

We just do a simple physics simulation in the first two lines inside the for loop, then turn our ‘imaginary’. so to speak, Vector3 position into a position on the screen, and using the depth of the particle, Z, to change its size, to give the illusion of it moving in 3D as a 2D element. If you give them an initial upwards velocity and a random velocity in the X and Z directions, it should create a nice fountain effect.

8 Likes

Physics functions would also be beneficial, but for when you need something more complex than a simple down-then-up (or vice versa), or you want it to follow a very specific path (more complex than one curve), bezier curves are the way to go, especially if you want it to change curve direction.

2 Likes