Make A Game Like Pokemon in Unity | #53 Inventory UI Scrolling

hey everyone welcome to part 53 of my pokemon game series in unity so in this video we'll look at how to scroll the items list when we select different items so if i select different items you can see that it will scroll accordingly and we have these two arrows here indicating if there are more items above or below okay so we look at how to implement that special thanks to all my patreons for making this series possible by becoming a patreon you can support me and get access to the complete project files of the series the project files also contain some advanced features that are not covered on youtube so let's start the video so let's look at how to implement scrolling so first let me add more items to my inventory so that we have something to scroll so i'll go to my player and in the inventory i'll add more items so let me just change its size to something like 14. and let me just change the items and its count so i'll just assign different items randomly so in the actual game one item will only have one slot i have added more just so that we can test scrolling easily okay so we have more items now so let's run the game and see how it looks in the inventory ui okay so now we have the scroll bar in the inventory ui and we can scroll using it but that's not how we want to do it we want to scroll it when the user presses the up and down arrow keys instead of scrolling it using the mouse so to do that first let's look at how the scrolling works in store view so if we minimize the game window and i'll place it over here and i'll select our item list from here so it'll be inside the viewport so i'll select the item list actually we are inside the prefab we have selected from the scene so let me do that all right so i have selected the item list i'll double click on it to focus on that so let's look at how the scrolling works notice what happens here when i scroll so when i scroll down you can see that what it's doing is it's changing the y position of the item list so once again you can see this when i'm scrolling the y position of the item list is changing so if you want to scroll manually from the code all we have to do is set the y position of the item list from the code okay so whenever the selection changes we can also change the y position to handle scrolling so let's go to our inventory ui script and do that so here we already have the reference to the item list so we just have to set its position when the item selection changes so here is the code for item selection and whenever the item selection is updated we can also call another function to handle scrolling so i'll call function call handle scrolling and i'll create that function here so in this function first we have to calculate the scroll position based on the selected item right so we can get scroll position by multiplying the selected item with the height of the item slot okay so what's the height of the item slot if we look at our ui you can see that the height of each slot is 50. so we just have to multiply this with 50 to get the scroll position so i'll store this in a variable called scroll post of course we don't want to use a magic number like this because if we change the size from here then the code will break so instead let's get the height dynamically we can get that from the track transform component of the item slot i'll go to my item slot ui class and first i'll cache a reference to the direct transform from the awake and let's create a property that will return the height so we can get the height from direct transform dot correct dot height okay so now for scrolling we can use that height property instead of hard coding 50. so we have a list of slot ui and we can get the height from any one of them so i'll just play slot ui list of 0 dot height so we found the scroll position so next we can set that as the y position of the item list okay so to set the y position once again we have to get the red transform since these things are ui and inside the canvas we can't use a normal transform so we can get the plug transform by using get component and actually we can cache this from the awake so that get component will be called multiple times so i'll cache it from here all right so now we can say item district dot local position so we want to set the local position since it's a child object so we'll set this to new vector 2. and the x will be same as its previous position we only want to set the y so x will be its local position dot x itself and y will be our scroll position okay so this will handle the scrolling for us so let's go to unity and test that we should disable the inventory ui before we test all right so now if i change the selection you can see that it will automatically scroll awesome uh scrolling code is working so next we don't want to scroll every time the selection changes we want to do it just like how pokemon game does it so in pokemon games the scrolling won't happen when you select the first four items from the list and it'll only start scrolling once you get past the fifth item so that will be much better than scrolling from the top itself so we only want to scroll once it's past the fourth item and why is it the fourth item it's actually the half of the total items right totally we have eight items so once you have passed the first half then you can start scrolling so to achieve that here while calculating the scroll bus we can subtract the selected item by four and when we do that we should also clamp this so that it doesn't go below zero okay so i'll use mathif dot clamp over here and i'll just clamp it between zero and selector item just so that it doesn't go below zero so this will work but i don't like using magic numbers like this so four is actually the total items in viewport by two right so here i'll create a constant variable car items in viewport so in our case it's 8 and from here instead of using 4 we can use items in viewport by 2. all right so let's test this so the scrolling doesn't happen when i select these first four items and when i go past this fifth item you can see the scrolling starts okay and when we are in the bottom of the list even here the scrolling doesn't happen that's happening because scroll view won't allow you to scroll past a point because we have set its mode to clamped so yes the scrolling is working fine so we don't want the scroll bar anymore so we can go ahead and hide it so i'll go to the inventory ui and i'll select the scroll bar so if you try to deactivate this you won't be able to do that it's because the scroll view won't allow you to do that so we can't deactivate it but we just have to hide it from the scene right so for that we can just disable the image of it so this slowly disable the background image next we also have to go to the handle and disable its image also okay so now if you test the scroll bar should be no longer visible but there is one other problem there is another way to scroll using mouse we can simply click on the list and drag for scrolling so we should not allow this right so a simple way to block this is by disabling the mouse in your game so you can go to the game controller and in its awake function you can just disable the mouse since our game doesn't need mouse so to disable it we can say cursor dot lock state equal to cursor lock mode dot locked so this will lock the cursor and then to hide it we can say cursor dot visible equal to false so now when you run the game you won't be able to see the mouse and if you go here you don't have any way of scrolling using the mouse so to get the mouse back you'll have to press escape but even with that you won't be able to do anything in the game so you can go ahead and do that but i'm not gonna do that right now the reason is because since i'm making a tutorial i really need mouse to explain things so pressing escape each time would be a pain so i'm gonna remove this but you can keep it and disable the mouse so now the scrolling is working fine but since we remove the scroll bar we don't have a way of knowing if there are more items to scroll in the list so we can solve that by using two arrows on the top and bottom of the list so let's do that so first i'll import the art for it so inside art i'll create a folder called ui and i'll import the image for our arrow i'll put a link to download this in the description so let's go ahead and apply all the pixel art settings that we normally use so i'll change the pixel per unit to 16 i'll change the filter mode to point no filter and finally we don't want any competition so i'll set it to normal and hit apply so let's create an image for this in the inventory ui so i'll add an image and i'll call this up arrow okay and for the image i'll choose my arrow i'll place it over here i'll make it a bit smaller somewhere around 60 and i'll change its angle to top and let me just reposition this a bit all right so next i'm going to duplicate this to create the down arrow so this i'll place it over here i'll anchor it to the bottom and we need to change its direction right so for that we can rotate it by 180 degree around the z-axis okay so now it's facing down so now we should not always show this right we truly show this if there are more items above or below so we should determine from the script whether it should be shown or not so let's go to the inventory script i mean inventory ui script and first let's grab a reference to the up and down arrow image okay so i'll create two variables for that next inside handle scrolling whenever we scroll we have to determine whether or not to show these arrows so first i'll create a boolean call show up arrow so when should we show the up arrow we should show it if the selected item is greater than four right the scrolling starts when the selected item is greater than four and that means there are more items above so here i'll say selected item greater than 4 and we don't want to use 4 instead we want to use this value item in viewport by 2. if this is true then we want to show the up arrow and in the case of down arrow we only want to show it if selected item plus 4 is less than the total count in the item list so we can get the total count from the slot ui list so if this condition is true that means there are more items below that can be scrolled all right so next let's actually enable or disable the arrows based on these values so i'll say up arrow dot game object dot set active and i'll use the show up arrow value here i'll do the same for the down arrow okay so that's all we have to do let's go to unity and test this so first we have to assign the up and down arrow okay and now let's test it all right so initially you can see that the down arrow is visible and the up arrow is not but once i start scrolling down the up arrow is visible now and when we reach at the bottom of the list the down arrow will be hidden okay so our scrolling is working properly so i'll stop the video here before you leave make sure to leave a like on the video and consider subscribing to the channel that'll really help me out so i'll see you in the next video

Channel: Game Dev Experiments

Views: 1,300

Keywords: make a game like pokemon in unity, how to make a game like pokemon in unity, make pokemon in unity, make pokemon game in unity, unity inventory system, unity inventory tutorial, unity inventory system tutorial, unity scrollview, unity scrollbar

Id: 1QiDuXbDZfg

Length: 18min 49sec (1129 seconds)

Published: Sun Jun 20 2021