How do I make "hold to complete" radial buttons like Jailbreak has?

Help and Feedback Scripting Support
#1

I want to create a button that needs to be held down for 2 seconds before triggering an action.

I want them to work like the buttons in Jailbreak, where there is a radial progress bar around the outside of the button.

How do I draw a radial progress bar?

image
image901×839 31.1 KB

5 Likes
#2

Not sure the direct method that Jailbreak uses but playing with UIGradient tends to be a solution I’ve found to work, although you might need to use two semi circles instead of one entire circle.

With a UIGradient Transparency graph like this:

f30b347efc7f0aa50afff9c68b58e87b
f30b347efc7f0aa50afff9c68b58e87b900×278 7.75 KB

I saw some interesting results when playing with the rotation of the UIGradient using that setting,

8ac9e9eb48dcf61c9e636a3ffff86b74 (1)

Tweaking will obviously be needed but I’ve used that in the past to make radial progress bars, although it might not be the most up to date solution.

2 Likes
#3

Proximity prompts.
Roblox has this built in object which makes things easier for creators, not having to code the system manually.
https://developer.roblox.com/en-us/api-reference/class/ProximityPrompt

2 Likes
#4

The radial progress bar is usually achieved through using ui gradients nowadays i think?:

Needed: Have 2 half circles, and parent ui gradient under each. (one for the first half, one for the second half)

  1. Have the UIGradient.Color property so half is coloured in, one is grayed out.
  2. Have the UIGradient.Rotation to 90 degrees so it has gradient from top to bottom, not left to right
  3. Change the ui gradient.Offset so only grayed out area is visible
local HalfCircle = Instance.new("ImageLabel")
HalfCircle.Image = ""--some image with half circle
HalfCircle.Size = UDim2.fromOffset(100, 100)

local UiGradient = Instance.new("UIGradient")
UiGradient.Rotation = -90
UiGradient.Color = ColorSequence.new(
    ColorSequenceKeypoint.new(0, Color3.new(0.1, 0.1, 0.1)),
    ColorSequenceKeypoint.new(0.5, Color3.new(0.1, 0.1, 0.1),
    ColorSequenceKeypoint.new(0.51, Color3.new(1, 1, 1)),
    ColorSequenceKeypoint.new(1, Color3.new(1, 1, 1))
)
UIGradient.Offset = Vector2.new(0, -0.5) -- Only Gray is visible with this
UIGradient.Parent = HalfCircle
  1. Just keep changing the offset so it fills the half circle with coloured in area
--Start To fill the half circle
local duration = 2
local startTim = time()
local con; con = RunService.RenderStepped:Connect(function()
    local fillPercentage = math.clamp((time() - startTime) / duration, 0, 1)
    UIGradient.Offset = Vector2.new(0, -0.5):Lerp(Vector2.new(0, 0.5), fillPercentage)

    if fillPercentage == 1 then
        con:Disconnect()
    end
end)

Or be lazy and use proximity prompt :woozy_face:
https://developer.roblox.com/en-us/api-reference/class/ProximityPrompt

5 Likes
#5

Just utilize ProximityPrompts. It’s an Instance that does just that, and it’s created directly from Roblox.

2 Likes
#6

That’s really clever. Therty characters.

3 Likes
#7

Didn’t know about those. Probably won’t work for this, since it’s for a button I want to slap on my main GUI, but those could be useful for other things.

3 Likes
#8

Would be better if you read the whole reference as it contains all the necessary information about the methods and attributes of it’s class and rarely further examples.
ProximityPrompt.Style (roblox.com)

Proximity Prompt Ui can be customized and no default Ui will be provided if style is set to custom.

2 Likes