Progress-Reporting C# Progress Bars on a Canvas (With Updating Text!) | Unity Tutorial

hey chris here from mom academy here to help you yes you make your game dev dreams become a reality progress bars are very prevalent in video games i don't know if there's something with just trying to make there seem like there's player progression or what the deal is they're just everywhere you can have progress bars for health you can have them for displaying how much time is left or the progress through around you can have them to show the stats of a gun maybe one gun has particularly high damage so you have a progress bar that's almost full for those of you looking for the really quick answer on how to do this you don't need the full explanation all we're going to do is take an image component on the ui canvas we're going to set it to type filled and then we're going to adjust the progress of that image to make it fill the progress bar you can of course do this with radial progress bars or with linear progress bars or any other type of fill boat that's available on the image and then you can play with your sprites and your borders to get different effects before we go any further i want to give a huge shout out to all my patreon supporters every one of you is helping this channel grow reach more people and add value to more people if you want to join this esteemed lot you can go to patreon.com academy choose which support tier you're most comfortable with and start getting some of the cool perks like getting your name up here on this section and getting a voice shadow starting at the awesome supporter level speaking of those awesome supporters i have raphael andrew bowen gerald anderson and autumn k i'm so grateful for your support thank you in this scene i have a background image and three progress bars they don't do anything yet but let's look at how they're structured because that's really important on this top one i have a simple square sprite with a image type of filled from a fill method horizontal fill origin left you'll notice that the border is a child of this one because i want the border to render on top of that progress image if i have it render the other way then the progress image kind of overlaps the border and it doesn't look right for the circle one we have it a little bit different the root object is actually the border in this case and the child object is the fill amount that's because on this one i want the fill amount to go on top of the border and this one we'll see is a filled radial 360 from the top image the last one is very similar to the top one except we have a border that goes all the way around instead of just on the sides the root image here is the progress fill because again we want to be underneath that border the border image in this case is a simple square and we've nine sliced the image with a sprite editor and you'll notice i have one pixel extra here if you put these guidelines exactly where the color stops it doesn't look right it kind of scales the image improperly and you get this fade kind of effect that is not what i'm looking for so that's why i'm leaving this extra pixel space here let's go ahead and open up visual studio and start writing our progress bar we'll start as usual with creating a bunch of private serialized fields we'll start with a private image that comes from the unity engine.ui namespace we'll call it progress image that's going to be the image that we're going to animate for our progress bar we'll do a float default speed set to 1f by default that'll be how fast we should animate this progress bar and a unity event that is of type float on progress that'll be an event that we will raise every time that the progress bar updates that way we can subscribe to whenever these updates happen and do something like maybe update text every time that the progress bar makes progress we'll do another unity event called on completed that will raise after the progress bar has completed animating i'm using the unity events for these last two because that's much easier to use in the inspector but if you don't really like to use the inspector for that kind of thing and you would prefer to use delegates you can make it look like this instead finally we'll do a private routine animation code routine and that'll be all the variables that we're going to set up on start we're going to just make sure that the progress image type is set up correctly we'll check if progress image dot type does not equal to image.type.filled if it doesn't then we're going to just log an error saying that this object's progress image is not of type filled so it cannot be used as a progress bar disabling this progress bar and then we're going to do this.enabled equals false we're also going to define an overloaded method here called public void set progress the first implementation is going to accept just float progress and what it's going to do is call the different overloaded method called set progress that accepts the speed and by default we'll pass that default speed this is really just a convenience for whenever you use this if you wanted to use the default speed you only have to provide the progress you don't always have to provide some speed so let's define that second option there with public void set progress that accepts a float progress and a float speed in that one we'll check if the progress is less than zero or greater than one again we're going to log a warning this time saying that invalid progress was passed we expected a value between zero and one and we got some other number and that we're gonna clamp that value to something between zero and one with progress equals mathf.clamp01 progress all that does is if you pass like a negative number it'll clamp it to zero and if you pass something greater than one it's going to clamp it to one the second thing we'll do is check if the progress does not equal the progress image.fill amount that way we're not doing any extra work if it's already the same progress if the animation code routine is not null we will stop that animation curtain and then we will do animation go routine equals start curl routine animate progress passing in the progress and the speed now let's go ahead and define that coroutine function animate progress with private innumerator animate progress that accepts a float's progress and a float speed in here we'll define a float time to equal 0 and a float initial progress to equal progress image dot fill amount while time is less than 1 we'll do progress image dot fill amount equals math f dot lerp from the initial progress to the desired progress passing in the time variable for the t so if the initial progress is zero progress is one it will go from zero to one over one second by default then we'll do time plus equals time that delta time times the speed which the default speed we have is one that's where i'm getting that one second from we'll then do on progress question mark dot invoke progress image dot fill amount the question mark just is like checking if on progress is null and then it won't do anything if it is null if it's not null then it will invoke that unity event or if you're using the delegate function it's the exact same code to have right here so there's no difference and it'll invoke that unity event or that delegate function with the progress image.fill amount here once we finally got through all the animation we'll do progress image dot fill amount equals progress because maybe if you have the speed too high it'll actually skip over landing on your desired fill amount we're just going to make sure we fully hit that progress we'll again invoke on progress just saying hey we finally reached the end and then we will also invoke the on completed which doesn't accept any arguments it's just saying hey this progress bar is done if we hop back to the unity editor i'm going to select these progress bars and now we can see that the progress bar script has the progress image reference the default speed the on progress unity event and the on completed event we're going to drag the image that we want to be animated to that progress image and remember it needs to be a filled type so for this first one it's going to be the image that's attached to this progress bar for the on progress what i want to do is update this text mesh pro text here that says loading with the current progress so if i just show you what this is doing under the hood there's a set text method that accepts a float and it's just setting the text of the text mesh protects based on the text that's getting there so we'll add an on progress event drag the text updater to the object reference and say text updater.settext using the dynamic float option here and that will automatically invoke the set text with whatever value on progress provides that's perfect whenever it's completed i want the text just to say complete so i'll drag the text mesh pro text here and set the text mesh pro text u gui dot text value to be complete i'm going to repeat this process for each progress bar the second one's the only one that's a little bit different where we're going to drag the image that is not on that progress bar it's the sub image because it's going on top of that border for the second image everything else we're going to do the exact same process all the way through we then click play we'll see this runtime gui that i made just for the demo where i can adjust the speed that these progress bars will animate at if i click the button it will play the progress from 0 to 1 just so you can get a feel for how fast the different speeds are you'll see as they play the text updates with some percentage and eventually say complete at the very end and these don't have to only go left and right and 360 from the top you can do the same thing animating from the bottom on a vertical progress bar you could have a circle that fills left to right or up to down down to up all of these film methods will work it's just a matter of providing the right sprite with the right border and having them layered on top of each other the appropriate way to get the look that you're looking for that's how we have a basic progress bar but you can do things like layer these on top of each other to get different effects like what i used for example in my game i had multiple progress bars stacked on top of each other to show different concepts of the level you can of course create a custom script to manage three different images at a time but i found it very easy to just use the three different progress bars that were layered on top of one another this works with any image on the ui that you have so you can use a custom shader you don't have to use this particular one to get cool like effects going on on your progress bar while you have the fill amount going as long as whatever shader you're using supports this fill mode it'll work just fine you know all kinds of different effects as well depending on how you set up the border and the fill image you can do things like having a globe fill up if you use a circle for example instead of just a circle border like what i was using here the linear progress ones across are the most common ones we'll see with like health bars and like progress for a gun stats something like that only thing to be really careful with is since we're filling that image if you don't have one that's like a basic shape like this it can be very obvious that you're stretching an image and it might not look correctly inside of a border so you may need some custom sprites for your progress bars if you're going to have them like really wide and maybe not a linear shape let's use a practical example for that if you're going to have a progress bar with rounded corners generally use a sliced sprite for that if you're going to then try to use a filled sprite as that fills and it's a really wide one let's say you just use the rounded square that's not going to look right as you expand it across because it's going to be a pretty wide rectangle one and you're going to get some holes on the progress bar so for progress bars like that if you're going to use rounded corners make sure you make a custom sprite that's the correct size for whatever progress bar you're going to use for that rounded edges otherwise it really doesn't look very good if you got value out of this video please consider liking and subscribing to help the channel grow reach more people and add value to more people this new video is posted every tutorial tuesday and i'll see you next week

Channel: LlamAcademy

Views: 6,752

Keywords: Unity, Tutorial, How to, How to unity, unity how to, llamacademy, unity navmesh agent, unity navmeshagent, navmeshagent, unity navmesh, C#, progress, bar, progress bar, event, raise, raising, events, progress events on progress bar, raise events progress bar, reporting progress bar, percentage reporting progress bar, percentage, reporting, report

Id: Qw8odLHv38Q

Length: 10min 42sec (642 seconds)

Published: Tue Feb 08 2022