Unity 2D Platformer Tutorial 17 - Inventory System + Inventory UI

hello everybody welcome to a new episode of unity 2d tutorials in this episode we're going to talk about our inventory system how can i pick up items and how can i point at them so we can see what items have we picked up let's go we're going to build a simple inventory system that can contain four items it can be more depending on your game or you're going to build four items and what we're going to do in this episode is simply create the base script of this inventory system and pick up those items showcasing them in that ui that we're going to build as well so let's start first thing we need to do is we need to use let's start with the graphics we need to use an assets that i got from that unity asset stores it's a free asset pack that's basically a it's a pixel art ui assets which you can find in the like it's barely visible in here but we're going to see how it looks in the whole basic buttons and stuff you can find the link for it in the description below so let's start by creating the ui element let's go and make an object inside our ui let's call it an inventory window so with this we have to make it stretch it to be fully done and uh i'm gonna go with a simple ui element like uh you know nothing too fancy nothing too complicated let me just just resize this too i don't know 720 okay so the whole thing will be set up uh i mean the design is all up to you but i'm gonna go with a simple one and that one will be like this so we'll have the word here inventory right inventory yeah something here this is going to be the title of the thing and we'll have small window here and it's gonna contain i'm gonna let's make it six pieces it's fine actually you know what let's make it six pieces let's contain this and here on the left side we'll make an empty ui element which will contain the both image and the title of the thing sorry the title image and the title so that's that and that's it and then we can exit and enter as much as you want and you can use the mouse drop sorry the mouse which will enable the thing in here so if you're not hovering on anything it's going to be empty and if you do it's going to be displayed so that's that let's go and start doing first of it first of all i want to make as as before the dim screen so let me actually copy this one and put it here that's a bit useful and first of all we're going to create the text on top so the text on top will be let's make this let's go here let's make this one so it's actually clamped on the top part make this probably 75 i guess in inventory first of all the light the color is not proper so we make it white let's make it 40 i guess feel free to put to pick up your own font and all i tend to make any uh ui elements that is not pressable or clickable the raycast target disabled so if you disable this it will not register any clicks so it actually if you click on it it will like go through it if you have something bad it will click that thing behind but i'm going to keep the dim that's fine because it's not gonna we don't want to click anywhere behind all right so we've got the title inventory title the next thing we need we need to make items panel for the alignment of the ui it's all the easiest way to do this is by um assigning the anchors and it's all depend depends on how you want to play the game whether they're going to be landscape or portrait but now we have portrait i'm going to have to work with a much more like a two-thirds with the you know like two-thirds of the screen almost and it's going to take all of it so let's go with point three now point four to point and from 0.2 0.3 to 0.7 i guess so let's see how this works actually looks so we add an image into this game object so it has visuals so we gotta we got several backgrounds in here like background with a grounded i'm gonna go with the bright one i'll give you that board as well there's a lot of cool stuff in here i'm gonna go with uh yeah i think uh this one this one is more brighter and of course it's sliced because it's uh so you can stretch it as much as you want but you know what uh i don't like this thing in here you know what it's fine yeah let's have it let's have it that's fine let's have this one and let's do this thing where we uh assign the placements of the items i still feel that this thing is not high enough so let's make 0.2 okay so there's multiple ways of assigning this stuff if you want to make more dynamic stuff we can use the uh what's it called let me actually show you example let's let's say we have three elements in here one is this one is and this is this so they're like three different stuff white let's make it slightly darker so it can be visible actually make it bluish you can either do this manually by putting them in a place with anchoring them properly or you can have the layout horizon the grid or the horizontal let's go with the grid so what we're gonna do we're gonna have to assign here the orientation i think let's just just start the corner from top left and hmm there's some stuff so child element let's go with middle center that's how we need it flexible let's go fixable column count we need three okay and then what we need is the cell size i think 100 is good we just need to make more spacing 25 is fine i guess i think the size is too big 75 and let's add more of them of course we need to make spacing also for the y 40 by yeah i think uh i think it's fine like if we change the scale in here we're gonna have some issues so for for this what we need to do we need to make sure that let's put it back at 60.9 let's make sure that the width is set like this so in here we make sure that even if the screen becomes narrower the stuff don't go outside from the width okay these things you have to keep on testing them to know what's how it happens so i'm going to go with this initial setup you can play with this as much as you want to have your own setup what we're going to do is we're going to create a an image and that image is going to have like it's going to become um some sort of the outline you know what i mean like um it's the the place that will be putting the image of the item inside whenever we pick one so let's see what we have in here we should have something that relates to uh let's go with this this one looks like this old one is black a white and then the item itself is going to be more darker and let's make uh let's create item one background okay and then what we're going to create inside of it is another image and make it full but not exactly full because we don't want it to cover the whole thing so we're going to add up some margin here i think that looks fine and in here we're going to create item one think that's it that i don't want image okay item one i think that's fine and here we can call him so with this we can let's let me do this thing where i can assign it something and then put put that thing um simple and preserved so what this does i can make sure that it's always like this what we're gonna do is we're gonna i put this as just a placeholder but i want this feature to become preserved because i don't want stuff to be stretched that being said uh we're not going to have this visible if there's no item so by default we're going to create in the script mechanic that hides this placeholder if we have nothing otherwise adam so we have six pieces so we have item two item three and the naming make sure it's fine item five and item six so this is good the next thing we should do is we should create let me just duplicate this and call item description i'm gonna have to get rid of the grid because i can use it and get rid of this and instead of having this from four to nine from point four to point nine we can have this from 0.1 to 0.3.5 i think that would be enough and i'm going to have to get this the darker background just okay yeah i'm gonna give this the darker layout wait i think i need to make it similar to this one because this one looks more pointy edged whereas this one is not you know what i like it my just just to diversify stuff so i think description inside we're gonna have to have two elements of course item image and it's easier if we uh put it keep it in the middle you know what's it's much nicer let's put this placeholder anything honestly normal and preserved so let's make it let's anchor it i think it's much better to anchor this stuff so point two to point eight and then point two to point eight the height is not proper i suppose let's make the height less no let's keep keep it as it is i wanted this to be slightly lower so it's 0.2 to 0.7 okay so we've got the item image and then we will put this on top while putting this in the middle everything and make sure the anchor is one so it's actually last on the top make sure the height is let's go with 50 and the color is i think let's go with white and outlined so outlines just makes the lights that cut the text looks much nicer one thing i need i can do is do it this way this way i can have a high like more viewable elements so here we're going to go item name what i'm going to do is i think i'm thinking about keeping this hidden as an all you know it would look nice but this will seem to be floating on the right by itself so but it's fine design wise this is just a mock-up so it needs to work that's all so right now we've got this thing all set up let's save our scene and start with a script so what we need to do we need to create a script called inventory system and then we open this up all right we're here what we're going to do is i'm going to explain what the script is going to include and do so we've had from before the interaction system which implemented the pickup and examine so what we're going to do we're going to use the pickup thing the interaction but instead instead of saving it in the dummy list that we used here we used to pick up the item here pick it up and just save it in a list instead of putting here we're going to save it in the list inside the inventory system first thing we need is let me just delete this stuff first we need to create a public list that's called game object items the idea of saving game objects in a list or items and list it it's all debatable everybody have their own stuff some of them they have dynamic items some of them they have fixed items in the game some of the different approach what i do is i use the same game object and i just store it in you know in this in the list and i use it in my items in my inventory so instead of having a prefab setup this is an easy way we'll see how it works in a bit so first thing we're going to need is a list of items picked up that's simple the next thing is we need to create the ui reference element so we need to do is and inventory system window public game object so since we're inside the inventory system i don't have to write inventory system let me call ui window the next thing is i'm going to create a list of images so before we do images we have to actually import the ui library so we create a list of images which going to be items let's have a proper naming for it and then i'm going to call items images okay and the next one will be public header ui main item items section but in here i'm going to create item description and here we're going to have to have the game object of ui scription window let's make this capital and the next thing we need to have the image of the description item so we're gonna go with image description image and text which we're gonna put the title of the item this crypt title okay so let's recap what we have here we got ourselves a list of items that we're going to pick up we've got the main ui object of the domain ui window we've got ourselves the images of each item that we have and then last but not least we've got the elements of the description window let's do what we had before in here so instead of calling adding stuff in here we're going to delete the list that we have before and remove the others and make sure that we have issues in here so we go public devoid pick up and we pass a game object item so what this gonna do is it's gonna simply add actually first of all i have to initiate this view it's going to add another another item to the whole list so far so good so let's finish from here called let's call them inventory manager system by using defined object by type and go with pickup and pass along the item itself okay but i'd rather do it to do this in a different way because instead of calling this part in here we can call directly that inventory system because we're just making the relay and if you go to the item this is what i mean so for the pickup items we instead of calling the the interaction system and going to the inventory system we can right away go to the inventory system directly and i pass along the game object itself and yep that's it that's for this one we have the item picked up add the item to the items list okay so uh if we go start testing right now we're gonna have the same results that we had from the previous episodes but i just want to make sure it works so right now we have uh we've we've have set up stuff from before like this item in here that does events so i'm not gonna i'm gonna disable it disable the ego have a lever in here and the lever will pick up and it's going to say a lever weird lever right and its name is lever so let's save it up put this thing in here and first of all before we start we have to import the inventory system oh no here to the fox and as always bring this up up good let's make sure we reference everything so the ui window is this and one good um hint if you want to drag and drop a lot of items you can because if you click this see this one goes away the easiest way to do is to lock the ui inspector window but this means it keeps this in here whatever you press anywhere this one rings on the fox that i locked it in so i'm going to drag and drop the images of each of the items in the ui elements and drag and drop them inside oh wait it's should drag this up a bit okay we should put them in here you should drag them inside the image item images and then when you unlock it goes back to whatever you were holding right now so that's cool and uh we've got our images in the ui we've got the ui window and next we have to do the description the description is this the item image is this and the text is this let me name this item description good so we're good we're going to have right now is instead of saving this item inside the interaction system is going to save in here in the items of the inventory system so if i click here that's it we've got ourselves a lever that's amazing so what i'm going to do right now we're going to show it inside the ui element to do this we need to do a method which can update the ui so let's go make this one call it update ui i mean the naming is up to you what this does is refresh the ui elements in the inventory window so that what this means is if we've got no items it's gonna hide all the images inside the container of all of these six pieces here see it's gonna hide these items in here like what i mean is these pictures so by default they're hidden but we're gonna make sure they're always hidden if there's nothing and if we got one item it's gonna pop up we're gonna go like it's gonna pop up in here the second one in here third fourth fifth and sixth so it's going to be one two three four five six that's easy we're gonna go and do this thing if items that count equals zero actually you know what let's do the for loop so we add into four integer equals i zero we start from zero and the count will be um account will be exactly how many items we have this part this number of items items that images e less than items images just that length okay all right so what this gonna do is it's gonna go six times inside these items and uh just do stuff to it so before we actually start writing things let's let's write the logic of what's going to happen in here for each item in the items list show it in the respec respective slot in the items images so what this translates into that we need to go through these items and then show them in the same index of this one for example if the first item like which is index of zero we put it in a zero image here one one so the best approach is instead of going through these items elements we go through the actual items itself what this means is if we have one item we only do this thing once actually the list has a count but where the array has length but before we do all this stuff we have to make a small method called like hide hide the height all right what this does i like to make this kind of small helper scripts hide all the items images i item ui images so we're gonna do we're gonna go for each i'm gonna hide all the images that's it for each let's go over the variable i in ah images items images we go i that set active what what oh we have images sorry i the game object that sit active and false okay so with this mixture mixture off is that no matter what we hide everything so let's call this at the start so we can make sure that everything is hidden and then we show the items one by one if we have them so let's say if we have no items this thing will will not run but it has one item it will run once so we'll do and do this thing the we we check these items one by one and then we assign each item to respective ui image so we go like do this items images and we have the same identifier which is i here dot sprite equals and then we have to assign the image from the item itself so since the item is a game object we need to access the item script this one because this item script includes the description and image and of course the name of the whole thing so we're going to do this thing we're going to add this item in here and put the sprite belongs to items items i of course don't get component sprite i'm sorry that's why wait was it sprite or image so the item it's this item thing the lever is basically a 2d sprite so we're going to do is we're going to go sprite renderer that's private so we've done a lot of writing and so few testing we're gonna go update ui so what this does this make sure that whenever we add an item we update the whole thing let's go to the one part where we have to open the whole thing so let's go with update we have to get an input an input means that decide which button is the items i'm going to go with i you know because it's the simplest one so we're going to say is if input that get key down key code i let's write something here call it right toggle and then sorry so there's one thing about inventories a lot of games when you open inventory the player cannot move right i'm going to apply this in here because i don't want the player to be moving around while we have our inventory open for that to work we're going to have to create more stuff general fields so let's make a boolean flag indicates if the inventory is open or not let's make a boolean is on okay now let's make it on or is open makes much more sense so it's open by default it's false because it's not open up so we'll go with toggle toggle inventory and in here we're gonna do this thing we're gonna go is on equal so it's open equals opposite of is open so that just you know flips it back and forth between true and false and then we apply what we need so what we do here is it's going to be simple as uh let's actually make this public because we're gonna we're gonna be using it from outside i'm gonna show you where and then we go with ui window that's it active is open so if it's on like if it's true this shows up if it's false it doesn't show up right so that's good so what we have here we have all this stuff and then what we can do right now is we can just start testing let's go down here just make sure everything's fine everything seems to be fine so let's give a test click i and see how it actually opens up see it opens up right now we can move because we didn't restrict it we open and close it that's amazing let's restrict the movement so let's go back to our fox script where we had this method that restricts the movement that can move that's it we've used the interaction system for it before like while examining object you can't move we'll use the same thing in here we'll call if find object by type and we go with inventory system is open so if it's so if the inventory is open we make the can false so with this we can make sure that we can't move while the inventory is on simple mechanic so let's try yeah we can move you can jump nothing that's amazing now we can so we're almost there the the only thing left is showing the item in the items list so right now we've implemented the whole showing the image thing so if i click i there's nothing here right if i come in here and i click e we picked it up if i click i something didn't show oh yeah it's my bad so i assigned the images but i did not enable them so what we what we do here like everything is hidden by default right false but whenever we iterate in each item we have to enable the items image itself it's active true so that makes sure only to show that picked up items but if you have an item everything is going to be hidden by default right okay it's move click click i and that's it we've got ourselves our first item the next thing and the last thing we're going to do is whenever we hover on top of this thing we want this window to pop up with the name and the image of the whole item itself i mean again it's all you can do the same thing in here you can do it uh like a like a pop-up window like you have like it it's all up to you i'm going to use it this way because if you can create the separate window you can create a smaller one in order to make this we're going to have to work with the event triggers and event triggers are quite simple for everybody especially non-programmers because it you have to write anything so what i want to do is i want to make sure that this thing is hidden by default okay or actually i'll keep it let's keep this on by default yeah just keep it on by default i don't want because it's going to have a lot of empty space let's keep it on by default but these things are hidden and what we're going to do is we're going to make sure that these items the images themselves uh they're gonna have yep they're gonna have something called event trigger we need to do what we sadly we can this eventually doesn't have multiple editing things so we're gonna do it one by one which is not a big deal so what we're going to do we need to actually register whenever the mouse comes in and leaves it so whenever the mouse comes in it's the pointer enter and then pointer exit you can have a different approach you can have whenever you click on it it's all up to you and uh honestly that sounds even much more easier to do but again if you want to do one click you can do pointer down or you can use the button script from which you can have this thing in here i'm gonna go with this one because this one is slightly more complex so if you can do the complex stuff you can do the easy ones let's add trigger here and trigger whenever it's on we need to show stuff whenever it's off we need to hide that stuff so we'll go let's go make a script for this let's go make public because we need access from outside let's show this corruption i can't write english and in order to show description we have to give it a reference and the reference means for example this is the first second third fourth so we'll give it an integer a number and let's call it id the second one will be public void hide this corruption and we don't need to have a reference in here because what we're gonna do is we're gonna just gonna hide the whole description thing so description image that enabled equals false description text that text equals i think it's much nicer to do this way instead of finding the whole game object itself oh you know what let's just do it okay i'm just active it's it's the blunt approach but the the safest one so what we do we do this thing but whenever we do the description we need to do three stuff we need to set that image set that text and show the window to set the image all we have to do is we go description image dot sprite equals whatever reference of this thing here so we're going to go with items id dot get component sprite renderer uh not not that not what i might not exactly what i meant we're gonna show the same image of this so it's even simple it'll be as simple as images i picked the wrong thing items images id dot sprite so it's going to pick this the equivalent image of the thing that we pointed at that's good and the text is going to be as simple as description text that text sorry title equals we're going to take it from the items list which we saved in here again you can store more stuff in here you can have a dynamic stuff it's all about up to you i just made the general approach and you can diversify it simply make it more simple or even more complex so let's go items id dot component so that game object of an item it has a script called item which includes the details that we need description text oh and uh that's actually the wrong thing what i need is the title the title we can get from items i think that name so we're gonna get the titles uh like the object's name itself so this one is let's say called lever it's gonna give the lever name and image of it the next thing we're gonna do is description ui that's active actually no not to show the elements so we're going to use this thing the same but instead of false we're going to make it true so i think we've got what we need let's we have this and uh that's it so what i have to do is i need to implement it on one item and then replicate it on all of all of them so what we need to do is we drag and drop the fox object and then go to the inventory system and make inventory yeah inventory system what was show description what what did i name it show description yeah inventory system oh yeah store description and this will be unique for like unified for everybody it's going to be hide description so in order to do this in a proper way you can copy this and paste it as value that paste the values not as new this one is the first item we keep this as zero because this is the starting numerical number in the arrays and then one two three four and five so if i'm not mistaken we should have ourselves a proper inventory system so if it's it's if there's nothing nothing happens in here but if we pick this up and go into inventory that's it it shows it as soon as we land our mouse on it so with this we have ourselves a long tutorial episode but it's well worth it if you're looking for a simple photo system and you've been struggling to make it and feel free to make it more advanced more fun more you know it's all about it's all up to you this is the basics of it and i hope you enjoyed it and you learned something from it if you did hit the like and subscribe button and you've got more questions please ask us in the comments or join our disco channel in the description also find the link of the assets that i mentioned in the also in description and i guess i'll see you next one bye

Channel: Antarsoft

Views: 15,389

Keywords: antarsoft, gamedev, tutorial, unity, madewithunity, indiegame, youtube, youtuber, unity 2d game, unity 2d course, unity 2d tutorial, unity tutorial, unity 2d, unity tutorial 2d, unity toturials, unity tutorial 2020, unity 2d tutorial for beginners, how to create 2d game in unity, unity inventory, unity inventory system, inventory system, unity inventory system tutorial, unity inventory system 2d, unity inventory 2d, unity 2d inventory system tutorial, inventory tutorial in unity 2019

Id: RhxThXt7kos

Length: 38min 43sec (2323 seconds)

Published: Mon Aug 24 2020