 Hello everyone, it is Crypto Grounds here. Welcome back to another Unity Ado Game Tutorial video. This is episode 6.2 and today we're going to be working on our smooth progress bars. Anyways, I am back with a green screen so I've kind of upgraded our little setup a bit and we're doing this all in a college dorm so it's working great. If you end up enjoying this video, make sure you leave a like as it really helps out the video for the YouTube algorithm. Subscribe to my channel if you enjoy this content and you want to see more. And turn on the bell if you want to get notified whenever I upload videos. Also just so you know, we are approaching 5000 subscribers soon so be sure to stay tuned for the 5000 subscriber special. Anyways, we've got that long crappy intro out of the way. Let's get started with the actual video. Alright, so if you don't know what a smooth progress bar is, it's basically just a little fancy thing I kind of just came up with. I'm not sure if there's like an actual term for it but basically you have a double progress bar here. So in this example we are inside of our click upgrade prefab. We have our progress bar that we have implemented two videos ago and we have another fill. So this is going to be the smooth one. I have changed the white one which was originally just the normal progress bar fill to smooth. And then we have our kind of grayed out one in the background and this is our actual progress bar. So basically what's going to happen is that this will fill up as normal and this one will kind of trail behind it as it depends on how fast it's filling up. So the faster it is, the kind of further back it'll be. It will give it a little smooth effect which is really satisfying to watch. So this video is completely optional but if you want to implement this to make your game look a little more pleasing to look at, this video is for you. Okay guys, I want to show you an example of the smooth progress bar in action in my game idle research. So we can see two or three examples here. We have our research bar at the top. We have a fill here and we have one at this flask. So in this example right here, you can see how it's going down. When it resets, it goes down very smoothly, right? So that white, if you can see that, that white part of the progress bar is the actual fill. And then the green is the smooth. So you can see it goes down quickly but it's smooth, right? It's the same thing with this right here, with the flask. You can see how it just resets very smoothly and it looks nice. So this is what we're going to be implementing today. The first thing we need to do is head to our upgrade script. Okay, so currently in this script, we have one image. We're going to add a second one and this will be our fill smooth. Let's head back to Unity. All right, so in the bottom here, right here, you'll see fill smooth. We're going to drag our fill smooth into here and we're going to replace this fill. I'm going to move my big old head right there. We're going to replace this one right here with our normal fill. So I'll show you this step on a generator upgrade or just another prefab. And we want to make sure you do this for all of the upgrade types. So, so far we've done it for click. Let's go on to generator and I'll show you how I've done this. Okay, so this one looks a little funny because the prefab kind of screwed up. But basically right now this is our normal fill, right? This is going to become our smooth. So we're just going to rename that to smooth. And then we're going to copy and paste this image. Just rename it to products bar fill and just give it a little kind of a gray color. And we want to set this below the smooth. So I want to place that above it in the hierarchy and you'll see it looks something like this. And you want to do this for all upgrade types. And again, you want to assign the fill and then assign the smooth like that. I just realized that I accidentally messed up the hierarchy here, but make sure that fill is above smooth like this. All right, so we're going to be making a fill smooth method inside of our method script. And this is basically going to determine how we are going to calculate the smooth products bar because it's kind of an approximation. We're going to be adding and subtracting onto it based on what our actual value is. And we're going to multiply that by a speed so we can make it move faster or slower. All right, so this will be a public static void method and we're going to call it fill smooth. It's going to take into double. So we need to have a reference to this one because this will be our smooth value. And we're going to be changing this. So we need to take a reference of it and and for our second parameter, it's going to be double actual value. So this will be our actual fill and we need to take a reference of this as well because we're going to be doing some little modifications to this value. And also we want to change the speed. So you can this is optional. If you want to implement this or not, I'm going to I'm just going to do it anyways, but this will be a float speed value and I'm going to make this a default parameter. I'm going to set it to 10. This is the speed I use for auto research. All right, so there's going to be two different things we're going to be doing. We're going to be either subtracting the smooth value or adding onto it. We subtract when the actual value is less than smooth. And when the smooth is greater than actual, we're going to add to it. So we're going to be checking for a few things. For one, if the smooth value is greater than the actual value, we're going to subtract it because we want to go towards the actual value of the fill. And again, when I say actual value, I'm talking about the progress bar, like the actual value of the progress bar. And smooth is just a value we're going to adjust based on actual value. And so if our smooth value is less than actual value, it needs to catch up and it's going to we're going to add to it as it catches up to the actual value. So let's just do this for an example. So let's just have no if statements whatsoever. Let's just let's just write some stuff down. So for a smooth value, we're going to add onto it for an example, right? We're going to add onto it based on the gap between smooth and actual value. So we're going to subtract our smooth value by our actual value. And basically what we're doing here is we are adding on to smooth value, whatever the gap between smooth and actual is. Now this is where speed comes into place. So if we were to divide this number by let's say 100, it's going to be a lot slower because we are dividing the gap by 100. So therefore it's going to increase a lot less if that makes sense. While we divide by two, the smooth progress bar is going to catch up much faster because our gap divided by two, we're basically let's just go to paint, for example. All right. So let's say this is our progress bar. So this is the smooth right here. This is the smooth, the dark green. And this is the actual. So it's just going to be a. All right. So the gap is going to be right here. This is going to be the gap. And this is actual minus smooth. I accidentally messed up the math in the script. By the way, I'll fix that. But this is a minus smooth. Okay. And basically when we add to smooth when we're doing plus equals, we're adding this gap. To smooth is doing is basically moving the smooth all the way back to here. So we're basically just setting smooth to a. So if we were to have no division here, smooth is always going to be right here at actual. However, if we want to have that smooth effect, that's what we divide. If we were to divide by 10, then we're going to take this gap divide by 10. And that's probably going to be something like around here, a little less probably, we're going to be incrementing a lot less. And we're going to have that smooth effect. So the higher this number is, the more behind this will be from the actual mark right here. And the slower it's going to be. However, the lower this number is, the more precise it's going to be and the less smooth it's going to be. It's going to be as close to this actual as possible. I hope that makes sense. Just know that if you want a smoother effect, bump up this number. If you want a less smoother experience, then reduce this number. Okay, so back to script. And again, I want to subtract the actual value by smooth. And we're going to divide this by our speed, which has a default parameter of 10. So if we call this method and don't throw in any speed arguments, we're going to have a speed of 10. So we're going to be dividing all this by 10. And we want to add this is going to divide it even more because because this is going to go really fast. However, if we want to add this value per seconds, we're going to do time dot delta time and this will make it look a lot better. All right, so now if we were subtracting, we're going to do this exact same thing, except the only difference is that we're going to be subtracting the smooth by the actual value. And the reason why is because when we are subtracting and I close paint, we're basically going the opposite direction. So we want to calculate the gap by calculating how far ahead is smooth than actual so smooth is going to be greater than actual. And we want a positive value and we're going to subtract it by this. So now we need to actually check for this kind of stuff. So for the adding, we're going to check to see if our actual value is greater than our smooth value. And we want to check if it's equal as well just because we want the smooth value to go to actual. Otherwise, we're going to check to see if the smooth value is less than actual value. All right, so we're just going to leave it at this for now. We're most likely going to have to come back to this because because I've optimized it a bit. All right, so in order to actually use this fill smooth, we're going to head to our upgrades manager. And what we're going to do is head to our upgrade fill manager. It's our local method under update. And we're going to do stuff related to our fill. So let's adjust the smooth fill. So our fill smooth is going to be equal to methods dot fill. And we are going to take in a value. This will be our soon to be smooth and our upgrade cost. So this is the exact same as the actual fill, except we're going to be using another variable, which we will create in a second. And don't forget the dot fill variable. So we are calling. So we are changing the fill amount of this image fill smooth. So let's create this smooth variable. Let's go back to our upgrade script. And I'm going to create a float called smooth value. And now let's go all the way back to upgrades manager. And we're going to change our smooth here to to upgrade handlers at index index dot upgrades at index I dot smooth value. So this is the variable we just created. Now we actually need to set this variable because it's not going to do anything. This is just going to be a zero because smooth value is zero. So to do that, we're going to call methods dot fill smooth. And we're going to pass in a reference to our smooth value and a reference to our actual value. And this will be this fill amount. Also my mistake, but this smooth value actually needs to be a double because we're passing as a reference. We can't cast it. So make sure the smooth value is a double. All right. So we have another issue. We're trying to pass in a float as a reference, but it must be a double. So let's just head back to our methods and change this actual value to a float. And also another issue is that I forgot we cannot pass in an object variable as a reference. So we got to get rid of this ref term for the float and go do the same thing in our upgrade in our method script. So get rid of that ref for the actual value and we should be safe. All right. So let's give it a try. And as you can see, it is not working properly. So that is not a good sign. All right. So I've got it working. I've made a few mistakes, but let's just show you an action first before I actually fix it. See how it looks nice. Beautiful. So it works. And let's only show you before we actually get to the solution. I'm going to show you what happens when you adjust the speed. So right now it's at 10. It's pretty fast. But let's just go to here and actually let me get rid of some of this stuff. I was just kind of just playing around. Let's see. Okay. So I forgot to mention. I added the plus zero one because it's really, really slow. If we were to use the normal time delta time. So I multiply this by 0.1 or just divide the delta time by 10. And that made it much faster. So let's change the speed. Let's make this 100. I'll show you what this looks like. All right. So you can see it's much smoother, right? So let's just buy something you could see it's much smoother when it's at 100. So you may like it. You may not, but you could see previously it was 10. It was much more sensitive. And these are much slower, but it's a lot smoother. Cool. So they all seem to work. Perfect. Let me show you what I did wrong. So this is what the final code looks like. If you want to just leave it like that. This is what it looks like. It looks just fine. However, if we were to head to our upgrade manager, what I was doing wrong is I was actually using the fill method and throwing in the smooth value and divide and that divides it by the upgrade cost. So that's obviously not going to work. And I just completely forgot that our smooth value is basically it's going to be around the fill amount. So we don't even need to use this fill method here. So basically I just set this fill amount to the smooth value and I cast it as a float. So it looks like that. So here's all this code here. And let me show you the upgrades real quick. So this is what we have here and our methods. This is our fill smooth method. Anyways, guys, this is it for this video. If you enjoyed it and it was helpful, make sure you leave like as it really helps with the videos and subscribe to my channel if you want to see more content like this. Turn on the bell if you want to be notified for future videos and live streams. Check the Patreon down below. If you really want to support my channel and if you want to become a beta tester and all right. So I will see you guys in episode 7.0, which will be by Max. So we're finally starting to get some more quality of life in. And that should be an interesting video. So I'll see you guys there. Thank you very much and I hope you all have a great day or night. Peace.