How to make progressbar?

[mistr88]

Hi,
I need to make progressbar of custom shape, how to do this? (bec normally, i make progressbar, by scaling frame)

[RootEntry (RootAlNaser)]

You could use a sprite sheet and iterate through the images to make a animation.

This could help you:

Radial Sprite Sheet Generator for Circular Progress Indicators

I created a web app that lets you generate radial (circular) progress indicators from any source image you give it. This is necessary because Roblox doesn’t support clipping masks for images. There are other ways to make a radial progress indicator, but nothing will match the quality of using pre-rendered images. Since UI elements are locked to integral coordinates, using dynamically rotated segments creates some pretty undesirable results. I’m not the first one to make something like this, but…

[mistr88]

No, i dont want circular progressbar, i need classic progress (hp) bar, but not as rectangle, but as custom shape

[RootEntry (RootAlNaser)]

What shape are you looking for?

[mistr88]

I need to make hpbar as in WoW

(left-down)

[RootEntry (RootAlNaser)]

You could achieve that effect by using Clip Descendants in the frame property.

Basically what you do is you have a imagelabel as the desired shape, then you have just a frame inside which is the bar, in this case you might want it green.
Then you turn Clip Descendants on in the image label. And it should clip out the square and fit it into the shape. I believe you have to make the ZIndex higher on the frame.

Then you just use :TweenSize or whatever.

I have not tested it, so it might be incorrect.

[mistr88]

and when i need, to render damage by gray, do i need to create another imege and put it under it?

[RootEntry (RootAlNaser)]

What do you mean? Could you explain it in another way.

[mistr88]

I need to make empty part of progress bar grey, do i need to make another image for it?

[RootEntry (RootAlNaser)]

Just edit the ImageLabel’s Color to grey or whatever you have as the shape.

[colbert2677 (ImagineerColbert)]

If you need a specific tutorial on how to do this, refer to the following post:

Rounded Loading Bar

Sure! Here’s my Explorer setup: [image] Here’s the Base ImageLabel, just set up as you usually would: [image] You can position and size it however you like. Nothing crazy about the image settings either: [image] Inside that, I have a frame called Clipping: [image] It’s just an invisible frame with ClipsDescendants enabled, and it’s sized to match the current progress. For example, if the current progress is 25%, the size of that frame will be {0.25, 0}, {1, 0}, where the 0.25 represent…

Essentially what you’re doing is placing two of the same shape layered over top of each other, but one is in a frame that clips the topmost image to give it the impression of decrease.

[mistr88]

I already have it

[Moonvane]

Wait can you show your explorer for what it looks like? It didn’t work for me when I tried

[Moonvane]

Ok nevermind I figured it out You basically need two of the same image but one of them gets clipped by being a child of a frame with ClipsDescendants enabled. The frame needs higher ZIndex as well. It uses the exact same method as this: Rounded Loading Bar - #2 by Elttob