 Hello everyone, it is Crypto Grounds here and welcome back to another Unity Idle Game tutorial video. This is Episode 6 and today I'm going to be showing you how to implement progress bars into your game. If this video ends up being very helpful for you, make sure you leave a like and subscribe to our channel if you're new around here and turn on the bell if you want to be notified for whenever I upload videos or go live. Anyways, let's just jump right into it. So the progress bar we're going to be implementing today is going to be related to our upgrades. So it's going to determine how close we are to actually buying a certain upgrade. So it's going to go here, I'm going to add it real quick. Okay, so I have implemented my progress bar. So it's basically just an image as a parent and then a child image for the actual fill. So our image looks like this. I just have a plain white image and I changed the color to gray and this will be the background. And the image type is simple, so it's not going to do anything at all. For the image for the fill right here, I did filled horizontal left and you can see it goes from left to right. And some issues here is that if you have an image that is being used for slicing like this, it's not going to work. Okay, so if we have an image like this one right here, okay, this one actually doesn't look too bad. Oh yeah, this is slice. So you see how it looks kind of decent right now? In order to use filled, we have to get rid of the slicing effect, which makes it look really, really, really bad. So I just want to give you guys a heads up that when you are designing progress bars, obviously this is very basic. You're going to want to know ahead of time what you want it to look like because you won't be able to apply the slicing effect. So look at the dimensions here and mess around with Photoshop and stuff like that. Another thing you want to make sure to do is to apply the progress bars to all of your upgrade prefabs. So don't forget to do that. So we're going to create a method called fill inside our method script. So this will return a float or call it fill. It's going to take in two big doubles, left and right. So this method will be used for actually setting the fill amount for the progress bar. And since the fill amount variable is a float, we need to return a float. And the reason why we're creating this method is because when we're dividing left by right, these are big doubles. So we're going to eventually have to convert these to floats and things can go very wrong depending on how small or how big the number is. So we're going to do some checks. So first let's create a temporary variable var fill equals the left divide by right. So this is our fill for now. It's going to be a big decimal and we're going to have to convert this eventually. So the first thing we want to do is check to see if this fills greater than one because we don't really need to return anything greater than one anyways. So we'll just return one if it's greater than one. And remember the progress bar goes from zero to one. So we don't need anything greater than that. And for the really small decimals, like the ones like tons of like decimal places, we're going to have to convert this into a float. And floats only have so much precision and we can get some issues with this. So we're just going to check to see if the fill is less than 0.001. And I think that's small enough. You won't be able to see that right away on the actual image. We could probably even do less than 0.001. That works too. So if it's less than this, we're going to return 0. Otherwise we're going to return the fill. And before we actually return it, we need to convert this into a float. And that is everything we need to do inside this script. Next let's head to the upgrade script. And here I'm going to create a brand new image called fill. Next let's head to our upgrades manager. Let's head down to the update all UI method because this is where we're going to actually do everything. So we're going to be changing the fill amount of the fill image from this upgrades ID next ID object. So let's do that. Okay. So fill amount is the variable name for this image. And we're going to be setting it equal to methods dot fill. And we have our left. So our left is going to be the currency. So we're going to be dividing the currency by the cost. And this will determine on how close we are to actually buying or how far away we are from actually buying the upgrade. So for our currency, it's going to be controller dot controller dot data dot flask. And our right side is going to be the upgrade costs. So now that we have finished all the scripts, we need to assign all the images to all of our prefab. So let's do that. So we just want to drag this progress bar fill into the fill object slot right here and make sure to do that for every single object. Okay, cool. So this is going to be a little hard to tell because our numbers are so big. So I think I should just restart everything and see is it working. I don't believe so. Oh, it is working. Here we go. Cool. Oh, except it's updating every time we click on it. So that's an issue. Okay. So in this method, there's one thing we need to do and that is to actually move this line somewhere else. So I'm going to grab that and we need to move it somewhere else inside of the update method for the upgraded manager. We need to determine if our upgrade screen is actually active because that's just kind of a waste. We're going to check to see if our upgrade scroll is active. So we kind of do that already down here. So let's just do that. So I'm just going to paste that for now and comment. So for the upgrade handler at zero, this will be our click upgrades. So if this is active, we need to run through all of the upgrades and change the fill here. So we already have a for loop up here. So I'm just going to steal that. All right. So this will be this index right here will be replaced with zero, zero, zero. And we're going to change this upgrade thing here because it's not actually what we're doing. So we can delete that move this line to here to this for loop. What we want to do is adjust the upgrade handlers index zero dot fill and we need to access the upgrades. So we get that from here, upgrade handlers at an X zero dot upgrades. Okay. So it should look like this and we're going to place the type with click because it's our click upgrade right here and our ID with I. All right. So I'm going to make a new method, something like this, because it'll kind of clean things up a bit. So I would just call this the upgrade fill manager and we're going to pass a string. This will be our type and it's for our index. So this will be for our upgrade handler. And in here, I just inverted this if they make it looks a little better. I'm going to replace all the zeros with index and click string with type. And now we actually need to call this. So we have our upgrade fill manager click and this will be type zero and we'll do the same for the other two. Okay. So let's give this a shot. Now. Cool. So it's working perfectly. Fine. Now. Good. Good. Good. Looks great. All right. So that is it for this video. I know it was very basic and it doesn't really do too much, but hopefully it should lead you into the right direction. You can make pretty much anything out of this progress bar script or the few methods that we've created and it's pretty easy as well. So you can do whatever you want with it. You can change the color. You can make it do funny things if you want, but we'll get more advanced in the future episodes. I hope you guys enjoyed this video. If you did make sure you leave a like, subscribe to my channel if you're new around here and turn the bell if you want to be notified for future videos and live streams. Anyways, I'll catch you guys in the next episode, which will be 6.1 and that will be the different types of progress bar. So I'm going to be showing you guys different styles like circles or just stuff like that. So if you're interested in that, stay tuned for the next one. Hope you guys have a great day or night. I'll catch you guys in the next one. Peace. Bye. Bye.