 In episode 2.5, I'm going to be adding some more click upgrades and we're going to be using some magic that looks like this. Whoa, where are those three come from? Okay, it works, nice. Wow. Hello everyone, it is CryptoGround here. Welcome back to another Unity idle game tutorial video. This is episode 2.5 and today we are finally adding more upgrades to our game. If you enjoyed the video, make sure you leave a like, subscribe to my channel if you're new, and turn on the bell for future notifications. So there are a lot of steps required to complete this video. So please don't skip to the end of the video, copy all the code and call it good to go because that is simply not the case for this one. Actually, that goes the same for any video. The first thing we need to do is create this UI here. So when we create multiple upgrades, we're not just going to copy and paste the same instance, we're actually be generating in our code because this will just save us a lot of time and it's not very hard to do either. So the first thing we need to do is check out our click upgrade button here. So it looks all good. We have our upgrade script already. We have our buy upgrade button here, but we need to do one thing. So I'm going to open up this upgrade script and you see we have our UI here, but we are going to be using this upgrades to call our buy method later on in the video. You'll see why. And we need to assign this an ID because when we create our upgrades, we're going to be doing it in a for loop and we're not going to be able to assign each button individually. And yeah, so we're going to have to do it in a different way, which will completely work. So anyways, first thing we need to do is create an integer and we're just going to call this our upgrade ID. Now that is all we need to do in this script for now. So now in order to generate these upgrades, we are going to be using prefabs, which is basically a template for an original object that you created. So we're going to create a new folder called prefabs, and we're going to drag our click upgrade into this folder. So now it becomes blue and that means it is a prefab. So whenever you drag in a new prefab here, it basically just clones the original one that we've created, but we're not going to be doing it like this. So we're going to be deleting both of these right here. So our interface is just the singular button, but we're going to be coming back to this later on. The next thing we need to do is convert our current click upgrade level to a list. And if you haven't seen the list video, I highly recommend you do it. It is the previous video episode 2.4, as I show you some very important stuff that I'm about to do. So let's convert this into a list. But the first thing we need to do is include this using system collections dot generic. So if you don't have this already, make sure you add it. So now we can do list. And then we're just going to make this a big double. So this is a big double list. And we're just going to get rid of this now. So as I've explained in the previous video, creating a new list sometimes doesn't work properly. So we need to create an alternative method. So I'm actually not going to make this method in here because we may use it somewhere else. So in Unity, I'm going to create a brand new script called methods. This is basically just for anything utility related. So such as like our notation methods that we're going to create eventually, just stuff like that. But you can call it whatever you want. I'm calling it methods. So in here, make sure you also have the system dot collections dot generic because we're going to be needing it. So so in this class, we're going to be creating a static list with the generic type, which is T, and we're going to call this our create list. And we need in order to use T for generics, which represents any object, we need to include this at the end of the name. And in here, we're going to take in capacity, which is an integer. And this will be our parameter inside this create listen method. We're going to be doing innumerable dot repeat with default T. So we're basically setting T as a default new object. And we're going to repeat this capacity times and convert this into a list. If you haven't watched the previous video, please do so. So you understand what this means. So now we can go back to our data and initialize our click upgrade level here. So we're going to do methods dot create list type big double. And this will be a size three. So we're going to be doing three upgrades in this video. And now the reason why we're able to do methods dot create list is because this is static. So this is how you call methods statically. So let's just say you want four upgrades instead. And your game is already published. And you decided to add a brand new upgrade. Well, okay, let's just change this three to four. Unfortunately, it doesn't work that way. Let me explain why. And if you again, I explained this in the previous video, but I'm going to explain it one more time, since it's a very crucial. So when you create a new list here, size three, for example, and your game is ready and go in and has a save and load system, which we'll implement later. When you save your data here, it's going to save click upgrade level as a size three list. So basically it's already initialized. It is good to go. So let's say you change this number to four. When you load your data, it is going to overwrite this three because click upgrade level was originally a size four. But when you load your data, it's going to go back to three because that variable has already been assigned. So it, yeah, it just messes things up. So basically what we're going to have to do is check to see if the number of upgrades we want is greater than what the size actually is for what we load in. If it is, then we're simply just going to add on to it and we'll be good to go. So what we're going to do is head back to our methods script. And we're going to create a brand new method. And this will be a static void this time. And I'm going to call this upgrade check. And we're going to be using generics here because you never know, we may be using a big double list and inch list, a float list, stuff like that. But this can honestly work for any object as well, which is very neat. So we're going to use the generic type T and we're going to take in a reference to a list that we are taking in. And the reason why we want to use this ref term is because if we were to exclude this and make changes to this list, we're about to take in. We're going to call that list, by the ways. It won't make changes to the list that we call the method with. So we need to add this ref term to know that this is a reference of the actual object that we're passing through because this is just making a copy without that term. Hopefully that makes sense. And we're going to also have our length in here. And one more thing we need to do is assign T. We need to give T a definition. And we're going to say where T is basically a new object. So this new right here, we're basically telling T, okay, this is a brand new object we're creating. So in order to do this successfully, we need to do a try catch. And we can get rid of this exception here. So we have this try catch here because when we do something in here and we get error, we don't want to produce any errors. We're just going to create a brand new list. So the first thing we need to do is check to see if this list is empty first of all. So if our list dot count is equal to zero, if it's empty, then we're just going to do list equals methods dot create. And oh, we're in method. So we actually don't need to do this. We can just do create list. And we're going to put in T. And we're going to put in our length. So it's creating a brand new list based on whatever T is, whatever this object is that we're passing through. And it's going to be based on our length. Now what happens if this list is actually not zero, but it is less than what we want length to be. So let's just say the loaded size is a size three. But we actually want this list to be a size four. What we're going to do is while what we're going to do is while our list count, our current list count is less than the length we want it to be. We are going to do list dot add and new T. We are creating a brand new empty object. So what if everything fails? If everything fails, we're just going to create this new list. We're just going to force it. So no matter what this output is, we're going to create a new list or we're just going to add onto it. So that is all this upgrade check does. If something's very confusing, please comment below and I will try my best to explain it. If I get a lot of questions, I can do an FAQ pinned comment or something like that. But these two methods are going to be a huge lifesaver when it comes to saving and loading your list. All right. Finally, we can move on to our upgrades manager. So we have quite some stuff here that we need to change. So first off, we have this upgrades right here. We have this click upgrade right here, but we're going to rename this to a prefab because we're going to be using this as our template to copy once we create more upgrades. And on top of that, we're going to use a list because what if you want to add more upgrades just like in the middle of the game for whatever reason, you can do that in here. So we're going to create a list of upgrades and we're just going to call this click upgrades. So this will all be managed within a scroll rect and everything will be placed inside of a panel. So scroll rect will move this panel up and down. This panel will be the spawn point. This is where we're going to throw all of our upgrades inside the code. So we're going to create a scroll rect here and we're just going to call this the click upgrades scroll. The next thing we need to add is a game object and we're just going to call this the click upgrades panel. So we still have a few things we need to adjust here. Our upgrade names is actually going to become a string array. So we're just going to do click upgrade names. And we're going to convert these base cost and cost molds to arrays. In addition to that, we're going to create a big double array called click upgrades base power. So this is basically how much by default we are adding to the click power per level. So some things here are going to change. I'm just going to get rid of the old stuff. So starting with our click upgrades names, we are going to sign this to a new array. We don't need to add this string term because we're going to be adding strings anyways. I'm just going to call this click click power plus one and you can add whatever you want to these. It doesn't just have to be any of these. If you want to add images, other texts like descriptions, you can modify this however you want. I am just doing the most basic form of upgrades just so you guys understand how this works. So I'm going to keep adding on to this. I'm going to do click power plus five and click power plus 10. These could be fancy names, but I'm just doing click power plus one, click power plus five just to make it easy, just to make it basic. But I'm hoping you guys will be a little more creative than I am. So next we need to assign the base cost. So our base costs are going to be a new big double array. Don't forget this new term here. But in here, the base cost is going to be 10, 50 and 100. Just for an example. And since 10, 50, 100 are ints, we need to include this big double here. And now for the base power, it's going to be the same thing, a new big double array. And in here, our base cost is going to be 1.25, 1.35 and 1.55. Just just random numbers that we're going to be using to multiply the cost. And oops, I meant to copy this cost mold here. Sorry about that. Now for the base power. Once again, same exact thing. That's a new big double array. And our base click power is going to be one, five and 10, as we said in our names right here. Sweet. So we have assigned all of this stuff. Now we need to get down to actually creating these upgrades. So we're going to be doing this in a for loop. And it's going to be based on whatever size this click upgrade level is. So I'm going to create a brand new for loop. And basically, we're going to be running this till the end, based on the size of our levels list. So we're going to be doing this by controller.instance.data.clickupgradeslevel.count. Remember, I explained earlier in the series that in order to access data from a different script, we are going to be using our singletons. So we do controller.instance. And we're going to be adding I by one. So the first thing we need to do is create an upgrades, a temporary upgrades object here. Now we're going to set this to instantiate. So this basically means we're creating the object from scratch. And in here, there's different forms. There's different ways we can do this. There's quite a bit actually, but we're only going to be using this one right here, the object and the transform one. So we're going to take in our object prefab. So our click upgrade prefab, smack that right here. And our transform is basically where we're going to put it. So this will be our parent object, which will be the click upgrades panel. This is where all of our upgrades are going to be. So we're going to do click upgrades panel. And since this is a game object, we're just going to do panel dot transform. What we could also do is change this game object to transform and then get rid of this dot transform. It's the exact same thing. So now we actually have an upgrade. We need to do something with this upgrade ID. So what we're going to do is upgrade dot upgrade ID. And we're going to set it to I, because our ID is going to go from zero one to two. And since we have three upgrades, we're going to do zero one two. So next we need to add this to our list. And this is very simple. All you do is click upgrades dot add. And then our upgrade temporary object. Basically what this does is that it adds a reference of this upgrade that we have created. So then we are able to change anything in here inside this list. So we're basically able to change any of the upgrades from our list, which is very handy. And so the issue with creating tons of upgrades inside of a scroll rect is that is that the size grows from the middle. So it stretches like that. So basically, if you have 20 upgrades, your list is going to be in the middle of all those upgrades. We want it to be on the top. So to fix that, we're going to access our scroll and we're going to look for a variable called normalized position. And we're going to set it to a new vector to zero and zero. So this is X and Y. So basically we're moving it to the very top. Now, in our click upgrade UI, we need to update all of this stuff. However, I don't want to update everything at once. I want to be able to update everything at once or a specific upgrade. So what we can do is put in a parameter and this will just be called our upgrade ID. And by default, we're going to set this to negative one. What we can do here is that if we set it to negative one, we don't have to put in a number in here as an argument, which is very nice because by default the negative one. So if it's negative one, we're going to loop through all the upgrades instead of having to do a separate for loop in certain places like for the start method here, I want to update all of the UI at once. So with this negative one here, I can basically check to see if our upgrade ID is equal to negative one. And if it is, then we are just going to use a for loop same thing as this. Except what we can do is click upgrades instead. And now we're going to be updating all of the UI in here, just the exact same way as this. So we can just copy and paste our old code, change the variables to click upgrades and access them at index I. So our level text will be that our level text will be our click upgrade level. Now the thing is that we actually have to convert this into a list because because this says this is valid, we can do dot two string to a list. But it's going to print out something we aren't really expecting. So we still need to access at index I. Now for a cost, I'm just going to simply convert this into string interpolation. So it looks something like this. So if you don't know what string interpolation is, basically what it does is if we have a string here, what we can do is use this dollar sign and put variables inside of this. So we can just do hello space. Click upgrade names at index zero, for example. So this is very clean and it's very readable as well. But we must use this dollar sign and we must use these curly braces and then put in the variable inside. Just thought I would let you guys know. And also we can get rid of this two string here or place it with colon F2. So the last thing we need to do is our name text. So we can get rid of this right here and just do click upgrade names at index I sweet. So what if we are actually accessing one upgrade at a time? So in our else here, we can just grab all of this, paste it in and replace I with our upgrade ID. You can see there's a little bit of repetition going on here. So what I can do is create a separate method inside of this update, click upgrade UI. I'm just going to call this update UI. And what I can do is just copy and paste all of this in here and add in a parameter called ID, for example, replace all the eyes with IDs. We can replace all of this with update UI at I, all of this with update UI at upgrade ID. Now it's much cleaner. We don't have to copy and paste the same thing twice. So let's clean up the code a bit by removing some of these curly braces here. And it makes it look much better. So this is the final UI method. If it's negative one, if we were wanting to update all the UI, it is going to loop through all of this right here, all of update UI, which will update the level text, the cost text, and the name text accordingly. Otherwise, if we want to update a specific one, we have this right here, where we're just going to upgrade based on whatever you put in. All right, now let's get on with the cost. So cost here is actually going to be very similar, except we're going to be adding our int upgrade ID parameter here. And our base cost is going to be at upgrade ID. Our cost molt is going to be also, you guessed it, add upgrade ID. This goes the exact same thing with our upgrade level, add index ID. So here you go. It's a bit long, but we have our cost. So our base cost times the power cost molt to the power of our click upgrade level. So I'm actually going to rename this to click upgrade cost, because we will have a production one using different arrays. So we're going to have to replace our cost here as well. And now we need our upgrade ID. We are just going to put an ID. Because that is what this parameter is. So now we have the voodoo magic, the buying part. So we're going to also, again, you guessed it, another upgrade ID. So we're going to do the exact same thing. We're going to check to see if our flash is greater than our cost. So we're just going to simply replace these cost methods and put in our upgrade ID arguments. And for adding the level, we are going to be accessing it at upgrade ID. And for updating our click upgrade UI, instead of updating all of them, we're going to be updating only the one at upgrade ID. Very nice. So it looks like we have everything done, except we still haven't used this base power yet. We will get there after one more thing. So how are we actually going to call this buy upgrade method? When we create all of these, it's just going to be an empty button just like this. When we click on it, it's not going to do anything. So what we need to do is open prefab. And we actually need to change this button method here. But we need to create a method first in our upgrade script. So this will just be a public void buy click upgrade. We may have different upgrades for production and stuff. And we will need to use different prefabs. But the magic of this is that we don't have to use everything in here. So for now, we're just going to be using buy click upgrades and you'll see what I mean when I get to production. And we don't need to take in any upgrade ID. We just need to call our upgrades manager dot instance dot buy upgrade. And in here, we're going to put in our upgrade ID. Eventually, we're going to put in a second argument determining if this is a click or production upgrade. And we will do that when the time comes. But for now, all I know is that when we call this buy click upgrade, it is going to buy the certain upgrade based on whatever upgrade ID that button is. And that is where assigning this upgrade ID comes to a very important role in this. And we can convert this into an expression body just to make it look cleaner. Sweet. So we have one more thing we need to do. And that is to fix this click power thing. So I'm going to make this into a statement body again, get rid of this line and let's start doing the math. So we're going to create a temporary variable called total. We're just going to set that to zero. And in order to add up all of our levels and our powers and all that, we're going to have to do this in a for loop. So we're going to basically be iterating through this entire click upgrade levels. And all we need to do is just add to the total. Our upgrades manager dot instance dot our base power at index. I multiplied by our data dot click upgrade level at index. I last but not least, we got to return that total. And there we go. That's all we need to do here. And in conclusion, this is what our script should look like. So we should all be caught up now. We're not done yet. We still have to do the UI. So I'm going to set that up real quick and I'll get back to you guys when I'm done. All right, guys, I am back. So I have my scroll here. I moved the buttons to the top and into the top, just a heads up. So the scroll here basically consists of an image and a scroll rect. We're going to play around with the settings in a second. And my panel has a content size fitter and a vertical layout group. So this will be used to add our upgrades and just sort them into a list very neatly. And our min size will basically just expand based on how many buttons we have inside. So let's start with our click upgrade school right here. Our content is the panel basically. So we're going to drag our click upgrades panel into the content slot. And we're going to disable our horizontal option because we are not going to be moving it from left to right. We will keep the vertical because we're moving it from up and down. And movement type elastic is where you can drag it past its top and bottom. And it moves back kind of like a refresh thing. But I personally like clamped. So basically it's locked in that range of motion. Basically you can't move it past a certain point. And inertia deceleration rate. I've talked about this before in one of my other videos. But basically it's deceleration rates. Basically changes like how fast it slows down when you let go of it. And scroll sensitivity is oddly really low. So I'm going to turn that up to like 30. And that is for your scroll sensitivity. Now for our viewport this is basically our scroll rect. And I will add a scroll bar after this. So in our panel I basically have these settings. So the horizontal fit is going to be unconstrained. And our vertical fit is going to be in size. So it's going to be the minimum size it can be based on whatever is inside of it. And the vertical layout group. And I added some padding here based on the prefabs here. So if we add a prefab here and copy and paste it, you could see it makes it in the list. But I added this left and right padding just to give it some space from the side. So if you need to adjust these settings, you can do that as well. And there's a five pixel space in between each of these upgrades. Basically with the child alignment you could just change any of these. And for upper left it basically just starts up the upper left corner, upper center. Basically it just centers all of them and starts from the top. And I'm just going to do upper center. So I do control child size because if we were to turn this off and drag a new upgrade in here, it may fit outside of this box here. So just be sure to turn that on if you want the upgrade to fit inside of this so you can't expand this. And the child force expand you just want to keep that enabled. So let's delete all of these. We still have one more thing to do and that is with our prefab. So let's open our prefab and let's go to our button and we need to assign a method here. So I'm going to drag our click upgrade button here and select upgrades and go down to buy click upgrade. So now anytime we drag in a click upgrade, it is going to include this by click upgrade, which is very neat. So now last thing we need to do with all this is to assign all of our UI and our upgrades manager. So in our click upgrades, we're going to leave that as empty because again, we do this in our script and our click upgrade prefab is going to be this right here. So we just drag that prefab into the slot. We have our scroll rect here and our transform, which is the panel. So we have everything done. Once we run this, we should see three upgrades with their corresponding values. Here we go. Perfect. We got no errors too. That's even better. So let's examine these real quick. So you can see that these are called clones. So we're creating a clone from a prefab. When we are instantiating something, we make a clone of something. We make a clone off of the original, which in our case is the prefab. So it's called clone. So you can see we have our level, our name, and they all say the correct names and costs, which is even better. So in each of these, you can see that the ID for the first one is zero and then one and then two. So if we were to click this one here, it's going to buy the second upgrade. If we bought this one here, it's going to bought the zero upgrade. Well, technically this is the first, second, third, but we're using zero based indexes. So the last thing we need to do is to actually try this out. But there's an issue here. You see this is plus zero flash. Well, it's because we forgot to add plus one, two hour click power. So in our click power here, we want to set total equal to one. And the reason why is because by default, when we have no upgrades, we're going to be adding by one flash. All right. So let's try this out. So we get our flash here. We can buy this upgrade. Oh, wonderful. Let's buy the second upgrade. So now we should get seven. Yes. Wonderful. And you want to test all of these upgrades, by the way. So let's test this one too. We should get 17. Nice. First try. I love when that happens. So as of recording this video, I actually forgot to do two things. And the first thing was to add the scroll bar here. And the second thing was to actually do something with a lot of the methods that we created. And that would be this upgrade check. So let's actually use this upgrade check real quick. And we're going to do this in our upgrade manager. So in the start upgrade manager script at the very bottom, what we're going to do is call this upgrade check. So we need to do methods dot upgrade check. And in here, we need to put in our list that we're going to check. So this first one would be controller dot instance dot data dot click upgrade level. And the second argument we need to put in is the size of the upgrade levels we need to put in. So we're going to stick with three. And we need to add a ref before this as well. So this is what it should look like. So now let's say you add an upgrade and you want it to be four. So what you need to do is actually go to your data here, your data constructor, set this capacity to four. And you're also going to need to set this length here and the upgrade check to four as well because we need to check to see if it's four or not. But yeah, we're going to stick with four. So let's implement the scroll bar real quick. So to do that, just right click on the scroll right here, go to UI and scroll bar. And you see you have a little scroll bar here. You can customize it however you'd like. I'm just going to keep mine basic, maybe adjust some of the images or click. So mine will look like this. This is the handle here. You can change this icon if you want to. And there's a sliding arrow which determines how far it will go. And the scroll bar, I'm going to rotate it by 90 degrees. So I'm going to put it like that, move it to the side, expand it and keep it however I'd like. So next in your scroll rec you want to drag this scroll bar into the vertical scroll bar here. And you want to check to see if this actually works for all resolutions. So let's go to a skinnier one. Oh yeah, so we have an issue here. So we actually need to stretch this real quick. So let's go back to our 1080p. Go to our scroll here and change the anchor to stretch. And now when you go to the skinnier one, it looks like this. But we still need to adjust the scroll bar. And since this is rotated 90 degrees, it doesn't stretch very well. So if you were to stretch it to the right side like this, it's going to look messy like that. So we're just going to have to make the scroll bar smaller and leave anchor to the right side. Now I have no idea why it does this, but Unity's rotation system is just completely screwed up. And stuff doesn't like to snap when you rotate things. And it's just very weird. But we're just going to have to make the scroll bar fit for every device until Unity solves this issue or until there's a common solution we can find on the internet. But I think this will be fine. So now if we go to our 1080p, it looks like that, which looks fine. So now when we add more upgrades, you could see that the scroll bar gets smaller. And when you adjust this value here, it's going to move this up and down. So now one more thing. Let's check to see if this works. Cool. So you see it moves up and down. However, we see a little issue here. It's outside of this scroll rect here. So we need to add a mask in order to fix that. And also you could see that it's still kind of clipping outside. So let's fix that. So what we're going to do is actually move the scroll bar outside. And we're going to have to stretch this panel here and then create a brand new empty. And this is where our click upgrades will go. So we're actually going to have to kind of shift things around. I'm going to expand this empty game object to the size of whatever this scroll is. And then I'm going to put the click upgrade scroll inside of this. And I'm going to make sure this click upgrades will also stretch. So we have our scroll in here and our panel in here. So let's add our scroll bar to the bottom of this right here. And then what we're going to do is move this image to our click upgrades. And so now there won't be an image inside of the scroll rect. So I'm going to now what we're going to do is make sure this panel is stretched as well. I'm going to stretch it to the top like that. And then we can move this scroll to the left until it fits perfectly like that. And to fix that overlapping issue like this, we need to apply a mask. So we're going to add something called a mask. And we also need to add an image. So we're going to actually turn off this image here by first of all, we need to actually move this image above the mask. And then we're going to turn off the show mask graphic like that. So there you go. It looks like this. And now you can see it's still kind of overlaps this green thing right here. So now to do that, you can just move this down just a tad bit like that. And then you can also do the same thing for the bottom. Now when we run, it looks just fine. So when we ran, we actually get this index out of range exception. And then it's probably because we have this upgrade check after we update the UI. So we want to put that as soon as possible. So I'm going to move that to the top. And we also have to add on to our upgrades here. So don't forget about that. So we're actually going to add one more. And we're just going to click power plus 25. And then the cost will be 1000. And the cost will be two. And the base power will be 25, for example. There you go. Now it runs pretty well. So you're going to have to do some adjusting to make sure this text looks well. And since this button is smaller than it was originally, you're just going to have to move things around inside the pre-vab to satisfy your needs. Anyways, guys, I hope you guys really enjoyed this video. And if you learned something new, I know this was very complex. We did so much in one video. This isn't very common. But I promise you that all the stuff we did in this video will make our lives much easier in the future. And as long as you guys understood most of it, or hopefully all of it, then this journey will be very easy for you guys. If you enjoyed this video and if you learned something new, make sure you leave a like. And if you have friends who want to learn something new as well, make sure you share this video with them. Subscribe to my channel if you're new. And turn on the bell for future notifications and live streams. If you want to support my channel, click the join button below or the Patreon in the description below. If you want to chat with me in the community, make sure you check out that discord in the description below. I hope everyone has a fabulous and productive day. Make sure you stay safe out there. Thank you very much for watching this video. And I'll catch you guys in the next one, which will be episode three production upgrades. Peace.