Oh my goodness, thank you so much for this video! I was looking for a video on how to make a radial progress bar, remembered I also need a linear progress bar as well. Not only that I have been wanting to learn how to make my own components I can easily create with the Create Asset Menu > UI or where ever. I was not expecting you to take it all the way to that level. Amazing video!
Great tutorial. Easy to follow. Easy to start using straight away. This channel is in my Top 5 for Unity tutorials. Few things about this Progress Bar that might trip up some beginners like myself. At 10:30 , the Fill Image is used for both Mask and Fill slots. Took me a few seconds to see that. It is not exactly like the Linear Bar. I turned the Original Radial Bar into 2 separate bars, Ring and Radial (without the mask). This seemed to make more sense to avoid having an extra UI element always being added. To get a real Ring Progress Bar without the inner mask image, you will need a proper Ring image. Then at this point you do not need the mask element for this bar as well. I tried putting the prefab into a Prefab folder but it did not work, it must go into Resource/UI folders. Not 100% sure about this one, but it might not be the best to keep the GetCurrentFill in the Update. This is good for constantly updating things like a timer but not so much for health and experience bars that usually update once and wont need to be updated until the next change.
Your tutorial was really helpful! I was looking for an exact tutorial on LEVEL THRESHOLDS!! It's insane how accurate your tutorial is for my RPG game. Thank you!
Hey Matt, thanks a lot for this tutorial. You have a really straightforward approach that covers what is really important in a fast way. I would say that I'm kind of a fan of your great work!
admittedly some of the things you did went right over my head, but this was amazing. You achieved it with just a few lines of codes what another youtuber did in about 20+ lines. Cheers!
your videos are really freaking great! thank you so much for all your uploads and I hope you keep them up, I'm learning so much on how to actually develop systems and making them efficient as well
Ah you're so welcome. Yeah, I try to tie in lots of small extras into these guides for people who might already know how to do things. There's ideally little bits of useful info for any skill level! Glad you're enjoying it.
@@GameDevGuide Most definitely! Greatly love that you also go the extra mile and emphasize re usability and flexibility. Great job, I'm looking forward to your future content!
Yeah, well I'm teaching stuff based off of my own experience trying to develop games. I think there's often a disparity between how the engine thinks you should do something (and what many tutorials show you) verses what's actually a "production friendly" approach to doing something. So, as someone who is working on production tools and systems, I tend to focus on the latter.
This was an awesome tutorial compared to most so far! Thank you a lot! I was even hoping to get into scripting the bars at the end so will follow and hoping for more content! :)
amazing video! it really helps for people like me who just got into scripting and coding alot to learn still Haha. but that saves me alot of time thanks alot
Excellent tutorial - everything included to implement great looking progress bars. Including the link to kenney, which I didnt know yet. Good work, many thanks!
Just a small addition for any comment readers. Prefer PrefabUtility.InstantiatePrefab() to Instantiate as it automatically creates the Prefab Link for you (notice how his instantiated Linear Progress Bar is a clone and not a prefab instance). Of course, if your goal is to have modular components like the normal Unity UI, cloning is better :)
3:15 I followed the tutorial and kept getting Stretchy Blurry Janky Looking Messes... Applying a square-cornered sprite to the mask fixed the mask from cutting in over the fill, I hope this helps anyone else that went through this.
Nice Tutorial. Since the Fill Amount is at a different images depending on the Progress Bar type (Linear and Radial), in order to make both Progress Bars work with the same Progress Bar Script I did the following: Add two Tags ; Radial and Linear and assign them to each respective Prefab . change the GetCurrentFill to check for each tag. void GetCurrentFill() { float currentOffset = current - minimum; float maximumOffset = maximum - minimum; float fillAmount = currentOffset / maximumOffset; if (gameObject.CompareTag("Linear")) { // Check if it is Linear or Radial Progress Bar mask.fillAmount = fillAmount; Debug.Log("Linear"); } else if(gameObject.CompareTag("Radial")) { // Radial fill.fillAmount = fillAmount; Debug.Log("Radial"); } fill.color = color; }
Very nice video. I'm not particularly adept with unity or programming in general, but is it a good idea to have this all taking place in the Update() method? I don't know how much overhead that is, maybe it's not much, but it seems like it would be better to update it only when something changes, like you receive new xp from something. Maybe using delegates or something like that?
Hey, Jeremy great question! So, putting it in Update was just easiest for the purposes of teaching this topic and being able to preview it easily in Edit mode, and while it shouldn't be a huge problem in the Update method, there's definitely AN overhead of updating the variables every frame. If you're wanting to do this in a more permanent way, some kind of delegate system or callback is definitely recommended. I've actually got a video on building an event system here on the channel which goes over how to approach something like that. Thanks for watching!
@@GameDevGuide thanks. I actually watched that video and enjoyed it. And yeah I assume this kind of task isnt much strain, but perhaps if somebody made a habit of always doing things in the Update() method it could become an issue down the road, in a complex game.
@@sullainvictus For something this simple, I just used properties that will call the methods to update it. I moved the stuff in the Update() method to OnGUI() and added the if UNITY_EDITOR expression. This way you can still mess around in Edit mode but the overhead will be gone in the actual build.
Perfect. But i have a problem. When i want to add to my script "fill" and "color" fields and set it from unity editor it throws null pointer. I don't know why it throws that exception. I tried to get it with GetComponent it isn't throws null pointer exception but it doesn't set color again.
I think that a very easy way of making progress bars is using Sliders... it is prectically the same as shown in this video, but you have everything already set up and you don't need to write a code that contains maximum and current values, since Sliders have this already implemented as Slider.value and Slider.maxValue. They also have Rect Transform if you ever need it for each component and since you are using UnityEngine.UI for images, it is better to just use Slider instead. Hope somone will find this useful :) (If you don't want any component in your slider, just remove it... no problem. I use sliders often and just remove the Handle object and mark slider as "non interactable"...)
@@angeldevops532 this depends on the settings for the image. If you click the image in the file editor, a panel should show up with the settings. You can set up resolution and scaling there. There should be an option to set colours to 16RGBA and very close to that an option to set "Point" or something like that. When you do that, it should be much crispier and it shouldn't get distorted too much. And the same applies to sliders like these... If the scale is off, it will get distorted as well. UI sliders just have higher resolution. Everything can be handled :)
So let's say We want to make a radial bar as a tool for the user. Similar to a knob on a control board. Can I shift the starting point in which it begins to fill from 12 o'clock to 7 o'clock? And let's say that the 100% filled would be at 5 O'clock. Any ideas? I just started learning UNITY. Love your videos!
7:16 but that sets the color for every Update. I wouldn't fill my game with who knows how many useless calls every second. That stuff can add up. Is it necessary to change the color in game? Wouldn't it be better to put this in the Start method?
Thanks a lot, very useful video. However video thumbnail shows us that inner circle inside RadialPB is invisible (unless its just filled with same color as background). Is it possible to mask inner circle such way that i could see background? (you can imagine there is picture in background, or part of camera render - i mean it cannot be just filled with solid color in this case)
Great tutorial! One question: when I use the custom menu item to create the progress bar, the created object in the hierarchy seems to be unpacked from the progress bar prefab (it appears with black name rather the blue), and when I edit the prefab the changes aren't reflected in the object in my scene. Is there any way to have the menu item instantiate a GO that's still linked to the prefab?
For some reason I can get this to work up until the last bit where I add... public Image fill; public Color color; once I assign the fill image, it stops playing nice.
Even weirder, I can't seem to get the fill behavior to work unless I assign my "fill" object an image type of filled, parented to "Mask" with an image type of sliced.
Hi, Is it possible to add a 'wholenumber' option like default unity slider? So that We can enforce dragging only to fixed set of positions over the radial slider?
Does the radial progress bar work with Unity 2019.4.0f1? It doesn't seem to work for me. Also, why does the video show that the FILL image is used in the Inspector for both the Fill and Mask properties of the ProgressBar script?
I added properties for Minimum, Maximum , and current and an OnValidate method to validate these fields. With the code below Minimum can not be greater than Maximum, Maximum can not be less than Minimum, and Current is clamped between these two values. The properties ensures that you can't set these fields to invalid values in code while the OnValidate method ensures that you can't set invalid values in the inspector. public int Minimum { get => minimum; set { minimum = (int) Mathf.Min(value, Maximum); } } public int Maximum { get => maximum; set { maximum = (int) Mathf.Max(Minimum, value); } } public int Current { get => current; set { current = (int) Mathf.Clamp(value, Minimum, Maximum); } } private void OnValidate() { minimum = (int) Mathf.Min(minimum, maximum); maximum = (int) Mathf.Max(minimum, maximum); current = (int) Mathf.Clamp(current, minimum, maximum); }
So, I know this is 3 years old, but great video! I'm having a slight issue, though, importing any sprite for the bars get seriously deformed towards the ends when I stretch them. For instance, if I try to use a square sprite with an outline as you have here, the left and right parts of the outline become extremely thick. Any idea what I can do to fix this? :)
Hey i need You Help man i m making a game in which the camera follows the player but the problem is that when the camera hits or collides with a building or something the object is no longer being seen but i want the player to be seen and the obj to dissapear.Thanks Man love your videos
can you make a bar the get fill when you click a button ? and goes down when you are not clicking ? the faster you click the faster it goes up and when you dont click it goes down fast too.... so it gonna be a challenge clicker microgame.
You can change a UI size with ChargeBar.sizeDelta.x to very quickly make a bar. progressBar.sizeDelta = new Vector2(originalWidth * progress, progressBar.sizeDelta.y);
4 years later and still helped me with a progress bar for my platformer thanks so much
This, Brackeys, and Mix n Jam are my Holy Trinity for Unity tutorials. Thank you for these high-quality videos!
Chimi Changle heavy on the holy trinity
rip brackeys
Hey thanks a lot. That was actually really easy to follow and execute. Good video, great pacing. I don't think "thumbs up" is quite enough.
Oh my goodness, thank you so much for this video! I was looking for a video on how to make a radial progress bar, remembered I also need a linear progress bar as well. Not only that I have been wanting to learn how to make my own components I can easily create with the Create Asset Menu > UI or where ever. I was not expecting you to take it all the way to that level. Amazing video!
Great tutorial. Easy to follow. Easy to start using straight away. This channel is in my Top 5 for Unity tutorials.
Few things about this Progress Bar that might trip up some beginners like myself.
At 10:30 , the Fill Image is used for both Mask and Fill slots. Took me a few seconds to see that. It is not exactly like the Linear Bar.
I turned the Original Radial Bar into 2 separate bars, Ring and Radial (without the mask). This seemed to make more sense to avoid having an extra UI element always being added.
To get a real Ring Progress Bar without the inner mask image, you will need a proper Ring image. Then at this point you do not need the mask element for this bar as well.
I tried putting the prefab into a Prefab folder but it did not work, it must go into Resource/UI folders.
Not 100% sure about this one, but it might not be the best to keep the GetCurrentFill in the Update. This is good for constantly updating things like a timer but not so much for health and experience bars that usually update once and wont need to be updated until the next change.
Absolute hero, I was about to go crazy
Fabulous! Gets right to the point without unimportant information and provides examples that are easy to understand.
Great tutorials. I love the flexibility of your work. It really shows how larger projects should be handled.
How can you not have more than 10k views? jeez christ so so so good videos! keep it going and you will grow! you will be big! a lot bigger!
Your tutorial was really helpful! I was looking for an exact tutorial on LEVEL THRESHOLDS!! It's insane how accurate your tutorial is for my RPG game. Thank you!
This video is sooo easy to understand for a Unity beginner like me thanks to your great explanation! Thanks!
It took me way to long to find a decent answer to this question. Thanks for the video!
Thanks for this nice tutorial! 2023 and still relevant!
Hey Matt, thanks a lot for this tutorial. You have a really straightforward approach that covers what is really important in a fast way. I would say that I'm kind of a fan of your great work!
Very well done! Clear, concise, and lot's of handy tricks. I'm subbed and looking forward to more! Thank you sir!
Great tutorial! Well planned, presented and easy to follow along. Thanks for making this, I look forward to seeing more of your tutorials.
Glad I ran into this channel. learned more than what I clicked here for. Subscribed!
admittedly some of the things you did went right over my head, but this was amazing. You achieved it with just a few lines of codes what another youtuber did in about 20+ lines. Cheers!
Great, easy to follow tutorial with some hidden gems. Thumbs up!
your videos are really freaking great! thank you so much for all your uploads and I hope you keep them up, I'm learning so much on how to actually develop systems and making them efficient as well
Thank you loads. I've been making games for 3 years now and your videos are showing me all the little tips and tricks I've never known of.
Ah you're so welcome. Yeah, I try to tie in lots of small extras into these guides for people who might already know how to do things. There's ideally little bits of useful info for any skill level! Glad you're enjoying it.
@@GameDevGuide Most definitely! Greatly love that you also go the extra mile and emphasize re usability and flexibility. Great job, I'm looking forward to your future content!
Yeah, well I'm teaching stuff based off of my own experience trying to develop games.
I think there's often a disparity between how the engine thinks you should do something (and what many tutorials show you) verses what's actually a "production friendly" approach to doing something.
So, as someone who is working on production tools and systems, I tend to focus on the latter.
This was an awesome tutorial compared to most so far! Thank you a lot! I was even hoping to get into scripting the bars at the end so will follow and hoping for more content! :)
What a great video! Thanks a lot, keeps it simple but also takes it to the next level. Really enjoyed that.
amazing video! it really helps for people like me who just got into scripting and coding alot to learn still Haha.
but that saves me alot of time thanks alot
Your videos are very well explained and a pleasure to follow.
Excellent tutorial - everything included to implement great looking progress bars. Including the link to kenney, which I didnt know yet. Good work, many thanks!
watch 2 videos and I subscribed, Your videos are just amazing, to the point, no bullshit, good content.
You deserve more subs. I was looking for an alternative and this fits right in. Thank you!
You earned a new subscriber!
Thanks for this video :D
This is one of the best unity youtube channels i have been subcribed!
Why haven't this channel get 100.000 subcribed yet?
Just a small addition for any comment readers. Prefer PrefabUtility.InstantiatePrefab() to Instantiate as it automatically creates the Prefab Link for you (notice how his instantiated Linear Progress Bar is a clone and not a prefab instance).
Of course, if your goal is to have modular components like the normal Unity UI, cloning is better :)
I just discovered your channel and subscribed!
Really love this type of tutorials, very modular! :)
YO I JUST FOUND U WHEN I NEED U THE MOST! WHY THANK YOU AUTO SUBSCRIBE AND BINGE WATCH WITH MY SCHOOL TEAM
3:15 I followed the tutorial and kept getting Stretchy Blurry Janky Looking Messes...
Applying a square-cornered sprite to the mask fixed the mask from cutting in over the fill, I hope this helps anyone else that went through this.
Awesome tip, thank you! A 1x1 white pixel did it for me.
It doesn't work for me. It still get's stretched.
thank you!!!!
You just saved my ass, thank you so much for this comment, I used a jpg from google and it works now
I had the same problem! Was hoping someone in the comments knew what to do
amazing stuff, another sub. hope you keep them coming.
Nice Tutorial.
Since the Fill Amount is at a different images depending on the Progress Bar type (Linear and Radial), in order to make both Progress Bars work with the same Progress Bar Script I did the following:
Add two Tags ; Radial and Linear and assign them to each respective Prefab .
change the GetCurrentFill to check for each tag.
void GetCurrentFill()
{
float currentOffset = current - minimum;
float maximumOffset = maximum - minimum;
float fillAmount = currentOffset / maximumOffset;
if (gameObject.CompareTag("Linear")) { // Check if it is Linear or Radial Progress Bar
mask.fillAmount = fillAmount;
Debug.Log("Linear");
} else if(gameObject.CompareTag("Radial")) {
// Radial
fill.fillAmount = fillAmount;
Debug.Log("Radial");
}
fill.color = color;
}
Thanks this video helped me solve my own similar problem
My fav channel now
Best tutorials on youtube, don't @ me.
Thank you so much! It looks so amazing!
Great video, just like all of your others!
Quick and amazing, thanks!
Awesome video, I've learned a lot from it! You really helped me
You really should have far more subs. More tuts please :)
Very helpful tutorial! Thank you so much!!
This is fantastic, thank you very much!
Love it! Need more tutorials
Incredible! It's nice experience ;) Thank you!
Thanks! Keep up the good work! I am a begginer, and this was great but... I can I ask you a question? What is the mask for?
Super great tutorial man!
Thumbs up, but it is not enough...
Very good tutorial, thanks!
Very nice video. I'm not particularly adept with unity or programming in general, but is it a good idea to have this all taking place in the Update() method? I don't know how much overhead that is, maybe it's not much, but it seems like it would be better to update it only when something changes, like you receive new xp from something. Maybe using delegates or something like that?
Hey, Jeremy great question!
So, putting it in Update was just easiest for the purposes of teaching this topic and being able to preview it easily in Edit mode, and while it shouldn't be a huge problem in the Update method, there's definitely AN overhead of updating the variables every frame.
If you're wanting to do this in a more permanent way, some kind of delegate system or callback is definitely recommended. I've actually got a video on building an event system here on the channel which goes over how to approach something like that.
Thanks for watching!
@@GameDevGuide thanks. I actually watched that video and enjoyed it.
And yeah I assume this kind of task isnt much strain, but perhaps if somebody made a habit of always doing things in the Update() method it could become an issue down the road, in a complex game.
@@sullainvictus For something this simple, I just used properties that will call the methods to update it. I moved the stuff in the Update() method to OnGUI() and added the if UNITY_EDITOR expression. This way you can still mess around in Edit mode but the overhead will be gone in the actual build.
Nice tutorial! I just have one question. How to make radial progress bar progress shown by rotation degree? Are there some tricks in script file?
5TH VIDEO I AM WATCHING, TIME TO SUBSCRIBE !!!!!!!
thank you for this video plz make more video like this
Thank you very much, subscribed
Perfect. But i have a problem. When i want to add to my script "fill" and "color" fields and set it from unity editor it throws null pointer. I don't know why it throws that exception. I tried to get it with GetComponent it isn't throws null pointer exception but it doesn't set color again.
You the best, bro.
great tutorial thanks
This is the good stuff
I think that a very easy way of making progress bars is using Sliders... it is prectically the same as shown in this video, but you have everything already set up and you don't need to write a code that contains maximum and current values, since Sliders have this already implemented as Slider.value and Slider.maxValue. They also have Rect Transform if you ever need it for each component and since you are using UnityEngine.UI for images, it is better to just use Slider instead.
Hope somone will find this useful :)
(If you don't want any component in your slider, just remove it... no problem. I use sliders often and just remove the Handle object and mark slider as "non interactable"...)
with the slider the image is distorted when it reaches a certain point
@@angeldevops532 this depends on the settings for the image.
If you click the image in the file editor, a panel should show up with the settings. You can set up resolution and scaling there. There should be an option to set colours to 16RGBA and very close to that an option to set "Point" or something like that.
When you do that, it should be much crispier and it shouldn't get distorted too much.
And the same applies to sliders like these... If the scale is off, it will get distorted as well. UI sliders just have higher resolution.
Everything can be handled :)
Youre amazing man. Subbed.
hey, thanks, great tutorial! Is there also a way to make the progress bar fill with a moving/stretched image with a rounded tip ?
So let's say We want to make a radial bar as a tool for the user. Similar to a knob on a control board. Can I shift the starting point in which it begins to fill from 12 o'clock to 7 o'clock? And let's say that the 100% filled would be at 5 O'clock. Any ideas? I just started learning UNITY. Love your videos!
7:16 but that sets the color for every Update. I wouldn't fill my game with who knows how many useless calls every second. That stuff can add up.
Is it necessary to change the color in game? Wouldn't it be better to put this in the Start method?
You are the best. Sorry Brackeys.
Hello,
It's a great and very helpful tutorial, but I have a question.
How can I make a progress bar wich is just a segment of a full circle?
How do you make a progress bar with an image at the end like shown at 2 seconds in the video with the bird?
Thanks a lot, very useful video.
However video thumbnail shows us that inner circle inside RadialPB is invisible (unless its just filled with same color as background).
Is it possible to mask inner circle such way that i could see background? (you can imagine there is picture in background, or part of camera render - i mean it cannot be just filled with solid color in this case)
Fill it with a transparent color
@@RandomHandle837 It will then show up the progressbar color behind it.
Great video!
It`s GREATE, thank you
Great tutorial! One question: when I use the custom menu item to create the progress bar, the created object in the hierarchy seems to be unpacked from the progress bar prefab (it appears with black name rather the blue), and when I edit the prefab the changes aren't reflected in the object in my scene. Is there any way to have the menu item instantiate a GO that's still linked to the prefab?
Why you didnt use slider for exp bar ?
Solid Tutorial !!
I like the tutorial, but i don't understand why you put a minimum & maximum offset.. any way to ask you why ?
Could you do a video about how to make a level system?
For some reason I can get this to work up until the last bit where I add...
public Image fill;
public Color color;
once I assign the fill image, it stops playing nice.
Even weirder, I can't seem to get the fill behavior to work unless I assign my "fill" object an image type of filled, parented to "Mask" with an image type of sliced.
@@keelanbowker-obrien2222 pm me your code
@@keelanbowker-obrien2222 I had a similar issue, I assigned a fully transparent color so it became invisible. Hope it helps you out.
I had the same issue. Check the color you assign from unity has alpha = 1.
Hi, Is it possible to add a 'wholenumber' option like default unity slider? So that We can enforce dragging only to fixed set of positions over the radial slider?
Does the radial progress bar work with Unity 2019.4.0f1? It doesn't seem to work for me. Also, why does the video show that the FILL image is used in the Inspector for both the Fill and Mask properties of the ProgressBar script?
I added properties for Minimum, Maximum , and current and an OnValidate method to validate these fields. With the code below Minimum can not be greater than Maximum, Maximum can not be less than Minimum, and Current is clamped between these two values. The properties ensures that you can't set these fields to invalid values in code while the OnValidate method ensures that you can't set invalid values in the inspector.
public int Minimum {
get => minimum;
set {
minimum = (int) Mathf.Min(value, Maximum);
}
}
public int Maximum {
get => maximum;
set {
maximum = (int) Mathf.Max(Minimum, value);
}
}
public int Current {
get => current;
set {
current = (int) Mathf.Clamp(value, Minimum, Maximum);
}
}
private void OnValidate() {
minimum = (int) Mathf.Min(minimum, maximum);
maximum = (int) Mathf.Max(minimum, maximum);
current = (int) Mathf.Clamp(current, minimum, maximum);
}
What if we don't want to use a Canvas (image) and want to just use a Sprite Renderer?
thannnnnnnnnnnnnnkkkkkkkkkkks💓💓💓💓💓💓
So, I know this is 3 years old, but great video!
I'm having a slight issue, though, importing any sprite for the bars get seriously deformed towards the ends when I stretch them. For instance, if I try to use a square sprite with an outline as you have here, the left and right parts of the outline become extremely thick. Any idea what I can do to fix this? :)
Wow, thanks a lot.
I have a problem. When I use the ProgressBar script on the RadialBar it just won't work. It don't want to change the current value. Please help!
Awesomeness
Hey i need You Help man i m making a game in which the camera follows the player but the problem is that when the camera hits or collides with a building or something the object is no longer being seen but i want the player to be seen and the obj to dissapear.Thanks Man love your videos
Can we use slider for the progress bar
It says the object you want to instantiate is null how to fix it
:o
You are genius!
can you make a bar the get fill when you click a button ? and goes down when you are not clicking ? the faster you click the faster it goes up and when you dont click it goes down fast too.... so it gonna be a challenge clicker microgame.
awesome! thx u
👑
1:40 he start about progress bar actually
thank
Did I missed the reason why you don't use Slider?
You can change a UI size with ChargeBar.sizeDelta.x to very quickly make a bar. progressBar.sizeDelta = new Vector2(originalWidth * progress, progressBar.sizeDelta.y);
have my subsciption
Hey there and thank ! :)
Do you upload some stuff to GitHub ?
You sound like George Clarkey if he spoke normally O.O
GAZAB