Advanced curve gui

So I was trying to learn how to tween and I created this thing which is basically… this: https://gyazo.com/7b3cbed2e431b7eb013b9cc6a2c502cf
and here is the code:

while true do
	script.Parent:TweenPosition(UDim2.new(0.5,90,0.5,-110), "In", "Linear", 2)
	wait(2)
	wait()
	script.Parent:TweenPosition(UDim2.new(0.5,90,0.5,90), "In", "Linear", 2)
	wait(2)
	wait()
	script.Parent:TweenPosition(UDim2.new(0.5,-110,0.5,90), "In", "Linear", 2)
	wait(2)
	wait()
	script.Parent:TweenPosition(UDim2.new(0.5,-110,0.5,-110), "In", "Linear", 2)
	wait(2)
	wait()
end

I want to avoid all that copy pasting and make a nice half circle tween using automated ways to curve and speed it but the point is that idk how… however here is the thing that I want to avoid and the thing that I want to create:
nice curved tweens

3 Likes

Tweens just don’t give you enough control to do this. AFAIK you can only get tweens to move things in straight lines. You can get the thing you want by making your own “tween” thing though.

1 Like

So you say that I basically need to make a plugin that consumes all this copy paste?

Only thing that I can think of which is somewhat better, is to have the position values in a table and loop through them. It’ll at least save a lot of lines and make it a lot tidier.

There are definitely ways to curve it nicely like that, but it will still require some copy and pasting :stuck_out_tongue: One way is to create a mathematical function with the frame as the parameter, but I’m not experienced enough in that area to come up with a suitable function.

However, making a curve that smooth this is definitely still doable with tweens - just not as easily. You need to tween the X and Y axis seperately. If you think about it, the top-left curve starts increasing on the Y-axis fast first then starts slowing down, then starts increasing in speed on the X-axis. Because of that, you need to use a “In” tween on the X-axis and an “Out” tween on the Y-axis. I will provide you with a code snippet of how this could be done. It’s not a direct solution to your problem, but is a way to make curves smoothly. You can also experiment with the EasingStyle to change how the curve is shaped.

local TweenService = game:GetService("TweenService")

local Frame = script.Parent

local XVal, YVal = Instance.new("NumberValue"), Instance.new("NumberValue")

local XInfo, YInfo = TweenInfo.new(3, Enum.EasingStyle.Sine, Enum.EasingDirection.In), 
TweenInfo.new(3, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)

local XTween, YTween = TweenService:Create(XVal, XInfo, {Value = 250}), 
TweenService:Create(YVal, YInfo, {Value = -250})

XVal:GetPropertyChangedSignal("Value"):Connect(function() -- There are better ways to do this 
    Frame.Position = UDim2.new(0.5, XVal.Value, 0.5, YVal.Value)
end)

XTween:Play(); YTween:Play()

Here is the result I got by doing this:

Here’s the curve you get with Quart as the easing style instead, it would require some filler linear tweens to make your shape though:

6 Likes

Thanks alot! This is what I call a proper solution to a problem. I appreciate alot the time you spent to script and reply to this topic and the solution is very easy to understand too!

3 Likes