Download

[HELP]Circular Progress Bar

Hello UE Community

I want to make a circular progress bar using this pic and in this way

Captura.PNG

So, the thing is, i need to make my own component? and how i can make it?

You can do this in UMG with just an image and an animation.

  1. Create a UMG widget blueprint
  2. add your image to the canvas panel
  3. create an animation and name it. Animate the “Angle” parameter from zero to 360 over the period of time you desire (the amount of time will determine how fast it spins)
  4. in the widget graph just call play animation on the animation, based on whatever input you want.

&stc=1

&stc=1

&stc=1

Thank’s for the advise, but that’s not what i’m looking for

I guess i don explain what i want in the right way… My bad

Ok, let’s retry

What i want it’s to fill the meter (yeah, that is a meter) and fill it in a circular way. This is the meter idea

This is the meter in a 35%

5e57b4ff46594c827e5ece92a064f0ee02c449f3.png

And again in 50%

b48262bdcfafa0c08452e6a056b65f401d64f75e.png

This is what i want to make. But thanks

hey there,

i think the best approach for you to do this is using a dynamic texture with scalars you provide in order to modify the behaviour.

Unfortunately im not good in dynamic textures, so i cant give you an example, but normally you have a value somewhere representing
the percentage which “fills” your image.

You then send your value to the dynamic texture (via SetScalar(by Name)).

You can bind those dynamic textures to an image in UMG, so you are able to call those SetScalarParameters…

In that case I would think using sprite sheets for you animation would be the easiest. Here’s a tutorial on the material creation:

There are lots of tutorials and threads on using sprite sheets if you do a search.

Check this thread:

And this page:

Yup - that’s the way to pull off this effect.

Ok, the two links are great but i can’t still making what i want. But thanks, this is helpful

Two things

First, i want to fill the meter in this way.

6a9269a4b8a9f8d79018c040d38f485be9ea8d53.png

Second, I don’t know if you can see it but the star doesn’t have all the colors that the original texture have

Here a pic of what have i done.

3873841a18b960048bd0492d22198027477cc485.png

And thanks for all

So… i think i need to make the sprite option, i guess