Unreal Concepts - Different Shaped Progress Bars ( UE4 )

We will be showing a concept of Different Shaped Progress Bars where we can make a circular progress bar or even a non linear bar similar to the health bar in Kingdom Hearts.

[jeshi-kxrp]

Its crazy how every time I need to know something that you happen to have a video for it. Thanks again.

[andrewliu]

There is a way to deal with grey scale textures so it reacts to the alpha value better. Go to texture settings and uncheck sRGB. Then inside the material graph, change the texture sample type to Linear Color. That should do the trick.

[Regentlord]

The best way to do this is using the "VectorToRadialValue" function's "Vector Converted to Angle" output as it will give you a flawless mathematical radial texture sample.

[Nintendan]

Just what I was looking for and an explanation that makes sense of whats going on. I can get very confused when it comes to materials sometimes but your demonstrations make it very easy to understand.
Easily one of the best resources for Unreal stuff. Loving the sheer amount of content you have uploaded.

[ursoogarbage]

Your videos are the best out there. You do such a great job explaining things! I've been waiting to see a good video on radial progress bars and here it is. Keep up the good work!

[pummelweed]

Dude, thank you, like good lord i was looking everywhere for a tutorial like this

[TorQueMoD]

A few things to note: After importing your gradient (progress bar) texture, you need to double click on it and set the compression settings to UserInterface2D (RGBA) and you need to UNCHECK sRGB. Then in your texture sample node, you need to set the Sampler Type to Linear Color. This will make sure that the progress (Alpha parameter) matches your gradient. Otherwise, it will be off by a large percentage.

[Lasert]

3:14 "This is our extremely awesomely organized circular progress bar of doom" That line just made my day

[growlmcscowl]

If anyone is reading through these comments looking for why the radial gradients aren't appearing, and was just hooking up the nodes visible in the video, you probably hooked up the stray '0' to the 'density' node on the bottom radialgradientexponential. Don't hook it up, just delete it.

[InnerOutline]

Thank you very much for your efforts, your videos are really useful, I have learned a lot from them!

[samohickey]

Thank you so much! Gradients saved me!

[herbivorethecarnivore]

What is "Dynamic Mat" at 15:44? You never mention it or what it's supposed to be, so I can't plug it in without knowing the variable type.

[ClaudeGIROLET]

Thanks mathew for this very clear tutorial, may i ask you a newbie question ? as in the circle exemple exemple you generated the circles using materials nodes, do you think it would be possible to use the same kinda technique to generate the angular gradient instead of using an useful but imperfect picture ? thus, you'll have a perfect gradient going from 0 to 1 where 0.5 would represent the half. I'm new to unreal engine so i don't know if this is even possible or how to do it.

[VallentinDev]

At 6:54 everything said is wrong, the gradient isn't poorly designed. The gradient is simply gamma corrected and thus not in linear space. (I also commented this on Reddit, but thought I would add it here as well.)

[RandomGuyyy]

This is one of the things that's a bit easier in Unity, there you use an image with the radial fill option. I wish Epic made radial progress bars a default in UMG.

[gamekingstudios]

can you make a vertical curved health bar tutorial
im been lookin all over for one. thanks in advance

[viciousvndta]

You just left sRGB on, thats why 0 takes up so much space. The gradient itself is fine, at least when it comes to the math.

[chuntaolin]

how about getting it to share the same bar?

[carlostrujillo]

Hello Mathew and everyone. Does anyone know how to create a 2d sound time bar? I have a blueprint where u press a key, and a 2d sound will be reproduced. What i want to do is listening to this sound but also see a time bar that shows me how long this sound will last. Sorry about my english, im not a native speaker.

[renners]

how can i put a background image on unreal engine?