How to make a round speedometer like this

[Goaliekidj96 (TheRealSlimShady)]

I have made a line system for “A Chassis” that works normal, but I want a circular Speedometer that looks similar to how greenville has theirs, does anyone know how?

[Goaliekidj96 (TheRealSlimShady)]

[SourLemon100000 (SourLemon)]

I’m going to assume the spedometer bar fills up as you increase speed. I’ve achieved something similar before by rotating UI gradients applied to different frames that are on top of each other. Here’s a graphic I made demonstrating how it works:

To implement this in your game, you might use layers of frames with UI corner and UI gradient objects. Below is a recreation of how I implemented the above concept in my own game (using red instead of blue). The UI corners all have their CornerRadius.Scale set to 0.5 (though you can set it to any value greater than 0.5 and still achieve the same thing).

Base.UIGradient.Color has these settings. Note that the middle is achieved by having a point at 4.999 and 5 so that the color change is as instantaneous as possible.

And Animation.UIGradient has these color and transparency settings. Just like the settings for Base.UIGradient.Color, they also have 2 points that are really close to each other to get that instantaneous color switch.

The image label is left with the placeholder image, but I imagine you could fill it with the speed readings. Perhaps by changing it to a frame and adding some text labels? Additionally, and this should go without saying, you don’t have to use black and red.

With this setup, all you’ll need is a script to translate speed into a degree of rotation. One thing worth mentioning is that once you reach 180 degrees, you’ll have to switch the black segment of Animation.UIGradient.Color to be red.

If you’re more of a hands-on learner, here’s the file so that you can fool around with it:
CircularBarAnimationDemonstration.rbxl (67.1 KB)

Edit: I just realized that I accidentally did the opposite of what my graphic showed. That is, I set my implementation up in such a way that you should be rotating the layer with transparency instead of the fully solid one. I really don’t feel like rewriting all of this, but the concept remains the same, so I’ll leave it in.

[Goaliekidj96 (TheRealSlimShady)]

Thank you, I will test this out, i made one i do like but maybe in the future i might need to use this!