 Hello guys, it's Zach at CryptoGround here. Welcome back to another Unity tutorial video. I am really excited for this one today and I know a lot of people haven't been requesting this one, but today I'm going to be teaching you how to properly use a scroll rect. And I'm talking about scrolling panels, lists, all that good stuff. Now if you enjoyed this video make sure you smash the like button for the YouTube algorithm, subscribe to my channel if you're new, and especially turn on that bell for future notifications for live streams and videos. Are you a game developer, a gamer, or someone who wants to be either one of those in the future? Do you have the money to pay for a budget gaming PC but you don't have the skills to research the correct parts and build it on your own? Well say no more. This video is sponsored by my buddy over at Goblin PCs. Goblin PCs will build the gaming computer of your choice and ship it right to you. It's like buying a pre-built computer but someone's actually doing the right job and they know what they're doing and so you don't have to worry about all the heat problems unlike normal pre-builds. And I'm looking directly at overpowered scroll at Goblin PCs. They will provide you with high quality customer service and 24-7 support. So if you ever run into any issues with your gaming PC you could ship it right back to them and they'll fix it right up for you and they will cover the shipping cost as well. Be sure to buy your budget gaming PC all the links are in the description below. So as you can see here we are in the scene that I used for the upgrade panel. If you haven't watched that video I highly recommend you to check that out if you'll learn something pretty interesting. So we're just going to be using the same thing since I have everything set up. So my goal here is to create us a list right here we can scroll up and down. And I'm also going to show you how to make like a 3D like skill tree kind of a thing where you can drag it horizontally and vertically. And I'm going to show you all the different settings too. So fortunately we don't need to be doing any code today because I'm going to be doing this all within the scene right here because we could just do it right after we play it. But what we have here is our upgrade panel right here. So in here we have three upgrades and they're empty but they're just buttons but they're supposed to be upgrades. So we're going to make a list of them and we're going to have them scroll up and down. So how can we do this? Well all we're going to do here is right click on whatever object you want to like the parent object of the upgrades click on create empty. We're going to just call this our scroll. So let's just let's adjust the size of this. I want this to be wherever I want to you know stop displaying the upgrades. So it can be like a small box like this. And I'm going to show you why I don't want to extend this further down. I'll show you why. So for now I'm just going to drag it to the bottom of the screen like this. So let's create another game object in here to represent the panel. So now this is where we will adjust to the size of the list. Okay and we're going to do some pretty cool things with this. So for now let's just extend it a little bit further down so we can show the demonstration. In our scroll game object here we need to add a component called scroll erect. So you see here you see there's a bunch of settings here. And I'm going to go over all of them. But we need to initially do is assign our content in our viewport. So the content is what we're scrolling. So obviously that's the panel because everything's going to go in here. And the viewport is what we're viewing and that is the scroll. So some cool things here we can do is add an image and a mask component. And now you can see this is white image here. Before I do anything else I'm going to drag all three of these upgrades into the panel and I'm going to show you what happens if I move them anywhere. See they're hidden within this white box. So that's what I was talking about earlier with this. If you want to see only this much of the upgrades like that then you do it like that. If you want to see it like this okay that's fine too. But that's what that mask does. It pretty much just hides anything outside of this. So in order to get rid of this white box we simply just got to go into our color. Make sure you set RGB the the mode to RGB 0255 and we're going to set alpha to one. Now if we set it to zero we will we won't see anything. Okay because basically the image is hidden. And so we're just going to set the alpha to one. And as you can see we can't even see it. There are some organization things that we can do. Let's say we want to add more upgrades. So instead of manually doing okay minus 150 minus 10 in order to get that space here. What we can do here is add a component to our panel. We're going to call this a vertical layout group. So what will this do is automatically space out all of our game objects in here. And the cool thing is that it sets them in order too. So if you sort move this upgrade right here to the very top it will align it to the top as well which is very cool. You could adjust the spacing in between each upgrade. So for me I want to do 10 pixels. And you can do all this good stuff. But this is not the point of the video. I just wanted to address that this is a good way to add more upgrades. And if we continue to add more upgrades you could see that just stacks to the bottom. What we can also add to this vertical layout group is a content size fitter. So now what we can do with this is that we can expand this to fit all of our objects in here. We want to anchor this panel to the top. So we can stretch this downwards rather than the middle. So now we can change the vertical fit to min size. Cool so now whenever we add more upgrades it'll just keep adding on. So now let's actually play this and see what happens. Okay so I'm just going to open up the upgrades like so. And you can drag it. So you can see how you have this weird thing going on here. We can drag it left to right. If you scroll you can also see how it scrolls very slowly. We're going to try to fix this. And we can actually do this live in here. Now just be aware that this will not save once we exit play mode. So we're going to have to do this twice. But we can see what exactly we want inside play mode. In the scroll right here the scroll sensitivity sets one. Now I don't know why Unity ever thought a sensitivity one by default was a good idea. However we can change that to at least like 25. That is much better. Now you can only change it to like something like 50. Now this may be a little too much for some people. And that's why I recommend adding settings and stuff like that to adjust the scroll rec and you can change them all with a variable. So now what we can do is get rid of this left to right motion here. And what we do is toggle off horizontal. And we so we only have vertical scrolling which is up and down. So now when I get to the skill tree let's say you want a skill tree like in cokey clickers where you can move the where you can pane in a circle or move it in a 3D direction or not not a 3D direction but a 2D direction. You can turn on horizontal and you can do something like this. So let's adjust this panel real quick. Let's just make it really wide. And I'm just going to set it to the X is zero like that. So now what we can do here is that we can move this left to right like that. So it's kind of like a map kind of and you can see how that works with the selected how it's basically just moving this in a it moves it inside here. But what it does is that if this this out this border right here comes inside this scroll box here it automatically sets it because that's its limit it can't go past. So cool we can do that. But however I that's not the goal of this upgrade panel. So back to horizontal off sometimes you may not want to be able to scroll up like this. I personally don't like it because you can do weird things like this where you can try to scroll up as fast you can and then just you know how it just keeps moving. To get rid of that we want to set the movement type to clamped. So basically it's still you can still move it freely like this. But however it clamps so you can no longer drag up. And I prefer this just because of the just I don't know I just think it's more natural. So basically unrestricted is where it just can go on forever. That's pretty much what it means but we're going to keep it clamped. So we can also have inertia on or off. So if you have it off it basically doesn't slide. Okay which I think it's kind of awkward for mobile games to have something like this. So if we have inertia on we can change the deceleration rate. So let's say we want the deceleration rate to one. It basically slows down very slowly and you can see it just keeps moving. It will take forever to slow down. This was a really long list. If we set the deceleration rate to zero that's basically the same thing as turning inertia off. So let's say deceleration rate to 0.01. Okay you could see how it pretty much just slows down much faster. So you can honestly adjust this however you want. And this is actually a pretty good number. I like this. It looks kind of slick. So you can also add horizontal and vertical scroll bars which you can just do by adding a UI scroll bar here. And you can position them however you want and drag them to the specific box here. I'm not going to show that because that's kind of self-explanatory. Anyways guys if you enjoyed this video and if you learned something new make sure you smash the like button for the YouTube algorithm. It really helps my videos go well. And subscribe to my channel if you are new here. Turn on the bell for future notifications for videos and live streams. Anyways I'll catch you guys in the next one and thank you so much for watching. Have a great day and night. Peace.