Grid Layout with Scroll View in Unity - Inventory System in Unity P4

in this video we are going to use scroll view to create a scrollable area inside our ui element in our inventory and we are going to see how to set it up so it works correctly and it doesn't allow us to go over the edges and to how to tweak the scroll bar to use our own assets okay let's get going let's continue we are going to create a scroll view so a view that allows us to scroll around our content of the inventory since not always we are going to have exactly this amount of items we may want to have more and we may want to scroll down to look up through each of those so to add a scroll view in unity we need to select the panel that we want to use as the parent for our scroll view we are going to right click here select the ui and we are going to select the scroll view element and basically this will create for us this panel with two scroll bars now first thing that i want to do is select the scroll view select direct transform and select the anchor preset and i will want to select alt shift so set the pivot and set the position and stretch it in the horizontal and vertical weight so that we have this filling in our inventory content panel now i know that i will want to only scroll downwards so i want to expand the scroll view and we are going to find the viewport the scroll bar horizontal and the vertical one i want to remove the horizontal one and the scroll view we are going to find that there is the component called scroll erect and it is a horizontal scroll bar is missing so what we want to do is uncheck the horizontal one and we are going to set the horizontal to be non for now that's it we are going to modify more options later but for now let's focus on the viewport this is the object that has a mask on it and this has a content object that basically is what our mask of the viewport will show so if the content is greater then our viewport will cut it and only show this part that is visible here that's what this mask component do now what i want to do is i want to put inside my content a grid layout so that for the inventory system that we are building the objects will be created in a great fashion so let's select our content let's add component let's type grid layout and we are going to see that we have our grid layout but nothing changes let's add the content right click create ui and let's select a maybe simple image for the test purpose now this image will be created here let's select our content and we have this grid layout group and grid layout group let's select the padding let's add it 20 20 20 20 so our images or elements that are inside our grid layout will appear inside the object here now i will want the cell size to be 150 by 150 basically this is how much our image will take inside our content element now if we select our image and use ctrl d to duplicate it we are going to see that those images will now be created in a grid like fashion now let's create a couple of those using the ctrl d and as you can see our images were hidden because our viewport uses this mask if we uncheck this it will appear that the additional images that go outside of the bounds of this viewport will appear we do not want that so let's leave the mask on but right now there is no spacing between those images so let's add spacing 20 and 20 and now we have a proper grid layout now if we press play let me set the maximize on play we are going to see that our scroll view doesn't behave like we want it to so let's start moving using the scroll i will i can see that i'm scrolling but very slowly and of course i can use my mouse to scroll down but i can sort of go above the last piece of our inventory and i can go downwards so let's stop it and what's going on here is that in our viewport we can also change some settings or rather in our scroll view we have the movement type elastic i want to set this to be clamped also i may want to set the inertia to be disabled and the scroll sensitivity to be something like 10 this should work much better in terms of the speed of scrolling up and down i also may want to select the visibility to be auto hide this should make our scroll bar hide but since the content is greater or bigger the size of the content is bigger than the viewport you're going to see that it doesn't hide and let me pause the game and we are going to decrease the size of this let me press play and as you can see the scroll bar is no more so there's there is this problem where if we set the content size to be too big the scroll bar will not auto hide so to fix this we are going to select the viewport element and to this we are going to add a component called horizontal layout group and if we add it strange things will happen with our grid layout to fix this let's select the control child size in our horizontal layout group width and height and now our content will take as much space as its content so if we remove some images this will the content size will be as much as the panel here but if we increase it so let me ctrl z to add it okay now we're going to see that the content the size the height of this is greater so now if i press play we are going to see that the scroll bar is visible and it works pretty nice and i cannot go above or below the list of my items here but as well if i delete some of those items we are going to see that if we now press play we are not going to see the scroll bar it will be hidden now if i of course select on my image and duplicate this okay let me uncheck it too small amount of those images let me add some more okay and now our scroll bar is back visible okay so basically that's how we would use the scroll view to create the scroll bar that allows us to scroll up and down the list of our items in the inventory now before we go to the next video about filling in the description part and creating actually the image or the panel that will represent our item let's select our viewport and actually not the viewport but the scroll bar vertical and i want to change the image of our scroll bar i will select the sliding area and i will select the handle and it contains the image here i will select the source image and for me it will be gui and we are going to select underscore 1 and this will be my scroll handle so if i now select my content and add some more images using ctrl d to duplicate those we are going to see now if i press play and of course you can tweak the image behind this now i do not have that many images but of course we can select our vertical uh scroll bar vertical and select the image component and let's select let's type g ui and we are going to select maybe this zero element and now we should see that this is pretty terrible we can increase the pixel uh per unit multiplier to decrease the border size so now if we press play we should see that our scroll bar is defined by our own artwork okay see you in the next video

Channel: Sunny Valley Studio

Views: 25,714

Keywords: Using Grid Layout with Scroll View, unity how to grid layout, unity grid layout, unity ui grid, unity scroll view, unity scrollview, unity gridlayout, unity ui scrollbar, unity scroll bar, unity grid layout group, grid layout tutorial

Id: IuSAem2UOXw

Length: 8min 9sec (489 seconds)

Published: Fri Feb 04 2022