How to create Progress Bars in Unity

whether it's a loading screen a health bar stats or a countdown timer progress bars are an absolutely crucial part of game design a progress bar is an incredibly quick way to show information to your player at a glance and it's much easier and faster than making the player read a big list of numbers hi there I'm Matt and welcome to game dev guide in this video we're going to take a look at building a progress bar system for your game we're going to use unities UI to build a dynamic progress bar and write the code we need to make it function and update in the editor we're also going to look at building a radial progress bar for even more flexibility and how we can use the create menu to easily add our progress bars into our games UI with just a few clicks so why don't we get started so here's a demo i've prepared as you can see it's just a basic character menu screen we've got some stats up here at the top such as the character's name their level and experience points underneath that we've got a few skill names and their current experience for that skill the assets I'm using here are from Kenny as well as some from the asset store I found them super useful for building up a quick UI menu like this so looking at this menu it's quite nice but I think we could really spruce it up a bit with some progress bars up here we can see there's a perfect spot for a progress bar so the player can easily visualize how far they are to the next level I've also got icons here for these skills so I think it would be really cool if we could add a circular progress bar that fills up around the center of the icons to demonstrate their skill level I think that'll really add some style to the menu and differentiate a bit from standard bars this means that we're going to need to design two different progress bars but we're actually going to just use one single script to handle the whole thing so let's get started the first thing we're going to want to do is design our experience bar for Philip the brave let's go over here to our header and choose UI image let's just put it in place here something like that this is going to be the background for our box let's pick a nice backdrop for it I'm going to use this image because I quite like how it has these nice little border lines and this will fit nicely as a border for our fill so as this will be our parent component let's go up here and name this progress bar next we'll add another image as a child to this bar and if we go over here and hold alt down on our keyboard we can tell this image to fill to its parent size like so now there's actually a number of different ways we could create the progress bar effect for instance we could go over here and change the pivot or scale of the bar based on how full we want it to be and while this is OK for a linear bar it's not as flexible for a radial option and means we have to do more work so instead we're actually going to use the fill type in our image component first we'll need to select an image for our bar I quite like the shading on this one here so let's use that one as you can see it defaults to a scale 9 tiled texture which is exactly what we want we get these nice curved edges here for our bar but we want the functionality of the fill feature from the image component the only problem is that when we go in and we change to filled we end up with this stretchy blurry janky lookin mess there is a solution though thanks to the mask component let's duplicate this and make it a child here we'll name this layer fill and let's set this back to sliced let's name the parent mask let's change the fill method to horizontal and add a mask component we'll turn off the show mask graphic so we can see behind it and change the fill amount now you can see we keep up our image nice and sliced but we take advantage of the images fill feature too to wipe across our background using the mask above so that's the visuals ready let's write some code let's select our main game object and create a new script called progress bar at the top here we'll add a public int called maximum and another one called current will also add the UI namespace and declare a public image called mask then below our update method will write a method could get current fill and will use this to determine the fill amount so we'll calculate the fill percentage by simply dividing the current value by the maximum value float fill amounts equals floats current divided by float maximum will then assign that to the fill amount of our mask then we'll add this to our update method and let's also add the execute in edit mode attribute so we can see it in the inspector now if we head back into unity I'll just set the fill to a nicer color to see if we assign our mask and some values so maximum of 100 we can see that if we drag our current value our progress bar updates accordingly so we have a nice and functional progress bar that's great but if you know anything about this channel you know I like to take things a little bit further than functional and I'm a fan of making tools that are flexible so let's make this bar a little bit more flexible shall we a lot of progress bars like this have some kind of threshold calculation let's suppose we hit our current threshold of a hundred if we were then to increase our maximum threshold a progress bar would need to be reset to zero in order to look correct and we'd have to do that every time we leveled up which is an ideal instead it would be great if our previous levels XP could be considered in this so we can do this by adding a minimum offset to our bar back in visual studio let's create a new public int called minimum and let's change our film method to take this into account so let's create a float called current offset which will subtract the minimum from our current value and a float called maximum offset where we will subtract the minimum from the maximum value and then let's use these values to calculate our philemon instead now if we go back into unity and set our minimum to 100 a maximum to 150 and our current - 1 to 5 a bar is now half full which makes it much more flexible something that I think would also be really useful is being able to change the color of the bar easily so let's add a reference to our fill image in our script and also a color property and then let's set the fill color to the bar color and let's assign that and now we can easily choose a color for our bar lovely ok I think I'm happy with that now let's save this as a prefab so we can easily reuse it what we'll do is create a new folder called resources and a folder inside there called UI and then let's drop this in there and call it linear progress bar I'd like to add progress bars to the health manner and stamina segments here but instead of just duplicating it from the hierarchy or dragging it from our project window it would be great if we could just right click here and add it so let's go into our progress bar script firstly let's add a define directive for the unity editor then let's create a new public static method called add linear progress bar and let's also wrap this in the define directive let's add a menu item attribute and let's define a path for it in the game object menu game object UI / linear progress bar should do in here will instantiate the linear progress bar and load it from the UI folder we created in the resources folder then let's add it to the transform of our currently selected game object in the hierarchy by typing selection to active game object dot transform and we'll set the world position to false now if we head back to unity we go to our stats choose health down to you I click on any a progress bar a new progress bar is added now all that's left is to make the radio buzz the good news is it's super easy to make a radial bar now that all of this is set up now let's go to our one-handed scale over here and create a new image will add our gray circle here and put it in place this will be the background for our bar now let's duplicate it three times one for the mask and once again for the fill and then let's parent them to one another however this time the middle one is actually going to be our fill and the child here is going to be our mask and I will just set these to anchor and let's just indent this by about 20 the fill will indent by about five I'll also swap the image just for a plain circle here and let's set the color to yellow for now so we can see it better and of course set the type to filled and the fill origin to the top you could possibly have the mask switched off depending on how you want your radio bar to function maybe it would look better off if it's for a timer but I quite like this little overlay as I think it looks better for tracking skill experience now let's name our bar and add our progress bar script and hook everything up and voila like that a super easy and flexible radial progress bar again we can also save this one as a prefab and add it to our menu for further ease of access and there we have it with a single script we've managed to create - progress bars by taking advantage of the fill feature in the image component I'm sure there's a lot more you can do with it or different styles of bars you could create you could perhaps change the color of the bar based on its fill amounts or combine various masks to create interesting shapes regardless I hope you've enjoyed this video and if you have I'd love for you to give it a like and leave a comment below I've really enjoyed hearing all your feedback so far and many of you seem super passionate so I'm thrilled to announce that I've set up a discord channel which you're welcome to join and chat about gamedev with me as well as share ideas about potential future videos and hear what I'm currently working on so follow the link below if you're interested in that if you're new to the channel and would like to see more game dev tips tricks and tutorials like this be sure to subscribe either using the button or the link on screen and you'll be able to see when a new video from me goes live also feel free to check out some of the other videos from the channel as always thank you very much for watching and I'll see you again next time

Channel: Game Dev Guide

Views: 115,068

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games, radial, progress bar, loading bar, bar, unity ui, ui, interface, imgui, experience bar, progress, rpg menu, stats menu, progress bar tutorial, how to use unity ui

Id: J1ng1zA3-Pk

Length: 12min 0sec (720 seconds)

Published: Mon Jun 03 2019

Reddit Comments

[u/Nielscorn]

This is great! Will be following later today!

[u/_dodged]

Very cool, thanks for posting!

[u/ZedIvanHeart]

I was expecting the inner most circle for the radial bars to be transparent. Could you do that with the mask in this setup or something else?