How to move UI in arc (using Bezier)

Help and Feedback Scripting Support
#1

I’ve read through the devhub page on Bezier Curves, and have gotten this far, but I can’t seem to figure out how to actually tween the ball along the arc?

image
image1059×600 55.9 KB

And the ball should basically bounce between P0 and P1, while maintaining the arc

I also don’t know why the ball isn’t set to the centre of the X axis. I have its AnchorPoint set to 0.5, 0.5, and P1 is directly in between P0 and P2, so the Orange ball in the X axis should be straight with the Centre link

function quadBezier(t, p0, p1, p2)
	return (1 - t)^2 * p0 + 2 * (1 - t) * t * p1 + t^2 * p2
end

while GameActive do
	if not GameActive then break end -- Game has finished
	
	local Bezier = quadBezier(0.5, HUD.P0.AbsolutePosition, HUD.P1.AbsolutePosition, HUD.P2.AbsolutePosition)
	HUD.Ball.Position = UDim2.new(0, Bezier.X, 0, Bezier.Y)
	wait(1)
end
1 Like
#2

If you’re looking to tween the ball along the bezier curve you’ll want to apply changes to the variable t. t determines the interpolation between P0 and P1. So when set at 0 it should give you P0 and when set at 1 it’ll give you P1.

I’d suggest defining some type of frame rate or total time, and thinking about how much you want to change t between iterations. You can use a while loop, RunService.RenderStepped.

Also wiki has some good animation visuals of the bezier curve used as a function of time.

Can’t help with the orange ball tho. Maybe the UI is centered but not the actual image?

4 Likes
#3

I managed to figure out the tweening.

I believe the positions are a little off due to AnchorPoints?? I don’t think it’s taking them into consideration, and thus they are offset, but I don’t know :confused:

#4

Hmm just checked how AbsolutePosition handles AnchorPoint. It will always return the upper left corner’s position. It looks like P0, P1, and P2 are all skewed left, so its not symmetric anymore. Try making those UIs size {0,0,0,0}, and putting frames inside them to be your visuals.

#5

Not sure what I’m doing wrong, but for some reason the AbsolutePosition.Y and Position.Y aren’t linking up
image
The X positions match, but not the Y

#6

AbsolutePosition is how much pixels to the right and down an object’s top left corner is on the screen. Position is how much pixels to the right and down an object is from its parent.

It’s probably the Y value is inheriting some negative position. I’m guessing the parent UI has an absolute position of (0, -36).

#7

Ye, its parent is in a ScreenGui, with IgnoreGuiInset set to true

#8

Makes sense, GUI inset be that golden 36 pixels. Probably makes the ball appear a bit high. Maybe try this function out:

local function relativeAbsolutePos(UI)
    local inherited = UI.Parent.AbsolutePosition
    return UDim.new(
        UI.AbsolutePosition.X - inherited.X, 
        UI.AbsolutePosition.Y - inherited.Y
    )
end
1 Like