 Hello everyone. This is Zach at Crypto grounds here. Welcome back to another tutorial today. I'm going to be showing you how to make this cool transition. This open this toggle upgrade panel. If you enjoyed this video today, make sure you smash the like button, subscribe to my channel if you're new and turn on notifications future live streams and videos. Anyway, so this is what the upgrade panel looks like. So basically you can just open and close it. You've probably seen this in the games like top tycoon before where you can just close this you have your upgrades here and you can close it and you just get back to your main game. Let's get right to the tutorial. Okay, so here we have our interface started already. There's no functionality at all in this game. It's just a supposed clicking button currency abilities right here and your upgrade panel, which can open and close. And we have a three buttons down here. Okay. So the goal here is to create this upgrade panel here and allow this to be able to open and close. So and also expand this view. So we have this panel right here. So basically what we're going to do is that we're going to slide this down once we click on it. So it'll be right here. And then the scenery will drag along with it like this. Okay. So probably not exactly like this because this looks kind of weird, but you know what I mean. So this will not be animation based. We're going to do this all inside our code, which is something I usually don't do, but I think this is better practice. So anyways, let's just create a script. Now I created an entire new script called upgrade panel. But if you have a preexisting one, you can always use that, but I don't have any other code. So I'm just going to create a new script and work from here. So some kind of important measures we need to we need to measure is the dimensions and where everything is. So what I'm going to do here is we could see that I'm using a stretch anchor like this, where it's from left to right. And I specifically have the boxes like right here. So basically it stretches from left to right, but not up and down. Because if we change our resolution, it's going to be in the middle, like that's why I want it to like that. So it's still in the middle. You can see the box still in the middle like that. However, if we move this panel downwards, right now we could see that it has the same anchor right now. But it has a bunch of weird numbers here. So if we set that to zero, actually, that won't make a big difference. Yeah. So right now we have zero, zero, zero, and then negative 34 around that for the bottom right here. And the only reason why is because of this curve thing right here. So actually, that I think that might work. Okay, that works. But this upgrade panel is going to move up and down. So let's say we move this down under the canvas right here. So its current position should be below this canvas. So it should be something around that. And this is about, I think that's half the height of this canvas, which is 1420 divided by 2, and that's 710. So this panel right here is going to be positioned exactly at left, zero, top, 710, right, zero, bottom, 710. Again, this may this may depend on what your canvas size is. So like if we change this resolution, I believe this would change. Yeah, so things will look a little different. And this panel will be kind of higher up. So we're going to have to find the size, the height of this canvas, and work away from there. So we already know that the we're gonna have a format something right here. All right, so I have all my measurements here. And I just want you to remember that this is the stretch I'm using. So make sure using this in order to get these exact numbers. So basically how I, oops, how I did this is, let me move this back. Come on, there we go. So the panel right here, when it's hidden, which is when it's under the scene, the top is 710, which is again half the canvas size. And the bottom is negative 710. Okay, so we're basically shifting these by the half the height of the canvas. But if it's shown, then everything is zero, like that. Now for the scenery here, we just have to move one, which is the bottom, which we need to shift that down by 710. Like that. So then once we move this panel once again, negative 710 for the bottom and 710 for the top, then we get something like this. So obviously, the abilities don't look quite the best. I might you'll just have to adjust that on your own. But for example, it'll just look something like this. Alright, so in our upgrade panel, we're going to need two things we're going to we're going to need actually we're going to need three things we're going to need our original canvas. We can just call this our just canvas you can name it whatever you'd like. We need to gain objects we need our scenery. And we need our or we need our upgrade panel or this this can be this is a panel for like upgrades, boosters and prestige. So I'm just going to call it an upgrade panel for now, because that's just what's shown in the scene. So we have three things here, the canvas, the scenery, and the upgrade panel. And I'm not really sure why this is read because oh, because the class is called upgrade panel. I'm just going to call this panel, I guess. All right, so next I'm going to make up an update method here. And this is to grab the height of the canvas. So I'm going to make a temporary variable called height. And this is a little more complicated than it should be. But this is canvas game objects. So we're trying to access a game object. Get component. So we're trying to access a certain component in our game object and the game point, the game. Sorry, they could the component that we're trying to access is the rec transform. Now, if you go to here and select your canvas, you'll see that there's a rec transform here. So we're trying to access this component here. So we do now I'm going to keep this on the side. Rec transform inside these right here. And after that, you just do rec dot height. Okay, so now we have access to the height. And rec is the the rec transform object itself. And we're trying to access this height right here. So let's let's give this a shot. Let's do print height and see if we actually get this. Oh, yes, I want to apply our upgrade panel script right here. Again, if you have if you're using the same script, then you clearly just add on to your current objects, but we're going to drag drag in our canvas, our scenery and our panel. So now when we save and we go to our console right here, we should be able to see 1420 perfect. So we are grabbing our height right here, exactly what we wanted. So that just makes our life a lot easier. And now we don't have to continuously keep grabbing this height, we can only do this once, which is at the very start of your game. So we're just going to do that instead. So we're going to do this in the start method, because I really don't feel like calculating the height, every frame is a great idea, especially since it's not changing ever. I mean, the only thing I can know when it's changing is when you're rotating the screen. So if you're rotating the screen, you can have some kind of checker to determine if it's being rotated or not and then check for the height. However, we're just going to do this all in here. And we're going to make a float, a public float right here, instead of a temporary variable. And we're just going to call this canvas height. Now, obviously, we could just grab it like this every time, but I'd rather just have a variable just to type this all out over and over again. So now let's copy and paste this into the start method. And here we go. So we have the canvas height, which is equal to canvas dot game object dot get component of wrecked transform dot wrecked dot height. There we go. That's a kind of that's kind of a mouthful. So we really don't need to do anything for the update in this video. In all honesty, unless you're wanting to do transitions, which I'm not going to do, I'm just going to have the simple open and close. However, well, we're going to have two methods called open and close open panel and close panel. Okay, so when we open this up, we want to go from hidden to shown. So we want we want to make sure that at the start of the game, it's hidden. So we'll do this in the start. So let's start with our panel here. Alright, so I just did some double check. And apparently, this is different than what I did last time in the past. But so I want to change these game objects to wrecked transforms. And this will just kind of save a little bit of typing here. And what we're going to do is we're going to set this panel to hidden states. So what we do here is panel dot anchored position equals new vector two and zero negative 720. So basically what this will do is we'll shift it downwards by 720 10 pixels. Sorry, I want this meant to be 710. And that's exactly what we want to see. Alright, so now we're going to do is we're going to make our scenery show as fully shown, which is where it stretches the full screen. And that's where this hidden thing is. So basically, we just make B 710. So this is a little more stuff we have to do. So first of all, let's start with the anchored position. Or actually start with something called size delta. So we want to set the size because right now the size is 355 pixels, because that's half of 710. So we want to set this vector two to zero and three area 710 like that. Alright, so now we're going to make this 710 height panel. And for the anchor position, I can't type sorry, we're going to shift down by zero and negative 355 instead. So now because it's stretching where it's at. So we're so since it's at 355 right now, we're basically doubling the height. So that means we need to shift at 355 more here, I can I can show you without the anchored position. Let's see what happens without it. So let's play. So without this, it will you see that we still need to shift this down by 355. Also, don't forget to drag your scenery and your panel in here, if you haven't already. So now if we add this right here, it should see it's in the correct position. We also need to apply the canvas height. Cool. So the panel is in the correct spot, and the scenery is in its correct spot too. Now when we adjust the resolution, obviously things aren't going to match up because we still have to find the canvas height. And that's where we adjust. That's where we try to figure out, Okay, when does the canvas height change? However, if we leave it like this, and we replace these numbers with canvas height divided by two, canvas height divided by two. And then this one right here is canvas height divided by four, because it's 355 to half of 710. Oh, that's divided by four. So now we should see that this should be able to work with any canvas once we load it. And also if we put this update, you could see it fix itself to any resolution. See now it works with the change resolution. And if we change it back to 640 by 1136, you could see that's still a little bit bigger. But if we go back in and play, everything should look great. Perfect. So our next step here is to switch between these. So we have our open panel, and we have our closed panel. So right now, we are closing. So close is pretty simple, we can just copy and paste all of this into our closed panel, and we're pretty good. And in fact, we can actually replace all this with closed panel, because we want to keep the panel closed. Now when we open the panel, we're going to paste everything back in here. However, we need to check our measurements here. So let's start with the panel here, which is right here. So hit in it looks like this. However, when it's shown, we want everything to be zero. So that's pretty simple, we just replace this negative canvas height divided by two with zero. Now for our scenery, we are currently like this. We want to do the exact same thing, we want the size delta to still be the exact same. So I don't think this will change. So we just need to set everything to zero. So I can get rid of the size delta here, right here. And just replace this negative canvas height divided by four with zero. So now when we save it, everything should switch. And we need to assign some buttons here too. So in our panel, we have a box, an image, all right, right here. So this is our button right here. We need to add a button components, because it's just an image right now. So in our button, we add, drag our upgrade panel object, click on no function, upgrade panel, and we want to close this panel. And any of these buns down here can be can be the just an open button button. Okay, so I have three buttons. So I'm just going to select them all, apply another button components, add drag the upgrade panel, and apply the open panel method. Cool. So now once we click on these, it should open. And once we click on this, it should close. Let's check it out. And also I'm going to drag the side of the way because it looks kind of awkward. So right now it's closed. But if we click on that, it should open, close, open, close, open, close. Cool. We did it. It's pretty simple. Now you don't have to have this background move. You can keep it full sized like this if you want to. It makes things simpler. And if you only want this to move, you know, you can do that if you want. However, I kind of like this, but also you can do smooth transitions as well. And that will require quite a bit of an if statements to figure out, because you're basically trying to calculate the difference between these two, you want actually let's do this, let's actually add this. So we're going to create an update method here. And once we open this panel, we want to be able to transition from this to this. Okay. So we need to calculate, we need to have two variables here. And really the only two we're changing here is this one right here. And this one right here. So we need to set two floats. And this is the, I would say the result, result height, I guess, I don't really know any good names for this one, but I'm just gonna say result height and result height to, because I don't want to this garbage here. Okay, so basically what we're trying to do is to put this in the update method. And instead, we want this result height to be zero. Okay, so we want this to be zero. And we also want result height two to be zero in the open panel. And we can honest, I'm just gonna comment these out because I don't want to get rid of them right now. And in the closed panel, we want result height one to be negative canvas height divided by two. And result height two is equal to negative canvas height divided by four. So now again, I can just comment these out because I really don't want to do anything with these. Basically, we're not changing anything here, we're doing this all in update method. Again, this could be a little more beefy on your CPU if you do this a lot. But however, we're just going to do this all in an if statement and we only have one of these. So it's not like the end of the world. And you could also do animations to if you'd like. But I think this would be easier because you can manage the height and all that much, much easier. You actually have like the numbers right in front of you. So also, I wanted to have I want to add a bull, actually an end. Now I want to indicate what we're actually doing. So I'm gonna call this panel movement. So when it's idle, it's gonna be zero when it's opening, it's gonna be one and when it's closing, it's gonna be two. So in open, we're gonna set this to one. And in close, we're gonna set this to two. So we're gonna, we're gonna see if panel, yeah, yeah, yeah. Okay, so if panel, man, if panel movement is equal to is not equal to zero, then we're going to be updating our positions here. So basically when it's not doing anything, then when it's not doing anything, we're just not going to update this position because it's kind of pointless because it's not moving. So why do we need to recalculate it? Alrighty, so now in here, we want to do that. Now we want to actually adjust these result heights. So if we set our result height to one, we basically want to take our I forgot a variable. I forgot to like the actual height. Okay, so we want to also have two floats called actual height one and actual height two. So basically, this is the one that we're actually changing to reach that result height. So now we're going to put in here. So if panel movement is one, we are going to be setting changing this actual height one from this cap, this result height from here back to zero. So this is a negative number. So we need to add on to this. So actual height is going to be plus equals, we're just going to do a speed of like, maybe 100 times dot delta time. So now what we'll do is it'll basically shift upwards. Because we know we're actually so yeah, we're opening. So basically it's going to shift. Yeah, we're opening. Yeah. So basically right now it's going to move 100 pixels up per seconds. So this will take about seven seconds. So we want to speed that up. I want this to be exactly one second transition. And you can do some cool stuff, you can have it like go in like a like a weird motion if you want, you can do all kinds of stuff here, like a sine wave, you can have it go if you want to. And the actual height two will do the exact same thing. Except it will be less because it's divided by four. So this is actually going to be canvas height instead. Okay, so we're going to add plus equals canvas height divided by two times time dot delta time. So basically it's going to still have that one second transition, but it's moving at half the speed, since we have to adjust it half less than the actual height. So now in here, we want to actually check to see if these are greater than what we actually want it to be. So if actual height, so right now it's less than so we're basically going from this negative to positive so or the zero. So if actual height is greater than or equal than zero, we're going to set this actual height one to zero. And we're going to set this panel movement to zero as well, because we're not going to be doing anything. And we can also, yeah, we need to put this at the very end, because also won't update it. Because if we set panel movement to zero, it's basically never going to call this ever again, even though we changed the height after we set it. So we also can set this since they're both moving at the same rate, we can set actual height. Actual height two is equal to zero as well. And that's actually pretty much result height as well. So we can replace these result height. Okay, I know this is a little complex. I'm trying something different. I'm trying something unique. So now we have it moving upwards, but we need to have it move downwards as well. Okay, so we're going to make another if statement. else if panel movement is equal to zero or two. Then we're going to basically be subtracting. We're going to be subtracting the height instead. Okay. So now in this if statement here, we need to basically check to see if it's less than this result height, because it's going negative and the result height is already negative. So it's going to keep going negative right there like that. Okay, I think that's all we need to do. Let's let's try this. It may not work. It may work. I hope so. Oh man, yeah, it didn't work. That's a bummer. Where'd it go? Is it like gone? Or is it still here? Okay, it's still here. I believe it's something to do with this thing right here. So I'm going to debug and I'm going to figure this out. Okay, so one thing I forgot to do is to set the actual height in here as well. So basically we want to set it to what this currently is in closed panel. So basically we're copying pasting this result height here and replacing it with the actual height. And yeah, this will be actual height. And same thing goes here. Actual height will be set to zero because that's what the current position is right now. And we're changing it to this result height. And now we should see some action here. Okay, so it looks like it looks like it's moving. But I think we're not adjusting anything. Yeah, it's this right here. We forgot to set the actual height right here. So the actual height one belongs to the panel and actual two belongs to the scenery. Okay. Cool. So now we know that this actually adjusts and you can see it's not just going on forever. It actually works. So let's see it in action. Once this actually imports. Okay, so nothing was clearly happening. Oh, that's cool. I wasn't expecting that. Cool. So it works. And you can click this again. Again, you can add if statements to prevent this from happening. But otherwise, I think this looks great. It has a really smooth transition. You can do some like exponential or fancy stuff to make this really smooth. And this is no animation. So this is much, much more optimized doing it yourself. And of course, our unity plugins where you can do this in a very easier way than this. But you know, it's always fun to try to do something on your own. And yeah, you can just fix some of these. You can fix some of these. What do they call the abilities here since they aren't really kind of positioned correctly. But it's okay. I think they turned out well. Anyways, if you're learning something new and if you enjoyed this video, make sure you smash the like button, subscribe to my channel if you're new and turn on those notifications for future live streams and videos. Anyways, I see you next one. And thank you for watching. Have a great night. Peace.