How to create Progress Bars in Unity

[@bausHuck]

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.

[@Anansipelli]

Absolute hero, I was about to go crazy

[@chimichangle]

This, Brackeys, and Mix n Jam are my Holy Trinity for Unity tutorials. Thank you for these high-quality videos!

[@GymCritical]

Chimi Changle heavy on the holy trinity

[@monigotegames1488]

rip brackeys

[@android272]

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!

[@DavidJones-tp7td]

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.

[@Im_The_Immortal_Snail]

4 years later and still helped me with a progress bar for my platformer thanks so much

[@bausHuck]

Great tutorials. I love the flexibility of your work. It really shows how larger projects should be handled.

[@andreiardelean9324]

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!

[@LesP56]

Fabulous! Gets right to the point without unimportant information and provides examples that are easy to understand.

[@Yトーマ]

This video is sooo easy to understand for a Unity beginner like me thanks to your great explanation! Thanks!

[@harshmudhar96]

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 :)

[@AQW9111]

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!

[@jacksquat5372]

Great tutorial! Well planned, presented and easy to follow along. Thanks for making this, I look forward to seeing more of your tutorials.

[@viniciusps01]

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!

[@ConcreteJungleGames]

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.

[@lordkakabel76]

Awesome tip, thank you! A 1x1 white pixel did it for me.

[@sanketvaria9734]

It doesn't work for me. It still get's stretched.

[@catlikeanimation8651]

thank you!!!!

[@janzaloudek4957]

You just saved my ass, thank you so much for this comment, I used a jpg from google and it works now

[@erian3507]

I had the same problem! Was hoping someone in the comments knew what to do

[@daichi_devs]

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!

[@shinnykatemerlynn5996]

Glad I ran into this channel. learned more than what I clicked here for. Subscribed!

[@aroldo1959]

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; }

[@_Simoose]

It took me way to long to find a decent answer to this question. Thanks for the video!

[@jensvoigt9963]

Excellent tutorial - everything included to implement great looking progress bars. Including the link to kenney, which I didnt know yet. Good work, many thanks!

[@GlowingGravity]

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! :)

[@fulgencejuniorlohore854]

Thanks for this nice tutorial! 2023 and still relevant!

[@JadenDragonX]

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

[@thepolygonpilgrimage]

Very well done! Clear, concise, and lot's of handy tricks. I'm subbed and looking forward to more! Thank you sir!

[@kerandonovan7255]

Your videos are very well explained and a pleasure to follow.

[@jorgealis3945]

You deserve more subs. I was looking for an alternative and this fits right in. Thank you!

[@djpersonalspace2406]

What a great video! Thanks a lot, keeps it simple but also takes it to the next level. Really enjoyed that.

[@AlexSprites]

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.

[@GameDevGuide]

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.

[@AlexSprites]

@@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!

[@GameDevGuide]

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.

[@Lelouchishere]

watch 2 videos and I subscribed, Your videos are just amazing, to the point, no bullshit, good content.

[@HadiLePanda]

Really love this type of tutorials, very modular! :)

[@sexypotato]

I just discovered your channel and subscribed!

[@trunghieu974]

This is one of the best unity youtube channels i have been subcribed! Why haven't this channel get 100.000 subcribed yet?

[@sullainvictus]

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?

[@GameDevGuide]

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!

[@sullainvictus]

@@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.

[@DynamicalisBlue]

@@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.

[@jumpkut]

Great, easy to follow tutorial with some hidden gems. Thumbs up!

[@andreashanna6060]

You earned a new subscriber! Thanks for this video :D

[@Rhino123freak]

Best tutorials on youtube, don't @ me.

[@ryolu4799]

YO I JUST FOUND U WHEN I NEED U THE MOST! WHY THANK YOU AUTO SUBSCRIBE AND BINGE WATCH WITH MY SCHOOL TEAM

[@visarbaci268]

amazing stuff, another sub. hope you keep them coming.

[@civilviking7121]

Quick and amazing, thanks!

[@ДмитрийШевцов-ю6ъ]

My fav channel now

[@Indiedude]

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?

[@hamyazilim]

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.

[@Shinobi31415926]

Very helpful tutorial! Thank you so much!!

[@Adroan98]

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

[@andylockhart257]

Love it! Need more tutorials

[@poppers7317]

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?

[@Darkry]

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]

with the slider the image is distorted when it reaches a certain point

[@Darkry]

@@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 :)

[@NotRealVoyduzzz]

Thank you so much! It looks so amazing!

[@fabianlo234]

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?

[@fabianlo234]

Super great tutorial man!

[@fabianlo234]

Thumbs up, but it is not enough...

[@lastidea4925]

Why you didnt use slider for exp bar ?

[@allanramos6855]

Awesome video, I've learned a lot from it! You really helped me

[@J_E_N_T]

Great video, just like all of your others!

[@Chronomatrix]

This is fantastic, thank you very much!

[@danielmarton4388]

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?

[@ShaneSalisbury]

How do you make a progress bar with an image at the end like shown at 2 seconds in the video with the bird?

[@DJLKM1]

You really should have far more subs. More tuts please :)

[@SanyaBane]

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)

[@RandomHandle837]

Fill it with a transparent color

[@richardpeter-szabo7893]

@@RandomHandle837 It will then show up the progressbar color behind it.

[@paranormalgamesstudios]

Thanks this video helped me solve my own similar problem

[@RiksevStreams]

Incredible! It's nice experience ;) Thank you!

[@keelanbowker-obrien2222]

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.

[@keelanbowker-obrien2222]

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.

[@MysticThistle]

@@keelanbowker-obrien2222 pm me your code

[@lenartbence]

@@keelanbowker-obrien2222 I had a similar issue, I assigned a fully transparent color so it became invisible. Hope it helps you out.

[@gabrielepeloso8593]

I had the same issue. Check the color you assign from unity has alpha = 1.

[@Tymon0000]

Very good tutorial, thanks!

[@ChuckiBinner]

hey, thanks, great tutorial! Is there also a way to make the progress bar fill with a moving/stretched image with a rounded tip ?

[@igorabdoaguilar9331]

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!

[@j55intelphil]

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?

[@fariahuq6473]

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?

[@luameduardo9611]

Thank you very much, subscribed

[@BaziJo]

thank you for this video plz make more video like this

[@kenrogoway7234]

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?

[@F3L0]

5TH VIDEO I AM WATCHING, TIME TO SUBSCRIBE !!!!!!!

[@GameAndJokes]

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

[@angeldevops532]

great tutorial thanks

[@freakymundo]

What if we don't want to use a Canvas (image) and want to just use a Sprite Renderer?

[@vrfarmer2905]

Could you do a video about how to make a level system?

[@johnx140]

Youre amazing man. Subbed.

[@JonathanbmillerZIG]

You the best, bro.

[@vincentproud6589]

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? :)

[@shaded8476]

Can we use slider for the progress bar

[@PreslavKolev]

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!

[@PeterMilko]

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);

[@cruzchaps3662]

This is the good stuff

[@moysser]

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.

[@manishotaval8316]

Solid Tutorial !!

[@tyleranders9972]

Great video!

[@MilanObrtlik]

You are the best. Sorry Brackeys.

[@chronoabi]

It says the object you want to instantiate is null how to fix it

[@android272]

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); }

[@ЕвгенийОдноворов]

It`s GREATE, thank you

[@brunogattai9262]

Wow, thanks a lot.

[@pawegorka8589]

1:40 he start about progress bar actually

[@noicenoise8718]

Awesomeness

[@Endoo95]

:o You are genius!

[@aissadaoud-ot1qd]

thannnnnnnnnnnnnnkkkkkkkkkkks💓💓💓💓💓💓

[@НикитаЗеленцов-б1й]

awesome! thx u

[@457Deniz457]

Hey there and thank ! :) Do you upload some stuff to GitHub ?

[@idle.observer]

Did I missed the reason why you don't use Slider?

[@khaelus_dev]

👑

[@His-Games]

have my subsciption

[@mariosmichael5116]

💙💙💙💙💙

[@Akhil-r6d]

GAZAB

[@newruler8417]

thank

[@thedude4039]

For me, there's no image type.