 Hello guys Crypto grounds here welcome back to another idle game tutorial series video. We are back I am gonna do some more videos now So this one instead of the agenda that I previously showed in one of my videos because like episode eight or nine or something like that kind of going off track because I Discovered my own skill which is smooth progress bars as you could see here. I think it has that cool Liquid effects I guess you could say but it's really smooth So I'm gonna show you guys how to do that And yeah, this is something I've been working on too It's very smooth. It looks pretty and it's absolutely not necessary But I feel like this is just a cool video after this I will most likely get back with the actual series and stuff because I do have a long list of videos So series right now if I were to finish all the videos it would end at episode 22 So yeah, we got a lot of stuff to do, but I definitely expect to expand okay Anyways, I'm gonna keep this aside so that I'm still testing my game So I'm kind of just making it for fun All right, so where's our unity right here? All right So we're gonna try to make our smooth progress bar with this right here I'm not sure where you are at but you can do this with almost you can do this with pretty much any progress bar, okay? Also, if you're curious on how to make circular progress bars like this Basically how I did it is my image is basically a circle like this I don't know if you could see it, but it's basically just a circle and these are a bunch of you'll see this eventually I'll show you how this is made, but basically I'm explain how it works Let's zoom in here. So basically this dark this like full color I like yellow orange red. That's the that's the smooth progress bar. See how it kind of moves slowly while the It's hard to see if I can move this right here speed if I move this in front This is a bad one. It's a bad one to do. Let's do yellow But you kind of if you take a look at it. Yeah, let's make it black take a look at it See how it just resets and then just catches up with the smooth progress bar. That's pretty much how it works is that This is basically an average the The yellow one is the full is basically the average of this black one within a certain amount of time It's okay. That's how I can explain it. Okay, so basically it's moving at a certain speed You can change it. You can make it fast make it like really slow Which would be the smoothest but also be kind of weird Or you can have fast one where it's like, you know, it's almost like this, but you still have a transition Okay, mine's Both I guess it's like I still get that transition and it's pretty fast and it's cool because it's a decay That's what makes it slow down once it gets close to this. Okay, so that's how it works. You can see that just resets and that follows and Basically the wider this is the faster this one is moving as you can tell this red one It's very irate, but it's moving very fast So that means we have it's moving very fast compare compare to its The equation that I'm using which I'll show you anyways onto the video Okay, so we're gonna set up our progress bar So we are going to go to right here. It's in our great screen and it's called click upgrade one bar Okay, so you see it's just a casual progress bar right here So now you can design it however you want to but I'm gonna kind of show you how to make it look like cool, I guess Okay, so what I would usually do is I So this would be the average I Would have another bar right here. I would change the color of this so you know, maybe like to a light green or something like that So this could be like the fast one where it's always ahead Just like this one right here the light one, so we'll make that light green actually, no, we'll keep as white I like the screen though. So I'll copy this color. So we're gonna have our progress bar the same color, but basically we're gonna That's where we do this. So we're going to copy this. So pay close attention We're gonna copy this bar right here with the BG We're gonna paste it and we're gonna delete the BG inside the one that we pasted so you get bar BG bar Okay, you can just rename it to Smooth okay, and this will be our green Okay, so we're just gonna look like that. It'll look like this. Okay If it's moving faster, it'll look like this because it's trying to catch up But I can't because it's moving so fast, but if it's moving slow, it'll mostly look like this or maybe even smaller like that Okay, that's how it works That's it. So for me, I'm gonna add a little more decoration by doing outline You can change the color of that to white so that looks like in-game Yeah, I think that's all I'm gonna do Yeah, I like to like that. All right, so we have our progress bar. Let's go launch your script. Also, I have installed Writer it is great Definitely need to get used to it, but it's a big help You can see I can just go to a random gray underline String or variable or something alt enter it enter again, and it just makes it better So now I don't know how I don't know what it did actually so I'm gonna undo that. Oh I see what it did. Okay. So basically it just merged these two lines together Yeah, just like that See press alt enter. It just makes things cleaner. You don't have to do this, but it's very nice to have Let's see this one more and get rid of these yellow lines right here right here So I'm just gonna alt enter invert if and yeah, that's what I get So if you want to change it make sure it looks like this Keep anyone you're switching it make sure you switch the sign. So it looks exactly like this. Okay So that's just one thing I like to do. Oh, what's up here? Rename. I'm gonna do that. I don't want to rename it What's up, what else is up? Oh, I'm not using this What's nice about writer is that they automatically add this stuff So if you're typing like public big double, it'll automatically add this for you, which is really nice Yeah, all right, let's get on with the actual script. So let's go to episode. What is that episode 13? No, it's episode 15. Wow. I forgot what episode was. Yeah, a lot of videos. All right episode 15 All right So we need to have so we already have a progress bar Where is it? Oh? Looks like we don't have it anymore. That's kind of stupid. I don't know where that's at Okay, well if my scope my code looks a little different then just don't do what I just don't make a new image So basically I'm gonna make a new image for click Upgrade bar one click upgrade one bar Okay, I'm not sure where yours is called But basically I am trying to get this original bar that I had for the cost I did in one of my episodes for progress bars So make sure you don't make a new one if you already have one. Okay, you're just gonna use that one Okay, I'm just stupid and somehow deleted it. Also, sorry. My voice is really bad Still sick Okay, so we're gonna have a new one click upgrade One bar smooth Don't know why this is so laggy. I think that's because of my game here. So all right, so we have our two progress bars here We're also gonna create another variable here called public double click upgrade One bar temp. And actually this could be a big double We're gonna like I don't know where my stuff went. This is a little annoying So I guess I'll make this for you guys I have to make a new method real quick For the fill amount because it's like I got deleted. I think else. I never did a video on that So let's just make a new method under the update method called public void um big double fill amount And I'm really sorry if my code is just so out of whack. I don't know what happened. I really hope it's not confusing anybody I don't know what's going on, but every time I make a change it just freezes writer it's so annoying Okay, we should be safe to go now. Sorry about that. Anyways back to where we were Under our oh no, why is it doing this now? Okay, there we go Okay under our public void update method We're going to create another one. It looks like I didn't save it, right? Yeah, I didn't okay public void big double fill okay, and in here We are going to accept two big doubles big double x x big double y And we need an image fill okay So then what we do in here is that we got it well Okay, I don't know what that was Okay, um anyways back to where we were We need to convert these two big doubles into floats so we can get this fill to work And I'm pretty sure I've explained it in the past. I I I don't get why it's doing this So anyways, we're going to do this. So we're just going to type float z or you need to make a float variable All right, make another one called a just a random one Uh, you can name these however you want, but I this is just how I name it just to make it uh, Sweet and simple. All right x divided by y. This is our percentage basically So it could do var percent that helps you remember So basically if a is less than this number Then we are not going to have a single like value because you you can't see 0.1 percent on a progress bar really it doesn't matter Or a less than that you can't see less than that. That's just stupid else if a is greater than 10 Because we can't see more than a thousand percent obviously so that doesn't make any sense, right? We're just going to cap it at one Okay Else we could just make it if a is greater than one this one. We could do that too So however you want to do that z we need to have a float cast because we are converting our a We're going to make it to a two double now The reason we can't just do to float because that does a that doesn't exist and b can't do this because Uh doubles don't work in your image Fill amounts as well. So we got to use a cast for float and now to float And at the bottom we're going to type in fill that fill amount Is equal to z and that is it So now we've got to apply it to the actual progress bars, which we're going to do up here Oh, this is why it's because this is someone else. I had yeah, my version got corrupted so I had to borrow someone else's That's why all right So this episode 15 We're going to use this so anyways, we're going to use our two part our two images that we used here And the smooth So we're just going to copy this Replace that to replace the bar with smooth and now we need to actually get the stuff going because it's not ready yet Anyways Where's all my stuff? Oh, here it is Okay Are my costs gone that'd be kind of sad Okay, that's Really strange Okay, I see where this is. So here's all of our costs here. I don't know why they're here Why this guy made him like this But we are going to move them Okay We're going to move them to our episode 15 Again, if you already have these up here, then you're completely fine. You don't need to worry about this So i'm going to show you a little trick here So we're going to type in public big double. This is clearly a big double, right? replace them with the bars So here are Our click costs Okay And here's our production cost. We can just keep it at p cost I see why okay So What to do here I'm going to try something cool. Okay So I think I've showed you this in the past But basically what you could do to set variables inside or outside of the actual methods is that you could do get In this and then return it like that Like this Okay So a better way to do this is to take this This is something cool. I just saw in this uh yesterday too make an arrow That's it And you paste that in so basically p cost will always equal this equation right here. So what is it asking me? It's probably gonna ask me. Yep. It's gonna ask me to rename it. I'm not going to Um, we can do that for the rest. So that's easy. You just make an arrow. We are done So that is very very easy instead of putting it in your update method or just having it in that get return Um garbage you could just have this an arrow right here. It's a single line. Okay So to make our progress bars we need to have So we're just gonna set these up real quick. Okay, so remember we're gonna change these eventually. Okay So our first one is gonna be money ah data Stop data dot coins, okay and In the middle, we are going to do our cost which is click upgrade one. So we're going to click cost one Plop that in there And a comma There it is. We're just going to copy and paste for the second one. Okay So we have our progress bars. It will work If I need to test it we can do that. Oh problem here is that It doesn't really agree with me So we got to replace these So to make sure you don't have any errors people will probably ask me why is this not working? So just make sure you are very very careful About your upgrades. Okay Make sure and remember capitalization is key You got to some people will have like a capital C in one place and it won't work and they won't realize it But you got to make sure it's capitalized or capitalized correctly. Okay And I'm very like very specific on how you should capitalize you think like see this is called um This is not a practical case. Uh, what is it called? I think it's something else. I forgot what it's called, but this is very important. This is for one for variables. Okay I talked about it the other day with someone else. So Completely forgot. I think it's snake case or something like that. I don't know that doesn't sound right Um anyways back to what we were doing. We need to make this smooth effect. Okay, so I'm going to make another uh Another method under this big double fill that's we called public void or Yeah public void smooth Number Smooth number not smoother number smooth number. Okay, and here we're going to type in big double x And big double y Okay So basically this is going to be your temp variable and this is going to be your actual variable So before we do that, we need to make a temp cost Okay, so under here we will type a public big double Click cost one temp. This is for your smooth progress bar. Okay. There's a reason why we're doing this All right. So in here we're just going to type a bunch of um If statements to determine how the progress bar is going to react, okay So we're going to do if x is greater than y And y is equal to zero and actually to make this easier We can just replace x with temp and y with actual Or actually temp could be smooth. So we'll do that So smooth is greater than the actual value And y value is equal to zero Okay, so the progress bar is at zero But the smooth progress bar still needs to reset So it's kind of like when I was showing you that example how the progress bar needs to slow like Quickly and then slowly reset. This is what we're doing right here. Okay So smooth will minus equal because we got to reset it smooth minus actual Divided by this is your speed. Okay. I'm gonna put 10. That's my most favorite speed But in the game I was showing you before I was using eight. So it's a little slower If we use five, it'll be incredibly slow if you use 25 It'll be really fast. Okay No, no Okay, no if you use one it'll be really fast if you use 10 it'll be slower. Okay, so this will be just a little slower Then what I showed you But it's barely you could barely tell a difference And plus 0.1 times Time dot delta time the frame time. All right. Now we need to have another one So if x to the floor Oh, no, I forgot. Sorry, nor me If smooth point floor Oh, I see no, okay issue here So we need to do floor Smooth, okay, so if floor smooth Is less than actual It needs to catch up. So we're going to add on to smooth. Okay So smooth will plus equal actual minus smooth Divide by the speed plus 0.1 times Time delta time. Okay, so it's adding on instead Okay, and then it'll go really fast and it'll slow down once the approach is that actual value And the reason why we have this plus 0.1 Is so it doesn't keep increasing forever. So basically it's estimating just a Like a just a tiny bit above the progress bar But it'll never actually reach it because of this Or of this following statements. Okay Or after this one. Okay, so if x floor Smooth Is greater than actual instead. We're just going to completely do the opposite Which is just a copy paste of this. Okay, we subtract. That's pretty much it else Smooth is equal to actual so this is where This is where the point one comes into play. So if it's increasing it's estimating above the progress bar So I'm going to draw a little example Also, I'm really sorry my voice sounds bad. It is it I can just hear it. It sounds awful All right, so I was editing the video and I decided to explain it on the white board I thought I'd try something new so and then this will also look better than on paints So we're going to draw a little progress bar All right We're going to draw a red line Kind of start out on markers. All right. We're going to draw a red line This will represent our variable a which is also equal to x divided by y Okay And remember x is our coins and this is the cost, okay And this is zero right here and this is one. All right So what we do here is that 0.001 is is a very tiny sliver right here Probably even less than that and that's 0.001 So if this variable is just a tiny bit smaller than that and we're automatically just going to round that to zero while for here We do 10 Just probably all the way over there all the way over there We round that back to one. I mean you could obviously just set the thing to one So if it's over one it would just set at one, but I just put 10 just for precision. I guess Um, it doesn't really matter what you do there anyways So this is our actual like our actual value right here Our smooth however is going to be blue Let's say it's right here Okay So right now It is behind this bar. So it it's behind the actual one. So it needs to catch up So it's going to continue going this way. All right, so it's going to go right Until it has this estimation right here of 0.01. That's our error and that is going to be like Let's make this green All right, the estimation estimation will be right here and this right here That's bad. What am I doing? 0.1, okay So basically we are overestimating just so this doesn't casually decay forever till this red line. Okay Because it will do that So we want it to happen to here. It's because it's going to guaranteed cross that red line Always, okay while it'll never cross this green line. Okay. Hope that makes sense So Let's change things up. All right, so let's say the the progress bar was ahead of the red one So it's right here So let's say this whole thing's shaded blue and that's shaded red. Okay, so we want people to see this red line We would just see the entire blue. Okay, that's smooth. So what it needs to do This is what happens when it resets basically it needs to go back down. All right, so head towards that red line And we're going to have another estimation line On zero the size of 0.1 and instead that will be on this side Like that So basically estimating on this line right here. That's the 0.1 error And it will approach this green line and once Is past that red line it will just stop it Right at the a line. All right So hopefully that makes sense Okay We need to replace these So this smooth is going to be based off of I'm trying to think how I should do this Okay, I see the issue here This this temper here It actually needs to be a coins temp. I'm really sorry, but it needs to be coins temp. Okay So basically we're going to replace This coins right here with coins temp because this is what we're going to be controlling All the way down here. Okay. So how do we do that? Well above it we do smooth number We put our first number our smooth number coins temp Comma our actual number data coins. Okay And that is it. We are done. So we are going to test this in here real quick And hopefully we should be good to go And hopefully this wasn't too complicated Hopefully it's useful. It might not be for some people, but if you want to decorate your game This is one way to do it I hope you guys aren't mad for not doing like as productive videos if I don't trust me I'll get there. I just want to get this stuff like out of the way before I actually forget to do it Because I thought I thought it's cool All right, so we're going to save it So make sure you drag your bar into the bar and you smooth into the smooth image Okay, and your bar should already be here from your tutorial mine is just retarded. So Hopefully we're on track Oh, what's going on here? Okay. I see an issue Uh, it should be an issue. Okay, so we're going to go to our upgrades Uh, we can buy some of these so let's just see let's just buy some Okay, uh Okay, it's not working So what's going on? What's going on? So this smooth is always And zero, okay. I see the issue here. The issue here is we forgot one important step We are directly changing a variable inside a method. And how do you do that? You add a ref So that means you got to add up here too or else we are changing a copy of it. Okay So we got to type ref because if we want to directly change it, all right So now it should work up. There you go. Here you go. There's your smooth progress bar So that's by Say that's so cool So now you can't see here obviously that'd be kind of cool to watch but you can see an action Yeah, all right Uh, actually, I want to try something. I want to try to make it go really fast So let's add some money Let's add a lot of production upgrades. See how the white bar gets a little thicker So let's keep doing this. Let's just buy tons of upgrades Okay Oh shoot. I forgot It actually affects. Oh, yeah. See now. It's really tiny because it's going really slow. So let's just buy tons of upgrades All right Oh boy So now we should be getting enough. Ah, we got we might have to reset Oh, no. Oh, no. No, we can't do that. That's a lot Okay, that's better. So now if you buy one of these Well, let's try to get this bar fast. Oh, yeah, there you go. See the hell that white bar is really fast See that that is really fast So you can change the speed of it. So let's change it real quick So let's say we wanted uh one actually no because that'll be the actual value So let's say we want to we want it half Well, it um it grows half the speed. I guess that's what we can say If we make it one It'll just follow it basically So now two should look different See how it's like Constantly on the white bar instead of it being really smooth Okay, so now if we change it to like 50 It's gonna look kind of stupid It's gonna look like it's an extreme slow motion Because every frame Times the delt times out the frame it is every seconds it is dividing its current value It's gonna either add it or subtract it By 50 that is very slow. Well, if you do half of it, it's just gonna like go really fast if that makes sense If you don't understand the speed just make it remember the lower the number is the faster it is or the more reactive it is So let's see ready Oh, see how slow that is That is very slow. It can't keep up That is very slow that is on that is unreasonably slow So that's why I like it mine at 10 like 8 to 10 maybe 8 to 12 I think that just looks perfect Anyways guys, thank you so much for watching. I hope that video was helpful I promise I'll probably have more interesting videos in the future more related to the idle game itself And if you have any comments, if you have any comments or questions Just comment them down below if you're not a subscriber. Make sure you subscribe I'll do my best to post active videos and it would mean so much to me I am almost on my way to a thousand subscribers So let's get there as soon as possible and I will be And I will I promise I'll have a really big surprise for you guys. Anyways, thank you so much for watching. Have a good day and night. Peace