Hello! This is my first tutorial, so if you have any constructive criticism, please feel free to put it in the replies.
-
To start, put a CanvasGroup in your GUI. This masks the top (or bottom) of your images so it is the shape of a semicircle. I use images with a hole in the middle, but that is optional.
-
Next, you would add your images under the CanvasGroup like a regular progress bar (the background of the bar and the filled area of it). Change the ZIndex so the Fill renders on top of the background.
-
Now comes the trick; you aren’t cropping images, but rather using a UIGradient to make it only partially filled. Adjust the UIGradient’s Transparency to your liking (for a sharp cutoff, set the transparency to 0 at time 0.499, then transparency to 1 at time 0.5)
-
You have created your progress bar, and to operate it, you need to change the Rotation in the UIGradient from one angle to the other, and you can do this through script also.
Simple code example
local RunService = game:GetService("RunService") local Char = script.Parent local Humanoid = Char:WaitForChild("Humanoid") local BarFill = --path to the "full" part of the bar local Gradient = BarFill:WaitForChild("UIGradient") RunService.RenderStepped:Connect(function( Gradient.Rotation = math.map(Humanoid.Health, 0, Humanoid.MaxHealth, 0, 90) -- You may have to tweak the last two numbers (the "empty" angle and the "full" angle) end)
Here is a picture example and a diagram of how the progress bar works;
