Make a curve that fills wherever the player clicks on UI

[Joeykm16 (Joey)]

I made a circle that has a UIStroke and by using UIGradients, I made it so the border (UIStroke) around the circle can fill. However, I need a way so that when a player clicks on the outside of the circle, it will fill to wherever the player clicks. Such as a 0 to 1 value.

This is the circle that I made:

[Playfullgamer_YT (Playfull)]

1. UI Circle Setup:

• You already have a UI circle with a UIStroke and UIGradient applied.

2. Adding User Input Handling:

• You can use a combination of UserInputService and Mouse object to capture player input.
• Create a function that calculates the angle between the center of the circle and the mouse cursor. This angle will determine the fill amount of the UIGradient.

3. Updating the UIGradient:

• Use the calculated angle to update the Rotation property of the UIGradient.
• The Rotation property of the UIGradient determines the direction of the gradient. It typically ranges from 0 to 360 degrees. By setting it based on the angle, you can make the gradient fill up to the clicked point.

Here’s an example of how you might implement this:

local UserInputService = game:GetService("UserInputService")
local gradientCircle = script.Parent -- Reference to your gradient circle

-- Function to update the UIGradient based on mouse position
local function updateGradient(mousePos)
    local circleCenter = gradientCircle.AbsolutePosition + gradientCircle.AbsoluteSize / 2
    local mouseVector = Vector2.new(mousePos.X - circleCenter.X, mousePos.Y - circleCenter.Y)
    local angle = math.deg(math.atan2(mouseVector.Y, mouseVector.X)) + 180
    
    -- Update the UIGradient's Rotation property
    gradientCircle.UIGradient.Rotation = angle
end

-- Mouse input handling
UserInputService.InputBegan:Connect(function(input)
    if input.UserInputType == Enum.UserInputType.MouseButton1 then
        updateGradient(input.Position)
    end
end)

UserInputService.InputChanged:Connect(function(input)
    if input.UserInputType == Enum.UserInputType.MouseMovement and UserInputService:IsMouseButtonPressed(Enum.UserInputType.MouseButton1) then
        updateGradient(input.Position)
    end
end)

This script captures mouse input and calculates the angle between the center of the gradient circle and the mouse cursor. It then updates the UIGradient’s Rotation property based on this angle, which gives the effect of filling the circle’s border toward the clicked point.

Please note that this is a basic example and might need further adjustments based on your specific design and requirements.

[Joeykm16 (Joey)]

After a bit of editing, this works perfectly, thank you!