Announcement

Collapse
No announcement yet.

[HELP]Circular Progress Bar

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    [HELP]Circular Progress Bar

    Hello UE Community

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

    Click image for larger version

Name:	Captura.PNG
Views:	1
Size:	23.0 KB
ID:	1155995


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

    #2
    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.


    Attached Files
    CTO Villusion Studios
    Grad Student in Interactive Design and Game Development, SCAD
    company site: http://www.villusionstudios.com/

    Comment


      #3
      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%

      Click image for larger version

Name:	rsz_estrella_valorej1.png
Views:	1
Size:	34.1 KB
ID:	1082134

      And again in 50%

      Click image for larger version

Name:	rsz_estrella_valorej2.png
Views:	1
Size:	35.3 KB
ID:	1082135

      This is what i want to make. But thanks

      Comment


        #4
        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...
        Live long and prosper.

        Comment


          #5
          In that case I would think using sprite sheets for you animation would be the easiest. Here's a tutorial on the material creation:
          https://wiki.unrealengine.com/Sprite...ence_animation
          There are lots of tutorials and threads on using sprite sheets if you do a search.
          CTO Villusion Studios
          Grad Student in Interactive Design and Game Development, SCAD
          company site: http://www.villusionstudios.com/

          Comment


            #6
            Check this thread:

            https://forums.unrealengine.com/show...ith-alpha-mask

            And this page:

            https://docs.unrealengine.com/latest...ing/index.html

            Comment


              #7
              Yup - that's the way to pull off this effect.

              Comment


                #8
                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.

                Click image for larger version

Name:	Captura.PNG
Views:	1
Size:	5.9 KB
ID:	1082227

                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.

                Click image for larger version

Name:	Captura de pantalla (22).png
Views:	1
Size:	245.4 KB
ID:	1082228

                And thanks for all

                Comment


                  #9
                  So... i think i need to make the sprite option, i guess

                  Comment

                  Working...
                  X