Announcement

Collapse
No announcement yet.

SDF Robo Progress Bars

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

    [RELEASED] SDF Robo Progress Bars

    Hello,

    I would like to introduce you my new material/blueprint system that speeds ups preparing customized progress bars. My method allows achieving a large variety of cool effects without any 2d graphics skills.

    First alpha version showcase in UE4:


    My proof of concept on Shadertoy:
    https://www.shadertoy.com/view/XtlBzl

    Current features:
    • Signed distance functions based rendering (shape is generated from mathematical functions). 'Vectorized' graphics quality.
    • Configurable for all resolutions.
    • Configurable progress steps divisions.
    • Fully scalable and extendable for more shapes.
    • Not used any texture for final used but can be extended by textures.
    • GPU friendly, one draw call, fast loading, small memory usage (one material per bar)

    Roadmap:
    • More shapes circle bar, triangle bar
    • Second progress color (especially for fighting games)
    • Glossy effect/Shadows etc.
    • Animated patterns
    • Replace SDF functions with external SDF textures.
    It would be great to get some feedback from you.
    Last edited by ImaginaryBlend; 01-30-2018, 09:08 AM.
    Fast Stylized Procedural Sky
    Anime Toon Shading
    SDF Robo Progress Bars
    Aquatic Surface

    #2
    Version 1.0 released:

    https://www.unrealengine.com/marketp...-progress-bars




    Last edited by ImaginaryBlend; 01-30-2018, 07:42 AM.
    Fast Stylized Procedural Sky
    Anime Toon Shading
    SDF Robo Progress Bars
    Aquatic Surface

    Comment


      #3
      Hello, I'm try to make my own bar but want to use these materials .I also want to change the image but still want to keep how the bar is increasing and decreasing.Can i do that with this program.Here is a picture of the custom bar i want to use.I want the top to start green and go into a purple.With a lined parts like you have in your program.
      Attached Files

      Comment


        #4
        You can use the mask for the progress of the bar.
        Probably you will have to split your bar into two quads: background and Robo Bar Material with a mask.

        I'm working on more specific documentation right now. If you are still having problems, please send me a mail (krystian.komisarek@gmail.com) with your bar texture I will help you solve that

        Last edited by ImaginaryBlend; 02-02-2018, 07:13 AM.
        Fast Stylized Procedural Sky
        Anime Toon Shading
        SDF Robo Progress Bars
        Aquatic Surface

        Comment


          #5
          The bars look great and very interested is there any plan on adding border fill bars or something similar? also any timeline or estimates on the road map for circle bars?

          Comment


            #6
            Yes, circle bar is on my list Do you have any examples of border fill bars ?
            Fast Stylized Procedural Sky
            Anime Toon Shading
            SDF Robo Progress Bars
            Aquatic Surface

            Comment


              #7
              I just wondered if you had an idea for when circles would be added this quarter or next for example? Border fill bars are similar to circle but would run around the outside so might not actually be needed but as an example

              https://www.youtube.com/watch?v=RqJo53Fyms8

              An additional request or question is how difficult would it be to add or show damage buffers an example of which is

              https://www.youtube.com/watch?v=4D64KN534ZM

              Is it also possible to modify or merge some bars together e.g. the green bar divided into squares changing color from green to red the lower the bar goes. I have seen it on another bar in your pack but just wondered if they could be mixed easily?

              Comment


                #8
                Originally posted by Smartay View Post
                I just wondered if you had an idea for when circles would be added this quarter or next for example? Border fill bars are similar to circle but would run around the outside so might not actually be needed but as an example

                https://www.youtube.com/watch?v=RqJo53Fyms8
                I need to do some tests but I feel that after small modification of the master material it should be possible.

                Originally posted by Smartay View Post
                An additional request or question is how difficult would it be to add or show damage buffers an example of which is

                https://www.youtube.com/watch?v=4D64KN534ZM
                Some basic buffers can be done by two layers of progress bars it is not very comfortable and efficient but possible. I will think how can I make it better.

                Originally posted by Smartay View Post
                Is it also possible to modify or merge some bars together e.g. the green bar divided into squares changing color from green to red the lower the bar goes. I have seen it on another bar in your pack but just wondered if they could be mixed easily?
                I've prepared 12 examples of material to show a wide range of possibilities. All bars in Robo Bars package share the same master material function so you can copy parameters from one bar to another.
                Last edited by ImaginaryBlend; 02-02-2018, 11:27 AM.
                Fast Stylized Procedural Sky
                Anime Toon Shading
                SDF Robo Progress Bars
                Aquatic Surface

                Comment


                  #9
                  I've tried to use this, and I've followed the tutorial, However, the bar continues to just go from 0 to 100% and back again repeatedly.
                  Graph: https://gyazo.com/30998d76851c0e7ce6d409643f9ab6f9
                  Designer: https://gyazo.com/4411194d321d5b1678fcf648750e8710

                  Comment


                    #10
                    Just open bar material and find debug option:
                    Progress->ProgressDebug = false
                    It's activated by default to visualize the effect of changes in the preview. I will update the documentation very soon with explanation of all material parameters
                    Last edited by ImaginaryBlend; 02-06-2018, 10:18 AM.
                    Fast Stylized Procedural Sky
                    Anime Toon Shading
                    SDF Robo Progress Bars
                    Aquatic Surface

                    Comment


                      #11
                      Documentation updated.
                      Fast Stylized Procedural Sky
                      Anime Toon Shading
                      SDF Robo Progress Bars
                      Aquatic Surface

                      Comment


                        #12
                        Just finished first huge update of bars

                        ​​​
                        Last edited by ImaginaryBlend; 03-04-2018, 06:35 PM.
                        Fast Stylized Procedural Sky
                        Anime Toon Shading
                        SDF Robo Progress Bars
                        Aquatic Surface

                        Comment


                          #13
                          When will the update of the circle be release? I don't have it.

                          Comment


                            #14
                            It looks very strange because the package that I've linked in marketplace contains updated content. For a week I was thinking that you can already use the new version of bars - even I've got confirmation "Updates to your product have been processed and are now live".

                            I'm waiting for a response from Epic Marketplace Support to solve this. Please be patient update should be available very soon
                            Fast Stylized Procedural Sky
                            Anime Toon Shading
                            SDF Robo Progress Bars
                            Aquatic Surface

                            Comment


                              #15
                              Originally posted by Frustrax View Post
                              When will the update of the circle be release? I don't have it.
                              I didn't find the updated bars too (I checked and tried the package yesterday), waiting for it!

                              Comment

                              Working...
                              X