Circular Hold UI

Help and Feedback Scripting Support
#1

Hey, how can I go about making a UI that tweens circular like the proximity prompt when you hold it?

I tried looking through the script of the prompt but I’m having a hard time understanding how it works.

1 Like
#2

Okay this is perfect, I actually made something like this because I wanted to replicate the way proximity prompts look without having to use a proximity prompt. So here’s the method:

  1. You use two different ImageLabels that have half circle bars as their images. They look like this.

  2. After you have placed the image labels, and they look like this (or this in the explorer), put two UIGradients in them. These gradients control the transparency of the bar. So what you are seeing is not actually a size tween, it’s a transparency tween.

  3. Now it’s time to set the UIGradient’s transparency. For both of the circular UI bars, set UIGradient’s transparency to look like this. It should be set to 0 until it reaches 0.5, then set to 1. Now, this is where the trick comes in.

  4. You will notice that after setting the transparencies of these UIGradients, the right circle will be transparent. Set the rotation of the left circle to 180. Now both circle bars should be completely transparent. The trick to making them move is tweening the rotation of the UIGradients. Setting the right bar’s UIGradient’s rotation from 0 - 180 will tween the bar, then setting the left bar’s rotation from 180 - 360 will tween that bar. Overall, you should have something that looks like this.

  5. Now all you have to do is script the keybind and holding mechanic, and you’re done!

I was thinking of making a module to make this easier, but I wasn’t sure on whether people already knew how to do this or not. I also saw there was a proximity prompt module already made, so I hesitated on making it. Hopefully you found this useful!

10 Likes
#3

I never thought of this beforehand, pretty insane man. Thanks for the help!

2 Likes
#4

Yeah of course, glad I could help! :smirk_cat:

#5

Hey, do you know of a way to change the position of a keypoint for NumberSequences? – in scripts

#6

Nvm, found a workaround with offset, thanks for all the help again!