Round / Radial Progress Bar - Unreal Engine 5 Tutorial [UE5]
Вставка
- Опубліковано 12 чер 2024
- Check out my inventory system:
🌿www.unrealengine.com/marketpl...
I show you how to create a radial progress bar and create a function to easily change the percentage in realtime.
🔷💬Join my discord server / discord
00:00 Intro
00:13 Material
05:56 Blueprint - Set Percentage
10:56 Result & Outro
#ue5 #unrealengine #niceshadow
![PlayFab - Setup - Unreal Engine Tutorial [UE4] - (1/4)](http://i.ytimg.com/vi/BuUckZBPpRU/mqdefault.jpg)
![PlayFab - Setup - Unreal Engine Tutorial [UE4] - (1/4)](/img/tr.png)
at 0:42 for those who don't know how to form those shortcuts, press the key (1) + Left Click Mouse. NiceShadow in the future please explain these small details, cuz there are many beginners who don't know these tasks.
Yes you're right :)
Yea i was immediately stuck haha, cheers !
yeah please, thank god you helped me out here
Actual legend
youre legend
This was a GODSEND of a video! I've been looking for a radial bar for AGES and after two months of searching for something to replace my progressbar readout, I was about to move onto a different task when this video just saved my project's life! 😲
Glad it is so helpful :)
Ok for anyone having problem with progress bar variable, instead of changing the percent value
(Use SetScalarParameterValue inside NewWidgetBlueprint's Event graph.
And Target= Testbar > ProgressBar, ParameterName = Percent.)
I wanted to give up on figuring out this but i got it after a break, so i'm helping other out too.
Excellent tutorial. Thank you! Also, you have a very calming voice xD
excelent tutorial thanks so much!
absolute fucking legend. god tier stuff. thank you much
Super helpful, thx!!! 😍
Hello! Thx for the guide! Could you help me figuring out how to change the circle bar into the semi-circle bar without ruining other parameters?
Cool, thank you !!!
it does not work for me, the percent value does not update
same
Thankyou for the tutorial. Do you know what I can do if I don't want it to be a circle though? I still want to use the radial progress effect, but I want it to fill a different shape like an octagon.
Очень полезно! Правда я немного доработал твой метод и сделал немного по своему. Я считаю, что это надо делать не в функции, а в event-графе. Тогда работает
thank you very much!
The difference between Mask and Translucency is much more complex than "sharp and smooth". Masked only allows full values of 1 (White, visible) and 0 (Black, not visible). That is why you get pixel edges cause smoothing usually is done using transparency which allows values between 1 and 0. But the cost is a lot higher compared to Masked, thats why masked is used for lots of stuff like fooliage (if you are not using SSS). However you can have low cost and smooth edges using the Masked mode by using the DitherTemporalAA node.
Thank you for the explanation but where would you place the Dither node to actually smooth the edges. I still get pixelated results.
@@NiceShadow You put it right before plugging it into the Mask channel. However the smoothing when using Mask mode combined with DitherTemporalAA comes from Temporal Anti Aliasing, which is done in screenspace. That is why it will most likely not work on userinterfaces since they are rendered on top of the screen. You can still use it for pretty much anything else you'd like to or whereever transparency is taking too much computational power. ua-cam.com/video/kvHh0Jd-D3Q/v-deo.html
EDIT: When trying to sharpen or smooth edges on transparency channel (this does apply for UI too) you can use the smoothstep node instead.
@@swrcPATCH Ok, after trying to plug SmoothStep before the mask I can see only a slight difference but not really smoother.
@@NiceShadow You need to play with the Max value. Increasing it to something like 8 or even higher will smooth it a lot. Smaller values than 1 will sharpen edges. Make sure you use it on single channels only.
Great tutorial! You know how you can make the caps rounded on that progress bar?
Thanks! No, I don't know that
Awesome
11:56 can change the angle of the circle start
Had this working in 5.0 can't get it working in 5.3. Whenever I reference the material in the image and compile it loses the reference and defaults to a non-existent material. Anyone ever see this before?
I have the exact same issue with version 5.2. Did you find a solution?
Using 5.1.1 and having the same problem. I set the default value in the instance to 0.25 and now I see the widget, but I can't dynamically change the default value in the whole canvass widget. It seems like the promoted variable isn't updating the image somehow. I also don't see the widget on the screen. I'll update if I figure it out.
One issue I had (probably not yours) is that I named my parameter in M_RoundProgessbar (the class, not the instance) as "Percentage" instead of "Percent" and so it was not updating.
I had the problem that I actually fix with removing the "Set Brush from Material" in widget graph. It seems that do weird things with Image Brush configured in designer... (Override brush vs material instance brush conflict)
nice ty
❤ ty
Thank you! Shukran! :)
I love your enthusiasm. can you make a tutorial how to make a dead by daylight skill check mechanic.
Thank you :) but currently I don't have the time to look into it. Only doing tutorials of stuff atm that I personally did already
@@NiceShadow no worries i was just giving an idea thanks for actually responding.
Why I don't have preview
how can we use the scalar parameter value in another blueprint like the main character blueprint, to be updated on the tick. I had this widget percentage that was being updated based on distance for a progress bar, i just need to be able to use that value from the material. how ?
You need a reference to this material instance in your character. So create a 'Material Instance Dynamic' varibale in your character. In the widget on event begin play you need to create the material instance, save it in the variable and apply it as brush as I show in 7:20 (so make sure that it is created on event begin play and not in this SetPercent function). Then after that also on event begin play cast to your character and set the material instance dynamic variable you created in there to the variable RoundProgressbarInst.
Then you should be able to adjust the parameter from you character.
@@NiceShadow i did it differently, i created a float value in the character blueprint where the logic was implementated, cast on the tick in the widget graph to get the character, from there i can use the image i was using and set the scalar parameter value to the float i was using from my character, it does work now. it works now.
Has anyone been able to figure out how to set this up as a health bar? Can't find any tutorials that don't use binding.
still no idea?
I'm trying as well :(
@@gaetanlancelle1173 you can make this event based instead of binding, anytime you take damage or heal, call this set % function. you have to add two float inputs for current health and max health. then divide current/max hp(etc) to get a ratio 0-1 value. you can add an f interp to node to make it smooth by getting the material % scalar parameter plugged into current, and the hp ratio as target. should set the interp speed to something a lil higher to not have lag, like 2 or 3
how do i bind this to my players stamina cant bind like a normal progress bar does
Answer from another comment:
You can run SetPercent on EventTick. To save performance you should create another float CurrentPercent. So that you only Update the material instance if the CurrentPercent != the input percent.
That would have the same result as binding and for sure no measurable difference to normal binding.
Thx a lot
thanks, but how to use it for you character as an health bar?
I don't have a tutorial for a health system yet. But you should find tutorials about how create a health bar where it is connected to a normal progressbar.
It should be very easy to use my SetPercent function instead.
@@NiceShadow its not very easy to bind to a health or magic or stamina value can you please make a tutorial for binding your setpercent to a value of the third person im very lost i have my stamina drain the bar pops up but doesnt link to my stamina no matter what i seem to try
@@magegames6202 Try the approach I answered you in your first comment. Alternatively you can also call the SetPercent node at the place where your stamina variable is setted. So casting from there to your ui and further to your progress bar to directly change the percent.
How to bind the variable?
Hey, did you figure out how to bind this?
@@lawrence2598 When you create the larger widget that contains the Progress Bar widget, promote that to a variable. Let's name it 'Game Overlay Ref'. In the Game Overlay widget blueprint make a new function. Name it 'Update Progress Bar' and give it a float input. In that function, get the Progress Bar widget variable and drag off the "Set Percent" function that it contains and feed it the desired float value.
Now, all you have to do to update the widget, is use that "Game Overlay Ref" and drag off the "Update Progress Bar" function.
@@CT-td9mt I have tried your method multiple times but i cant seem to get it to work, im making a round progress bar that shows stamina. The stamina code is fine because i have set up a test progress bar. If you could list some possible issues or give me something to dm you on that would be greatly appreciated.
Hi, how can i bind my percent to existing value of my score?
im trying to get this to bind to my stamina if anyone answers this please tag me in a reply so i can see it too
@@magegames6202 I think I solved this. I was also doing a Stamina tutorial. You will update the Stamina using the Event Tick for the whole screen widget you have (mine is called StaminaWidget_BP.)
First, I added WB_RoundProgressTest widget to the widget canvas panel layout in the Designer view. (Similar to the video at the Outro chapter at 10:56.) Then in the Graph view, I now have WB_RoundProgressTest as a variable. Drag this variable into the graph and choose GetWB_RoundProgressTest (the only option). From the EventTick, I drag a line and choose "Set Percent". Connect the WB Progress Test to the Target pin. Now drag from Percent and choose the function GetProgressBarStaminaPercent to connect to the percent variable.
And that did it for me!
@@kikijewell2967 i will have to try it out thank you!!
Okay so how do I now set a binding to this? I can't find the button
Hi, please read a bit in comments and you should find a way
@@NiceShadow Yeah i found what you said but I couldn’t figure it out :( I know I was somewhat close to making it work but I just couldn’t. Only been working with unreal for a few days still learning!
The problem I'm having is that I can't change the material domain, it's locked to the surface. I can't change it to the user interface.
Create a new material and check if you can change the domain there. If not you probably have a problem with your engine and you should consider to verify your engine in the engine overview in the epic launcher
How do i make 0 to be full circle and a given value empty circle? P.S. I need to make a countdown timer
the node Map Range Clamped could be helpful :)
@@NiceShadow Thanks
@@e.Mihaii No problem
How can I add a texture to this material?
You can put a texture in the FinalColor in M_RoundProgressbar
I tried that as the first thing I thought of, but it doesn't work.
I only get a black screen.
I'd really appreciate if you could help me in constructing my idea, which is having a circle that contains a material that I can then have further modifications on it on runtime@@NiceShadow
What I want to do is have a circular shape in which the material gets drawn onto it.
Then I want to have the material be imposed on a portion of the circle I decide on.
Now the first step is I want to learn how I can impose a material over this dynamic circular shape, so then I can proceed with it further
Ohh, now I understand that I would need a rectangular texture haha, because I Was using one that didn't allow the circle to come through
I have 3 questions and I'm sorry they are, I'm a bit new but I learn fast and I would like to know about these three questions.
Here are 2, and if I wanted to add a background to show the missing health and a curvature like in Kingdom Hearts, how would it be?
and the third, how could you show the maximum capacity of life?, as seen in the Re4 Remake where you see a small line in life that indicates the maximum amount that can be obtained, I am not referring to the amount of life current max, if not full health thanks to yellow herbs, thanks in advance!
1. Create another material instance like in 5:55 but set in it the percent on 1 (or 0.75 related to the 2nd question) Then in the widget designer where you've added your progressbar, you can right click on this widget element and wrap it with an overlay, so you can put an image (where you select the material instance that you've just created) below the existing progressbar. Then you can tint the background progressbar black and reduce the Alpha.
2. I guess you mean that the radius shouldn't be 360°, it should be like 75% - in that case, in the SetPercent function, do not directly connect the Percent float with value of this SetScalarParameterValue node. put a lerp node in between. So the Percent from the starting node of the function would be connected with the Alpha pin of the lerp node, for A you're taking 0 and for B you would take 0.75 and then connect the result of that Lerp node with the SetScalarParameterValue node. And if you want to decide from where the progressbar should start to fill up you can easily do that in the transform settings if you select a widget element in the design tab - so adjusting the angle.
3. idk you probably would need put a third thinner progressbar in the overlay.
i dont have the percent option
you need to add the input pin like here 7:11
@@NiceShadow thanks i subbed btw
@@ScaryCarnage Thanks :)
3:07
whatever i do, the percentage will not update
this works but it doesn't seem to be bindable
You can run SetPercent on EventTick. To save performance you should create another float CurrentPercent. So that you only Update the material instance if the CurrentPercent != the input percent.
That would have the same result as binding and for sure no measurable difference to normal binding.
@@NiceShadow It doesn,'t work. I'm pulling my hair over this...
it's strange but yes...None seems to have managed to actually bind something like that and make it work...
It's no use if it can't be dynamic through variables :/
@@gaetanlancelle1173 If you are using a normal unreal progressbar and bind the percent with the same value where you're currently failing to bind it with this round progressbar. Does that work?
@@NiceShadow yes the issue is with the custom material thing. No one seems to have that working
@@NiceShadow a lot of tutorials on how to visually to it but unusable in an actual gameplay
bro what was the point in doing this if you cant bind it to anything
It does not work in 5.3. I wasted so much time on this.
It does work
No explanation of what you are doing, just a list of instructions. In a lot of ways, unless you want exactly this, it's a worthless video.
Ok, thank you for the feedback :)
It doesn't work, I can't set scalar parameter at all
Hi, Look for radial slider. It's native to UE 5.2> Don't know for the others versions ;)
@@steveunreal yeah, thanks, I have already used it