Unreal Engine 5 Blueprints: Multiplayer RPG Inventory (2023)

1. 1.01 Introduction: In this course, we're going to learn how to develop a multiplayer RPG inventory system using blueprints in Unreal Engine file, we will start from scratch and cover both UI design and programming of the inventory. This course will cover how to design the UI for the inventory. How to create inventory categories, how to create inventory slots, how to loot items to the inventory, how to display the alluded item in your inventory with icon and text. How to drop items from the inventory out to drag items around in the inventory out to switch inventory slots, two items, and how to add sound effects to the inventory. At the end of this course, you'll be able to confidently create your own multiplayer RPG inventory system to implement in your current or future game projects. I designed this course for anyone who is interested in creating an inventory system for their game and Unreal Engine five, using the best coding practices and optimized code. I hope you'll join me in this course. And remember that I'm always here all the way throughout the course to help you out. And I hope to see you soon. 2. 1.02 Downloading the Project: Now let's go ahead and download the course materials. You can either find the cost materials on the website or on the email when you purchase the course. So check either the website or the e-mail. Let's open up the course materials. And inside of here we have this project called RPG inventory. Now, usually if you've taken my previous courses, I like to start with a blank Unreal Engine project because I want to teach you everything from scratch and make you confident with game development. However, since we are making an inventory, we need an already working game. This is just a very, very basic game. I haven't done much. Let's go ahead and drag this RPG inventory folder to the desktop because we need to extract it. This is a zip folder, so we need to extract the content. This is going to take some time. I'm going to wait for it to finish here. Alright, now that it's done, I can double-click on it. And inside of this folder you can see this is the Unreal Engine project we will be working with. Now let's go ahead and close it and let's go to Documents. And instead of documents, we have something called an unreal projects folder. And this is where all of your previous Unreal Engine projects are. If you haven't done any projects before, this will be empty. So inside of Documents, Unreal Engine or Unreal Projects, Let's click and drag our RPG inventory folder inside of here. And when you do so, when you open the Epic Games launcher now and you go into library, inside of here you can now see it appears the RPG inventory project we just extracted in the Unreal Projects folder. Now I am using Unreal Engine 5.1, 0.1. But if you have 5.1, 0.2 or three, or 5.2, and so on. The newer versions, it doesn't really matter. You can follow along as well. Let's double-click on this RPG inventory project and open it up. This is the project that we will be working with. And before we start in the next lesson, let's take a look at a quick overview of Unreal Engine five. 3. 1.03 Unreal Engine 5 Overview: Before we start developing the inventory, Let's take a quick overview of Unreal Engine five. If you've taken my previous courses and already know Unreal Engine five, you can just skip this lesson and skip to the next one. But if you're new here, let's just take a quick look of how Unreal Engine five is built up. Here in the middle is the most important thing. In my opinion, this is the viewport. And in the viewport you can see what the game looks like. So inside of here, you can hold the right mouse button and you can take a look around inside of the viewport and see what it looks like. So this is the level of simple level of built for this, for this lesson here, you can also move around by holding the right mouse button and clicking on W to move forward, clicking on S to move backwards, clicking on D to move to the right and clicking on a to move to the left. Now again, remember to hold the right mouse button while you click on W, D, S, and a to move around. And this is how I mainly navigate around inside of the viewport. I just hold the right mouse button and press these keys here to move around. You can also hold the right mouse button and click on e to move up or click on cue to move down. But you can also do is hold the left mouse button. And when you do this, you can move around like this. I usually don't use this and maybe sometimes on my laptop, but usually not. You can also hold the left mouse button and the right mouse button at the same time. And you can move around like this as well. The last thing is you can zoom in and out using the scroll wheel on your mouse. So zooming in and zooming out. You can also again, just hold the right mouse button, click on W to move to that item, or click on S to move away from the item. So again, this is mainly how I navigate around inside of the viewport, but you can just, just take a look around the side of those level. Get the hang of it of moving around inside of here and see what feels best for you. Instead of the viewport, we have different buttons. So up here, not really too important for this course. E.g. we have the perspective view right now we are in the perspective view. You can view the game from the top view. So if you zoom out, zoom in and out using your mouse wheel button, you can see this is what the game looks like from the top. Again, you can just click up here, go back to the perspective mode. Really too important for this course, but it's good to know that we have these buttons so we can view the game in different view modes, e.g. if I didn't light this map, it would be very dark. And this is why sometimes I click up here and go to the unlit mode. Now I can see my level even though I have no lighting. And when I light my game, I click up here and go back to the live mode. Very, very important. We have different tools up here. So the first one is the select tool. Clicking on it, you can select different items inside of the view port. Here beside it we have the Move Tool clicking on it. Now when you click on an item, you can see these pivot points. The red one is the x-axis. And if you click on it, you can move this item in the x-axis. The green one is the y-axis, and the blue one is the z-axis. These are the pivot points. You can move the items when you have the Move Tool selected. You can also move them in two directions by holding it here close to the middle. And this, and this box here, moving it into axis at one time, if I just click Control Z to undo my move here, and just so I can go back here, we also have the rotation tool clicking on it. You can rotate an item in three different degrees like this. You can also scale them by clicking on the scale tool. And you can scale it. I'm going to click, click on Control Z to just have it up here again, so it's clear. You can scale it in these three different axis. Now if you want to scale it uniformly, you can click on this white box in the middle. And when you scale, this will scale uniformly. Ok, click on Control Z again. Now very important to know is that we have shortcuts for these tools because it would take a long time if you have to click up here, move this item, click up here again to rotate it and so on. So if you click on Q on your keyboard, you have the Select tool. You click on W, you have the Move Tool. If you click on E, you have the rotate tool. And if you click on are, you have the scale tool, e.g. for this log over here, I can click on W to move it. I can click on E to rotate it. And maybe I want it this way, like here. And I can click on W to move it up, like on R2, maybe scale it up like this, move it up, and so on. So you can see it's a lot faster to work this way, instead of just clicking up here all the time working on Control Z. To put this back again, we also have snapping tools. So over here you can see when I move my item, if I just move this pen, e.g. You can see that it snaps to a grid. And this is because you have this enabled up here. So if you click on it and move it around, you can see it moves smoothly. And if I click on it again, you can see now it's snaps again. You can also click on this number and increase the snapping. So now you can see when I drag it, it snaps to a lot larger grid and you can decrease it again if you wish to. So these are the snapping tools or the movement, or the scaling or the rotation and for the scaling as well. So you can see if I go to my rotate tool by clicking on E on the keyboard. I can rotate it and it snaps every ten degrees. I can click on it here to disable it. And now I can, I can rotate it smoothly just like this. And clicking on Control Z again. So these are the snapping tools for the move tool, the rotation tool, and the scale tool. Last thing we have is the camera speed, and this is the speed of this camera right now, inside of this viewport, you can click on it and decrease the speed. And now you can see it's very slow. This is usually used when you want to focus on very small objects inside of the level so the camera doesn't move too fast. If you have a large level, you want to travel around, you can increase the camera speed. And now you can see I move a lot faster in my level. I'm going to put it back to the camera speed of four. Up here we have the toolbar. Not really too important right now. But the most important thing is that we can click on this Play button to play our game, or clicking on play here, you can see I'm now playing my game. I can move around with the W, S, a, and D keys. So I can move around and I can look around with my mouse. This is the most important thing you need to know right now, up here. Clicking on Escape to stop playing the game and clicking on these three buttons, you can choose how you want to play your game. So usually it starts by this selected viewport. So if I play my game like this, I played inside of the viewport. What I like in multiplayer. I like to play in the new editor window because I have two windows open for multiplayer, so I like to have it this way. Let's close it down for now. And the multiplayer stuff is down here. So let's worry about that later on in the later lessons, sometimes your engine might look bad and you can try to take up, take a look up here in the settings you have something called engines scalability settings. Right now, mine are set to epic because my computer is fast. But if you have a slower computer, you can change it to low quality or medium quality and so on. So really good to know that it's there to the right here we have the outliner and the outliner is simply items you have inside of your levels. So all of these items you see here are inside of this current level. And if I select e.g. this stool here, if I click on it, you can see it also selects on select it here in the outliner. So whatever you select in the level, you can see it here in the outliner. You can also select things by just clicking on them up here. So now you can see when I click on them over here, it also selects them inside of my level. Now this is useful for when you want to find something specific, e.g. you can search up here. I want to find my stool, e.g. and it's this one down here. For this tool, I found it here, I can click on it. And this is the one. When you have a very large level and you can't find items, you can search for them here. Let's say you didn't know where it was. Like you have a very large level that you selected and you can't really see it. You can click on F on your keyboard and it will take you there automatically. Also, I forgot to say if you want to double or if you want to duplicate this item, you can hold Alt on your keyboard and then you can drag here. So holding Alt on the keyboard, dragging, this will copy the item. So very useful sometimes when you want to design the level. So you don't have to drag this item over and over again, clicking on it by clicking on Delete to remove those, I'm going to click on the X up here so I can see all the items again. If you want to organize your items here in the outliner, you can always click on this folder icon. This will create folders and you can just click and drag and drop these items inside of folders. And you can organize your, your outliner. I'm just going to drag it out again and remove this one here. Next we have the Details panel. And the details panels simply shows details about the select item in the viewport. So if I select this pen over here, you can see, I can see different details about this pen. I can see the location of it and the world. I can see the rotation of it, the scale. I can see what Static Mesh it's using. A feel e.g. click on this icon here. You can find it inside of the content browser. And I can see, it's this one. I can see what materials it's using. Information about the physics, the collision, and so on. And it's different for every item you select. So if I select this one, I can view different details about this item, different details about this item and so on. So very important, the details panel is something you use all the time in the engine. If I click on this, hey, e.g. I. Can set the location for it if I just click and drag here. So instead of using the Move tool like this, I can just click and drag on these boxes as well if you wish to. So sometimes you just want to move like this, and sometimes you want specific numbers. So you can just click here and write e.g. 1,400, the X location. And you can see it went over here. And also right, I think it's -1,400. It will be over here. So -1,400. You can see it went back to here. Now if you have specific numbers you want to write, you can write them here instead of trying to eyeball it here. And finally, we have the Content Browser. So usually this is not available or this is not showing when you open Unreal Engine five for the first time. So I can right-click and we can close. And this is what it usually looks like when you open Unreal Engine five, for the first time, you have the content draw instead of the content browser. Clicking on it, you can see, you can see this same tab that we saw before, but the content row disappears every time you click inside of this viewport. So clicking on the content ROA, if I want to click on something here, you can see disappears and I find it a bit annoying because I'm used to Unreal Engine four, where it's up all the time. So what you can do is click on this content ROA, and click on duck in layout. And this will stay up all the time. And very, very simple. The content browser just contains all the files you have for the game. So e.g. for the assets, these are actually the folders I've created to make this level. So e.g. here in items, we're going to use this later on to create items for the inventory. And you can just click and drag this into the level. And you can see what they look like. Cancelled, double-click them and see them inside of this viewer as well. So these are all the files you have, these are all the animations. Let's just go ahead and delete all of those who create folders inside of here, we can right-click and make a new folder. You can also change the color of a folder if you click on it, right-click and go to set color. This is very cool for when you want to organize your files and you want see them quickly. You can just give them colors. I'm just going to delete this one for now. To add items inside of the content browser, you can right-click over here, or you can click on the Add button. I usually click, right-click over here, and you can add blueprints. We will do this a lot to program our inventory. We will also use the user interface to create the UI for the inventory. And you have e.g. animation you have, you can create a new level, read a new folder as well. Over here, you can see we can create a lot of things and it looks overwhelming. But you will probably not be using a lot of these things to begin with. So you don't really have to know everything inside of here. Focus on what's very important. So in this course, we're just focused on creating an inventory for now. While creating the inventory, we're going to use a lot of these things. We're going to use a lot of the blueprints, blue, Blueprint nodes. And we're going to use the user interface. We're going to use the sounds for sound effects and so on. So in this course you will be learning a lot of these things over here. So don't worry about it for now and just take a quick look around here. In this engine, you can just move around, click on things, move them around. Not really too important if you destroy things inside of this level. And sometimes when it tells you that you have lighting that needs rebuilding, you can click on this, build and build all levels, and this will automatically build all the lighting for you. Now it may take some time if your computer is very slow, but you can see the progress down here. And when it finishes building the lighting, you can go ahead and close it down. And let's go ahead and click on File and Save All. And let's move on to the next lesson. 4. 1.04 What the Project Already Contains: Before we start, let's take a look at what this project already contains. Now I've gone ahead and designed this quick game for you and it doesn't really contain much, but we needed something to get going to start programming the inventory. So over here in the assets folder, I have some items. These items we will be using to create items that we can lose our inventory and place them inside of our inventory. Now let's delete it for now. I'm going to teach you how to make items and look them as well. And the player, we have the different animations and you can see if you click on play for the game, and we already have an Animation Blueprint sets. And for the terrain, I just have the textures for this terrain. I also included sound effects for you that we can use when we allude items, opened the inventory and so on. And in the blueprints, very basic. I've created a game mode. The mode is empty, and usually this view shows up if you have nothing inside of the blueprint class. So you have to click up here open full blueprint editor. And this is what it looks like. Empty, I haven't touched really anything. I just, but the player controller and the default Pawn Class and opening the player controller, this is empty as well. We have the player, the player here instead of the player. Very basic. I just added the new movements system for this player. So just moving back and forth and looking around with our mouse. So not really anything crazy going on here. Then we have the animation blueprint for the animation for the player. And again, we have the movement here for walking forward, backward, left and right. And we have the maps. This is the map we are currently in. We have some Marketplace items. I use this fantastic village pack. You can find it in the marketplace for free. And this is just used to design this level. We have the goods sky, which is this guy up here. I just added fog so we can't really see it just to make this level a bit more interesting. And then we have these characters. You can also find them in the marketplace. Very, very cool stuff. I use them sometimes as well to prototype some of my other games. So if I'm making a shooter game and so on, so let's just delete this one for now. So this is what I have inside of here. And the last one is the UI. We are going to use this to design our inventory. We have some buttons here. By the way, if you have very large view like this, I have a fork, a minor, so it shows very large like this. You can click on Settings and thumbnail size. I can make it small, e.g. and it will look like this. I'm just going to use the medium so you can see it better for this course. I also included a font here, so you can use that for the UI. I have some icons we can use when we elute the banana, e.g. we can add this icon to the inventory. And then we have the images, which is basically the inventory slot. So these are all the items. Very basic game, we can just walk around, that's the only thing we can do right now. And look around. And you can imagine if you've got this game from a friend or someone you found on Reddit or somewhere else. And he just asks you to put an inventory into his game. So this is what we are going to do. 5. 2.01 Introduction to Widget Blueprints: Before we start designing the UI, let's go ahead and take a look at what a Widget Blueprint is. So let's go over to the UI folder. Let's right-click here. And let's go to User Interface. This is all of the user interface items. Here we can select the Widget Blueprint. Let's create one here. Select user widgets, and go ahead and call it, I usually call it wb or would you blueprint as a prefix? And then let's call this one main. So the main UI, this one will be displayed as our main UI. Later on. Let's double-click on it. And here you see this is what a Widget Blueprint looks like. So Widget Blueprint, you can design the UI here. You have a designer and then you have a graph. So in the designer, you design the UI. And in the graph, you program the functionality of the UI you have designed. Inside of here you can see you have a pellet and instead of the palette, you can add different things to your blueprint, e.g. you can add a button. You can either click and drag it out here. Right now you can see the button is huge, and this is because I'm going to click on Control sets. And this is because we usually add a canvas to begin with. So if you search for Canvas and this one we actually add, before we add anything Canvas, you can either drag it inside of here or you can click and drag and drop it over here. So if I just delete this one here, I can click and drag it into here instead. So you can either drag them here, here. So let's go back and let's take the button e.g. you can add it to the canvas, or you can add the button again like this, where you drag it down here in the hierarchy, something like this. And you can see it got added up here. And you can always click on it and you can drag it around the canvas. You can also change the position just like before we have a details panel. Remember I told you before, if you click on items in your viewport, you have a details panel. You have that as well inside of the Widget Blueprint. So you have details about this button. You can see the position. You can change the position here as well. Or you can drag it around. If you want to drag it, maybe you want to put something, a specific number, e.g. we can write 1800s and maybe this is what we like. You can also click on it and resize it. Again. You can also resize it here if you wish to. All the details for the button. Again, if you just add other items, you can see they have different details. So e.g. if I take the text here, you can see in the text I can edit the color of the text. I can edit the font. So what font am I going to use? I've included a font for you. Remember, in the UI folder, fonts, I've included this font for you. So you can actually select it here in the font family as well. Down here we have UI animation. We might get into it. I'm not really sure, but not really too important right now. So I'm going to right-click here and click on Close because we don't really need it. And the last thing that's important here is up here you can click on compile. It says dirty needs to be recompiled. And what this does is it just checks if you have any errors in your code. And right now we don't really have any code, so it's going to get clean here. But if we did, it would give you a warning and tell you that something is wrong. So you can try to play around here and try to take an image, e.g. place it here, you can re-scale it. You can see what details you have for an image, e.g. the brush. You can hear in the image, you can change the image, e.g. this burger here. And now you can see you can change the size of it. And you can also change the size of it here, clicking on these small arrows just means that you wanted to reset to the default value. So clicking on it. And the default value is 15150. And you can see when I change the size here, it doesn't really get affected. And this is because you are actually re-scaling the whole image like this. You have to click on Size to content if you wish it to take effect on this one here. So looking at our reset to default value, this is the default value size for this burger. Yeah, and that was it. This is a very, very simple. So in the designer will design the UI in the next lesson. And in the graph, we code the functionality of the UI. But for now, let's focus on designing the UI. So before we end this lesson, I'm going to delete all of these things, including the Canvas. Let's compile, Let's save, save all here and close it down. And let's move on to the next lesson. 6. 2.02 Designing the Main UI: Alright, we are now ready to design the main UI if you haven't followed in the previous lesson. Go ahead. In the UI folder, you can right-click user interface and make a Widget Blueprint. And this is the Widget Blueprint for the main UI that we created already. Let's double-click it. And before we start, I want to show you what we are going to make. So it's always nice to see what we are going to make before you make it. So we can visualize it. Here in the menu I. We are only going to have this button. This is the inventory button which can be clicked and you open the inventory. So very, very simple. This is what we're trying to make. So let's go back to our view here. And as I told you before, we have to add a Canvas before we add anything. So up here, if you search for canvas panel, you can drag it into the hierarchy down here. And now we have added the canvas panel for the button, for the inventory button. Obviously we need the button UI here so we can drag it into here. But as you saw before, we need an icon on top of the button. And this is why we use something called an overlay. If you search for Overlay or you can also find them down here. So you can click on these arrows to find items that you can add to your Canvas. So this is the one right now we want to add called the overlay, or you can search for it up here. So if you don't know all of these things, it might be difficult to understand, but just do it once, twice, or three times. And it's very easy because you do this all the time. So since we need a button and an icon on top of it, we need something called an overlay. So let's, let me delete this button again. And I'm going to drag this overlay into the canvas. And usually they get added up here. And for this one now, let's add a button. And then we add an image. This is the icon That's going to be on top of the button. Now let me drag it down here just so we can see what it looks like. So right now, let's click on the button and let's design it. If you want. You can disable the image for now. So you can click on this eye here. This just highlights the image for now. Let's click on the button and the style over here, let's change what it looks like. I have included for you in the end, the buttons in the UI buttons folder. I've included buttons for you that we can use. In the normal. Let's go ahead and change the image to this one button, square root blue. For the size, we can click on this arrow to re-size it to whatever the normal is. Right now you can see I am zoomed plus seven. So this is very important to know. I'm zoomed plus seven, so this is not what it's going to look like when I play the game. It's going to look like this. So if I zoom out, this is what it's going to look like. So one-to-one here. Now, usually when you make a button, the color is gray for some reason. I don't know why. So clicking on this tint here, and let's change it to white. So the true color is appearing here. And instead of doing a round box around bucks give you a weird edge around your button and I don't want that. I want to go here, click on bucks instead. And you can see when you rescale the image, it looks very weird. But if you use a box and you set the margin to 0.5, you can actually re-scale it without losing detail of this button. So you can see I can rescale it. And it looks good. If you didn't use the margin of 0.5, it will look like this. So margin 0.5 and it looks fine. Okay, so clicking on it here, Let's go over to the Hubbard and let's select the button, square blue hovered. And for this one, actually what you can do something very fast. I use this when I develop my game. I can shift and right-click up here, or you can just right-click and click on Copy. I usually just press Shift and right mouse button. So Shift right mouse button to copy this. And you can shift left mouse button to paste it on top of here. And on top of here you can see it's very quick. So you have all the information. And then just remember to change these two over. Here. There's 12 rest. Again, remember to change the size here. I think for this one, I'm going to bring to use something like 90. This one is just as default, so just defaulted to 68 and this 190. I'm going to right-click again. I'm going to hold Shift and right-click here again to copy it and hold Shift and left-click to paste it on top of this image sizes. Now, you might wonder why do not scale it here in the x. And this is because it will scale automatically in a bit when we add the image. For now, let's just compile and leaves this button. Let's go over to the image. So clicking on the image, clicking on this icon to view the image. And for the image, we need to find the backpack icon. So it's this here, or you can search for it up here, selecting the backpack icon. And when I designed the UI, I saw that 100 by 100 was a great size for this. I'm just going to change this one to 100 by 100 and image size. You can see if I click this default button, the default is 150. I'm going to downscale it to 100 by 100. And instead of making this overlay like this, instead of re-scaling it like this, I'm going to click on Size to content. So this overlay is now sizing to whatever content there is inside of it. So this button here, instead of having it up here in this corner, I'm going to horizontally align this. So it's going to fill the whole overlay. This button is now filling the whole overlay. This is what it means. And I'm going to align it down here vertically at the bottom. So it's at the bottom of the image. I'm just going to align it to the center of the button. Clicking on the image, clicking on center alignment for the vertical and the horizontal. So it's just in the middle of this overlay. Now we need to push this image upwards. You can either use the translation down here in the transform, or I'm just going to use the padding up here. So for the padding at the bottom, this means you're pushing the image from the bottom up. So I'm going to push it by 15 pixels. And you can see I push the image up here and it's looking great right now. I'm going to push it by 12th to the left and by 12th to the right. So we give it more space here for this button, so it's looking a lot better now. Now, the final thing that we need to do, so instead of having this button here in the middle, what we can do is we can place it down here. So what you can do here is you see if you set the position to 00 over here, you see it snaps to this corner up here, but I want it to be down here on my screen. I don't want my buttons appear up here. I want my button should be down here. What you can do here is you can change the anchor point. So clicking on your overlay, you have something called anchors. Clicking on here. And you can change the anchor point to down here. The anchor point means is, let's say you have dragged this button down here like this, and it looks fine. And you're not changing the anchor point. So what this means is when your game window gets smaller. So let's take this here. And let's say the button is here. If your game window gets smaller like this, if someone resizes your game, button is going to fly upwards to this corner. So if your screen is very small like this, the button is actually up here and not down here. So it's not looking correct. And this is what anchoring means. You're just telling the game where your button initially is. I'm going to anchor it down here instead putting a position to 00. You can see it's now off the screen. And to make it inside of the screen, you have to use this called alignment. And you can see it's either zero or one. You can see if I write one here, 0.5, it's the middle. This is the x, this is the y. And 0.2 and so on. So you can see if I write one, I push it here. And again, alignment for the y, you have to put it to one as well to push it inside of this window so you can play around with the alignment. We usually use 00.5 to put it in the middle or one. We put it here like this. Okay, so instead of having it directly here to the screen, I want to give it a bit more space sites. So I'm going to click on the overlay position for the x -35 and positioned for the y -35. Now, we have a bit more space here to the side, so it's nuts directly clamping here to the screen. Alright, let's compile. And the last thing you can do, very good practice. You can see if you go to the graph, you can see it's called button and image. These are the variables that have been created because you have designed this UI here. And you can see these are the names for them. They are also appearing as variables in your code. However, it's very bad practice to leave them like this because if you have multiple buttons like this, e.g. don't really know which is which. E.g. if you have a button for inventory, a button for your skills, stats, and whatever, you don't really know what it is if they are called like this. So let me delete all of those. And by the way, if you want to know how I duplicated it, you can just right-click and click Duplicate or click on Control D. Okay, so let's change the name here. You can click on F2 on your keyboard by clicking on this looking F2. And I'm going to call it btn for button. And let's call it inventory. Same for the image, image inventory and for the overlay. Ove for Overlay, and call it inventory. Okay, so now we're finished with the main UI. I'm going to go a little bit faster on the other widget blueprints. But now you know the basics and how to create something very simple. Let's save everything, close this down, and move on to the next lesson. 7. 2.03 Designing the Inventory Category Buttons: Let's now design the inventory category button here in the UI folder. Again, let's right-click user interface. Make a new Widget Blueprint. Use the or select the user widget. And let's call this one inventory category, like this. Now let's go inside of it here. And just like before, remember we have to add a Canvas before we do anything inside of here. So let's drag this canvas panel and edit. And now we can start designing the category. So for the category, again, I want to show you what we're going to do. We're going to do this. We're going to design this button here. This icon will be changed depending on what category we have, but this is what it looks like. Very, very simple. Again, let's go back here. Let's add an overlay. Just like before we need a button with an icon on top of it. And I'm just going to add an overlay inside of this one. And I will show you why in a bit. It's a little bit confusing right now. So let's search for button again and add it to this overlay here. And let's search for image and add it to the overlay. Just like before. The extra thing is we just have this overlay up here and I'll show you why. So for the category buttons, we don't really need the whole canvas, just like we did for the main UI. So remember for the menu I were using this whole Canvas and we're adding this button down here, who are playing menu or the main UI. So you can imagine if you were playing the game, the button is down here, but what category we don't really need the whole Canvas. So we can click on the canvas here, or actually just go up here and the fill screen and select this one called desired. We don't really need the whole space. We just need whatever we have designed down here. So clicking on the button again, let's change these settings. But you can do is you can go to the main UI if you want to click on this button. And again, hold Shift and right-click to copy. And hold Shift and left-click to paste. So I'm just going to paste this information. And for this size here, I'm just going to make it one-to-one. See by one-twenty, this is the size I want it to. And you can see it's not really changing in the y here. This is, remember before I told you that you can click on this overlay and click on Size to contents, so sizes to whatever size the content is. And for this one I'm just going to make it 12120. Just pay attention again to the zoom here. This is what it looks like one by one. This is what we'll be looking like, not like this. Okay, so let's go ahead and copy the image size pasted down here. And clicking on this image, I want to align it in the center of this button. So clicking these center, horizontal and vertical alignment. And for the image, I'm going to use the backpack again. It doesn't really matter what you are using here because you're going to change this image depending on what category you have. Later on we are going to e.g. create a category for food grade category for consumables, and create a category or weapons. So depending on what the category is, we're going to change this image so it doesn't really matter what you have selected here. I'm just going to make the image size 85, 80. Just like before. Remember we pushed up the icon here in the menu. So we're going to do the same thing for the bottom. I'm just going to write six here. You can just test it out. You can write 1018. See what works for you, but six worked for me and for the left and right, I'm just going to again write 12 by 12, just like this. So just in case the button somehow gets very small, I still have some space here. So I think this was it. So let's just take it for we have everything and everything looks fine. Let's compile and save everything. The last thing you need to change is before we forget it, is here in the visibility, the visibility. What this is. Now when you play the game and you want to click this button behind this image, this image is going to block your button and you're not going to be able to press it. This is because the visibility is set to Visible for this image. So what you need to change it to is none hit testable. What it says here in the tooltip description, visible but not hit testable, which means cannot interact with cursor. And this is what we want, is just an image to show you that this is the button for the category, or in this case for the inventory here in the menu I. So we have to do the same thing here. So clicking on the main UI, changing divisibility to non hit festival. So now we can click through this image and we can hit the button even though this image is in front of it. So let's compile. Remember to save everything. Just like before. Let's change the names here, button, category and image category and overlay here, category. Okay, so the reason why I added this overlay here, first off, let's change the anchor point to the middle. So I'm going to change the anchor point to the middle. And remember if you write zeros, zero for the position you can see it anchors like this. If you remember from the previous lesson, you have to change the alignment. So I told you before we either use 00.5 or 1.0. 0.5 is the correct one if we want it to stay in the middle. So 0.50, 0.5, and you can see my position 00. Now the button here is in the middle for this overlay. Why I created two of them is because now here in the second overlay, I can use this padding if you didn't have to overlays. Imagine if you only have this one, you don't probably have padding. If this is not like a child. You can see this overlay is a child of this overlay. And for children, we can use this padding here. And we're making this padding. Let's just write five for now, I'm going to write five. And this just gives it five in both the left, top, right, and bottom. So the reason I do this is later on when we create the categories dynamically is some spacing between the categories. Like if, imagine if you have five categories down here. There are some spacing here between the buttons. If you didn't have the spacing, they would be on top of each other. If you want to remove these dashed lines, by the way, a quick trick, you can just click up here and you can see what it looks like without all of these lines. Okay, Let's save everything that was it for here. Let's close it down, save it all, and let's move on to the next lesson. 8. 2.04 Designing the Inventory Slots: Let us now design the inventory slots. So let's click on the UI. Let's right-click here user interface and create a widget blueprints like user widget. So the same as what we've been doing so far. Well, this one, inventory slots. So these are the slots were the items will be displayed in clicking on this inventory slot. Just like before, you have to have a Canvas before we can do anything. So adding a canvas going up here and the fill screen, selecting desired, just like what we did for the category. So inside of here now we can add an overlay, and I'm going to add another overlay inside of it so we can put some padding just like what we did for the category. And I'm going to add a button, actually just image. We don't really need a button here. I'm going to add an image inside of this overlay. And this image is going to be the sludge. So if we just go down here, we have this one called inventory slots, or this inventory slot. I'm going to hear in the draw as select bucks and write the margin to 0.5, just so we can scale it up and it doesn't look weird. So if you have it to image as default, you can see you'll lose quality. We're changing it to Bach's writing 0.5 in the margin, we can re-scale it without losing quality. I'm going to click on this overlay up here and again, select size to content. And for this image here, for the inventory slot, I'm just going to make it 90 by 90 in the size. So it looks like this. And for the alignment instead of aligning, it doesn't really matter in this case, but just so it's more clean, I'm going to aligned horizontally and vertically. So the whole thing here for this overlay, I want it to stay center. So again, the anchor point for the center one, alignment 0.50, 0.5, and the size or position to zero. By zero. It stays in the center. And I'm going here in the overlay again, give it some padding. And just like before, I'm just going to give it a pairing of five. So we have spaces between the inventory slots. And this will be a lot more clear when we actually create the overall inventory. And you can see the space between the slots. Now we need to have an item inside of this inventory slots. I'm going to add another image to this overlay. I'm going to center it here. Let's just select a random icon. It doesn't really matter. We're changing this dynamically in game. So I'm just going to select this icon meet, let's make this 160 by 60. And we don't really need to change it into a box because it is just an image, an icon. And the last thing we want to do is we want text down here, like a number. If you have I've meet, it needs to show a number of five. So let's search for text up here and drag it down to the overlay, like this text. Align it to the bottom here vertically and to the right horizontally, so it's down here. And let me just write a number, e.g. 23, just for now as a placeholder for the font family, I'm going to select, Let's see, maybe the bold one, the mirror and bold. I'm going to make the size to 18. And I'm just going to give it an outline. So clicking here, you can give it an outline and see the outline appears here if you'll write 23456 and so on. So writing maybe two, and here for the outline color. So clicking on the outline color and just select some random color here. Maybe something like this, something that fits with the background. You can also use the color picker. Pick this background color, click on it again here, and go back to the outline color and just make it a little bit darker, something like this That looks good. Clicking on Okay, and there is a small effect that looks cool. So here in the shadow, if you just make the, give it a little bit of a shadow, e.g. 1.2 in the y. Right now it's not appearing because your alpha is not set to zero, so set it to one and you can see the shadows actually appearing behind the text. I'm going to set this one to 1.2. And a cool effect is if you make this color shadow color the same as your outline color, going to give a cool 3D effect. So just clicking on it, copy the hex linear color, going to the shadow color, pasting it down here. You can see it gives that 3D shadow effect, which looks a lot cool. Now for the position of it, you can see it's here at the edge. I'm just going to, instead of using the padding, I'm just going down here and the translation, if I can find it down here. And in the x, I'm just going to push it, something like this. Maybe if I just zoom out to 11 here so I can see what it actually looks like. Maybe something like this is fine. If I just write five, e.g. if we have five meets, this is what it will look like. Again, you can click on this button to remove the dashes so you can see what it looks like. And I think it looks cool. So we can use this. Let's compile, save everything. Again, remember to rename your items here. So this one is image inventory slots. This one is image inventory item. And this one is, you can call it item one city. Maybe instead of calling inventory item, I can just call it item whatever. And for this overlay, I'm just going to let them be in a not really too important right now. Okay. So that was it. And remember again, maybe, maybe we need to change this to like the visibility to non hit testable again to not get affected. But I'm not really sure for now. Let's just let it be and we can change it later. Go to File, save everything, and let's move on to the next lesson. 9. 2.05 Designing the Inventory: Let's now designed the inventory. For the inventory, what is going to look like is something like this. So we have designed the inventory slot, and this is what I meant about the spacing between the inventory slots. This is why we added padding to the overlay. So we have a bit of a distance between these inventory slots. So this is what is going to look like. Categories are here to the side. So we're going to design this. So let's go ahead and right-click again user interface, widget blueprint. Let's call this one inventory. So inside of here, again, just like before, let's add a canvas. And for the inventory, you have to visualize what you are trying to do. So for any UI you're trying to do. So here what we're trying to do is we have the categories over here to the side, and then we have the inventory. So we need something called a horizontal box. So we need the categories to be beside the inventory. And here we are going to use something called the horizontal box. And you can just add elements to it to see what it's doing. So if you just search for a button, e.g. and you add it to the horizontal box. If you just Control D to duplicate it, you can see which elements horizontally to each other. So let's delete these buttons. The horizontal box is going to contain a vertical box where the category buttons are aligned vertically. And then we're going to have an overlay where we have our inventory. Just like that. We have in the horizontal box, the vertical bugs for the categories. Let's just rename it for now. I'll let vb for vertical box and I'm going to call it x inquiries. And for the overlay, let's just call it inventory like this. So the inventory overlay it consists of an image. We need the background for the inventory. So adding an image to it and this image, instead of setting a size for it, it's just going to fill horizontally and vertically. You can see it's not filling horizontally. And this is because this overlay, which is the parent of this image, is not filling either. So instead of auto here, let's click on Fill and it will fill the whole thing. So whatever I decide to change the horizontal box size two, It's going to fill this space here. Now clicking back to the image, Let's change this one to button square blue. I use this as the background as well. It looks nice. So now really only for the buttons and draw as a box, five in the margin, so we don't lose quality. So now we have the background for the inventory. And now what we need to do is have some text up here that says inventory. And then we need the inventory sloths down here. So you can imagine we need a vertical box. Let's search for a vertical box added to the overlay. Let me just align this vertical box, just fill the whole thing. And we need some spacing because instead of drawing on the edges of this inventory, I'm going to add some padding to it. So maybe something like 30. We're only going to add stuff to it here so we don't hit the edges of the background for the top. And maybe I'm just going to write 25, just like this. And let's now add a text. This text is just going to say inventory. Let's align this text to the middle. Let's change the font here. And I'm just going to select this one extra bold. And let's change the size. Maybe just let it be like this. It's actually nice. If you just have this zoom to one by one. You can see what it looks like. For this one, let's just let it say inventory, inventory, and we can add some shadow to it. I'm just going to make it 23.4, the Alpha 0.3. Now you can see we have some subtle shadow beneath this text, which makes it makes it look a lot better and not so flat. Next we are going to add the inventory slots. So to do this, we need something called a grid panel. So if we just search for grid, we have this great panel. Let's add it to this vertical box here in the great panel. If you just go up here and search for inventory. Now you can see the widget blueprints you have created out here. So we have the category and we have the slots. So taking this slot and adding it to the grid panel, you can see what it looks like. Click on this one, click on Control D to duplicate it. Then change the row to one. And now we can see what it looks like. So duplicate this one again and just write one here in the column. I just wanted to see what it looks like. I'm going to copy this again, right, two in the column. And this is what it looks like. You can see it. Obviously it doesn't look correct. So we have to figure out what's wrong. Now we can click on this overlay here and everything is looking correct. We have to click on this horizontal box and you can see it looks correct if I resize this. And instead of having this to be to the left, we can click on this middle alignment. So it's always tastes in the middle. However, this horizontal box is okay, it looks good now. And instead, we can click on Size to content. So the inventory size is just going to, or the background of the inventory. It's going to be the same size as whatever the content is for the inventory. Alright, so the same thing for the vertical bucks. So if you go up here and search for inventory, take this category, drag it down to this vertical box we made before. I'm just going to click on Control D just to copy it so I can see what it looks like. You can either have it this way or you can align it to the middle. So if I just duplicate this and just make it larger, so I can see what it looks like. We're going to delete those by the way, we're going to add all of these dynamically depending on what items we have looted and not this one here, we only have three categories. So instead of having it like this, I'm going to click on the vertical box and align it to the center here and maybe align it horizontally here to the left. And for the Padding, I'm going to add some padding to the right because I want a bit more spacing between these two. Clicking on the vertical box, adding, adding to the right, maybe ten, like this. And I think it looks nice again and we can click on this inventory. There's really no reason we don't really have buttons around it. But just in case you had a button somewhere here, change the visibility for the text to none hit testable because we don't really need to interact with it with the mouse cursor. Okay, now let's compile and save everything. And this is actually what's going to look like. So we can delete all of these inventory slots. We can delete all of the categories for now, because we're going to add all of those dynamically during gameplay. So now what you can do is just change the name of all of these. So it actually looks nice and you know what, it is. Great panel. This is the grids, inventory. Just like this. Let's rename everything. And sometimes some things are not too important to change the name for this one is the image inventory, maybe background image or background. This is just the horizontal box. Now we need to align it here. So the anchor is, I'm going to draw the inventory down here. So clicking on the anchor, lending it to down here. And if you write the position to zero-zero, again, just like before you see, it's actually outside of the screen. So just like before, you have to adjust the alignment one by one. And I'm going to give it a little bit more space to the sites. So writing the position to -35 -35. Now we have a bit more space. So this was it for the inventory. Let's save everything, Let's close it down and let's move on to the next lesson. 10. 3.01 Displaying the Main UI: It's now time to display the main UI to the screen. This is the main UI that we have been creating. And it's just consisting of one button, which is the button to open the inventory. Now what we want to do is usually we work with UI inside of the player controller. We already have a player controller in this game. If you go to blueprints, we have this one called PC. This is the player controller. Let's double-click it and this view opens when the blueprint loss is empty. So we have to click on Open, open full blueprint editor. So I haven't done anything inside of here, though it's fully empty and new. And what we can do here is just delete everything for now. But we're trying to do is use this one called if you right-click here in this editor and write creates widgets. Remember, we are working with widget blueprints. So this is what we created here, a Widget Blueprint. So if you just right-click here, right, creates widgets, you'll find this node here. This function here is going to create our widget. So let's select what we want to create. We want to create the main UI, this one, WB main. Let's click on that. And now let's right-click it and promote this to a variable I write, I like to have my UI into variables, will promote this to a variable. And let's just call it wouldn't be main again. Okay, now we have it and to display it to the screen, now you can click on compile. I usually do this if you see me do this all the time. It's just checking if you have any, any bugs in your code. If it does this, it gives you a ticket, means it's clean. So everything is fine so far. Okay, So what we can do here is drag from this variable. And if you did not create a variable, you can just drag from here instead. So drag from here and say Add to Viewport. Doing that. Okay, so now we have done the Add to Viewport. And if you click on Play now, if you already know blueprints, this will not happen. So if you click on Play and see nothing really happens. Nothing like there's no button on our screen right? Now. If you already know blueprints, you know that we need an event to execute the code. So in Blueprint, you always need an event to execute the code. You cannot execute code without events. So if you right-click here and you search for begin play, we have something called a pig can play event. Click on this one. If you want to see other events, you can always right-click and search. You can just search events and you can see all of the events you can choose from. E.g. isn't destroyed event on tick, which runs 60 times a second. And maybe any damage which is used when the layer has been damaged and so on. So let's delete this for now. Why do we need right now some very basic one called Begin Play. So this event just tells what happens when you begin playing the game. And let's connect it here. Okay? So when we begin playing the game, we want to create this widget and add it to the viewport. But let's compile, Let's save everything they can play. And now you can see the button is appearing here on the screen. Okay? So everything is working. And if I just minimize this one for now, click on these three dots, number of players, I will change it to two. And for the net mode, for now, I'll just click on play as listened server. I'm going to click on play. And it's actually on my second monitor, which is here. So now we have two players. And you can see they both have this button. Okay, Nice. And now you can see we have a, a bug here. And it's saying X is non trying to read the property WB made, which is this one. It doesn't know what this really is. That what x is non means, it means this variable is empty. I don't know what it is. And this is because we are working in multiplayer. You can't do this. This is good for single-player, but for multiplayer, you can't do this directly. In multiplayer, we have something called a client, and we have something called the server. A few click on Play. You can see up here it says server. And over here it says client will have the client and the server. Okay, so usually UI is only run on the client, It's never run on the server. In the next lesson, I'll explain to you the server and the client more in depth. But for now, just know that UI has to be run through the client. You cannot run UI through the server. So what we have to do is just disconnect this. And to disconnect it fast, you can click on Alt on the keyboard and click on it. That will disconnect the pins. And what you want to do is right-click here and write custom events. Quick trick to do this as well. You can write t dot and this will appear fast. So creating this custom events, let's call this one initialize widgets. Just like that. And remember to click on this event on the replicates, click on run on owning, client and reliable. I'll explain to you in the next lesson what this means. But for now, just make sure it runs on the client and is reliable and you connect it to here. So we're making sure that the UI is run through with the client. And now blueprints again, remember, when you click on Play, nothing happens. This is because you always have to tell him blueprints when you will run this event. Because your code doesn't really know or your game doesn't really know when to run this event. So when we began playing the game, I want to call this event called initialize widgets. Okay, so let's compile. They can play now. Now we can see it appears on the screen or this here and this year. And if I exit the game, you can see I have no box. Now it doesn't give me any errors. And this is because, because it's run correctly now. Now all the UI is run through the client as it should. And remember to compile, click on Save All. And I'll move on to the next lesson where I explain more in depth, the server and the client. 11. 3.02 What is Event Replication: Alright, so before we continue, I just want to quickly explain to you the server and the client in Unreal Engine. So again, as you saw before, when we click on Play, we have the server and then we have something called a client. But what you need to understand in Unreal Engine, the server is the authority of the game, so the server is the true game. And what does that mean? It means for the server, you see everything correctly. So e.g. if I should have gone my server here and if I shoot a gun, then the gun is shot perfectly fine. If I shoot on the client and the server didn't give authority to the client to shoot this weapon, it will never happen. So whatever you do on the client, it always checks it with the server. So the server checks. Is the client doing something legal or is it doing something like that is considered cheating. So all the clients connected to you, so let's say you created a a Counter-Strike server or a fortnight server or whatever. And all the all your friends are connected to you or your friends or the clients, you or the server. So if one of your friends are cheating, e.g. they're shooting a gun without bullets. It will always check it with the server. And if the server sees that this player has no bullets, then that will never be shut. So the server always checks what the clients, and this one is a good one. If you can google UE for network compendium, it tells you all about multiplayer. But I just want to make it very easy for you because it's a long document. And I just want to show you these circles, just like what we did in the previous lesson. We run the widgets on the client. So you can see here are widgets are always run on the client. The player controllers are run on the server and the clients so they can communicate to server and client. And the game mode only runs on the server. So if you have some code written in inside of the game mode and you want to access it through the client. This is impossible because the game mode only exists on the server. And the player controller again, exists on both the server and the client so you can communicate with both. So what we did in our game so far, we have been working inside of the client. So if I go back to my game inside of here, if I go back to the blueprints, remember we did this code here inside of the player controller. And the player controller exists on both the server and the client. So we have to specify inside of here, are we working with the server or are we working with the client? If we're working with the server, we have to replicate to run on the server. But since you are always handled through the client, we have to run the client and then create the UI, work with the UI. So very, very important to understand. Ui is always handled through the client. And if you don't run them through the clients, like we saw before, if you just run it directly like this, you will receive bucks. Now apart from the UI, e.g. some of the gameplay mechanics, Let's say later on, we are going to create items. So here in the items, we're going to create items. And let's say the player is going to lute this manipulation from the ground and add it to the inventory. So the player walks over to the player walks over to this potion. And when the player presses E, e.g. to loot the potion, then it's going to run on servers. We're going to make a custom events run on server. Then the server is going to handle the logic, so the server will check it. This player actually press E. Is this player actually nearby this potion to be able to dilute it. If you don't check these things, their client can cheat. And that's why we check it with the server. So let's say the client is standing here and you can only load to this person when you are standing here. But if you don't check it with the server and the client versus E here, they are cheating. They can easily lose this potion. So we have to run on server, check if the layer is actually interacting with this potion. If the player has ***** enough in the inventory to load this potion and so on. So we're going to run through the server later on, so check these things. But for the UI, we are running this on the client. 12. 3.03 Binding Key to Open Inventory: Let us now bind the I key to open the inventory. You can also bind the B key, which is sometimes used for backpack. So let's go over to the blueprints again, Blueprints folder. And inside of the player, I've already created this one called input mapping context and input action. This is the new movement system and Unreal Engine. If you don't know anything about it, you can always go to my youtube and check the tutorial I've made for it. So you can now double-click on this one here, the mapping context. And if you open it up, you can see I've already created the movement. And when you look with your mouse, so we have to create a new one, or do you want to open your inventory? Let's right-click here. And let's go to inputs and go to input action. Let's call this one IA for input action, and let's call it open inventory. Now, what we can do is let's save everything. And inside of the mapping context, we can now click on the Plus button here, click here, and select the Open inventory that we just created. Then you can select a key for it. You can either select the eye or you can select B. You can just click on this icon here and write V on your keyboard, e.g. you can also find it here if you wish, looking on the keyboard and then finding the key. So I can also add two buttons. I can just click this plus button and the key. Now you can open the inventory using the beak and the eye key. Okay? So now there is a small mistake so far. Right now, it runs on tick. And I'll show you just in a bit. If you go to the actual name of the player controller, Let's go back to the player here. This is where we handle inputs. So inside of here, if you right-click and now you search for the IA open inventory that we just made. You find this event here and you just realize this, this icon means that this is an event clicking on it. And now we have this one that we just created. Now if you just drag from the triggered and write print string just to see what's happening. And this will just write texts to the screen. Let's now just click on Play, Play. And here I'm going to click the I button. And you can see it prints hello many times and this is not what we want. We just want to open the inventory once when we click, is it this is just spamming the inventory at this point. If you click on AI. So let's go back here. Go back to the mapping context. And here in the open inventory for the peaky and the ikea, remember to press this small arrow to open them here. What we want to do here is for the triggers, click on the plus button, and here select depressed. And what is it says? Trigger fires once only, and this is what we want to do. So click on it here. And the same thing for the eye. We just want to fire it one time when we click on the button, Let's save it. Let's go back. Click on Play. And now I'm going to hit the I key. And you see it only once when I press it. And even if I hold it like now, I'm just pressing it many times. But even though if I just hold it one, so now I'm going to hold the button. You can see it just fires once and this is also what we want. Alright, so now it's time to display the inventory to the screen when we click on the button. But let's move on to the next lesson. You have to learn more about something called an enumeration. So save everything and let's move on. 13. 3.04 Introduction to Enumeration: What an enumeration is, it's just a list of any items you want it to be. So let's go over to the blueprints. Here. Let's right-click, make a new folder, and let's call it enums. So these are the enumerations that will be inside of here. Now right-click here, go to blueprints and you can see we have something called an enumeration. So let's create one and see what it is. I usually give them the prefix of E or enumeration. And for this one, just call it game widgets. We're going a list of game widgets. Let's get inside of here. And now you can see it's very simple. We don't have much inside of here. You can click on Add enumerator. And inside of here, you get this display name and you can give it a name and a description. So what an enumeration is, it's just a list. That's simply what it is. It's just a list and can be a list of anything, e.g. this one is called Gameboy jets. So I just want to make a list of game We just, we have so far we want to open the inventory. One widget that we have so far is the inventory. We also have the main UI, but I don't really need it inside of here. Now we have the inventory so far we actually don't have more. But we could e.g. have something like skill menu. Let's say we have a larger game. We have crafting menu. We could have a pause menu, e.g. we could have a lot of widgets here depending on whatever you want to add. I'm going to delete all of these by clicking on this icon. But you can also make a list of anything else, e.g. crafting items. Maybe you need a gold bar. Goes like this. Maybe you need cow hide or something like this. So it can be a list of anything. But right now we're just going to create, we just wanted to list off the game widgets we have right now is just the inventory. So this was very easy and enumeration is just a list of anything. And we're going to use this list in the next lesson to display the inventory. 14. 3.05 Creating the Open and Close Widget Event: Okay, so now in the blueprints inside of the enums folder, we now created our game widgets enumeration. And the only thing we have right now is just the inventory that we can close and open as the UI. So let's try to make the open and close widget events so it can actually open and close widgets. And usually again, we work with UI inside of the player controller. So let's go back to the blueprints. Let's open up our player controller. And inside of here so far we've made this main UI, which we add to the viewport. Now what I want you to do is right-click here and make a custom events. For this event, let's call it open close widgets. So we're using this event to open and close widgets, e.g. you open and close the inventory, or you open and close the pause menu, or you open and close and whatever e.g. a. Sharp you open to buy weapons from and so on. So for now, we open and close the inventory. So this event here, again, remember, we talked about UI needs to be run on the client. So we have to make a new event, a new custom event, and call this one C L for clients. And let's call this one open lows widgets. And usually for the client, I usually call them Cl as a prefix. And actually I should have done it here as well just to stay consistent. And I'll just call it CL here as well. Okay, so for this one, let's remember in the replicates, run it on owning clients and also reliable. And from this first costume event, let's remember to run this code else. This will never run. So this one Cl initiative not initialized with just this one open, close widgets. So now we run this code as well. Okay, You can compile. Basically what I want with this widget is we need to select which widget we want to open. And then we have to select if we want to open it or close it. So to select which widget we want to open, remember we made this enumeration called E game widgets. So here for this open and close widget, let's now click on the plus here. So we're adding a variable to this event. And let's select here for the variable type. Let's search for E game widgets. This one we just made, this is the enumeration. So let's click on it. And I'm just going to call it widgets. And you can see here now, now we need to connect this enumeration with the client one. So over here, I'm actually going to create the same click on the Plus. It's already set to the game widgets. I'm going to call it Widget again. And now we can connect it here like this. Okay? So we need another variable. We need to specify if we actually want to open or close this widget. So we need to add a Boolean. Let's click on the plus up here. Go select a Boolean as the variable type, and call this one open. Again. Let's do it down here. Click on the plus Collatz open and let's connect them here. Okay, so e.g. just to showcase it for you quickly. So up here in the beginning play, let's say I drag from here and say open lows widget, this one without the client, so this one here. So now I can specify what widget do I want to open? This is because we added this variable down here, specifying e.g. I want to open the inventory and remember to tick this Boolean because you want to open it. If you don't want to open it like this, this means you closing it through, closing it. Clicking on here. It means you want to open it. It's going to go through this event and the outputs are going to be here. Okay, so I'm just going to delete this one for now. So down here, what we need to do here now we need to check. You want to open or do you want to close the widget? So dragging from this Boolean, writing B and selecting this branch for this boolean is just to stay consistent. I usually write B as a prefix, and this is done in C plus plus to find Booleans quicker. So you can see, even though I write a b, it doesn't show up here, so it's a small Secrets, writing it be before the Booleans, boolean names. I usually do this. Okay, Let's go back here. So making a branch right here, right V, and make a branch. Now we're asking, is this Boolean true or false? If it's true, we want to open the widget. If it's false, we want to close the widget. But let's make two functions over here, clicking on this plus button, let's call this one. Widgets, and let's make the second one and call it flows widgets. Let's go back to the Event Graph. Let's drag them out here. And now let's just connect them. So if it is true, we want to open the widget. If it's false. If the openness set to false, we want to close the widget. Now has to specify which widgets are you talking about. So again, in the input, I'm going to click on the plus and select the EA game widget and call it here widgets. And doing the same thing for the close widget, click on the plus. And then you have to connect this widget to here. And now we have the full flow. So what's essentially happening now is if you call this open close widget, again up here, e.g. you say open close widget. You want to open the inventory like this. Now, it's going to go down here. When you call the code like this, it's going to go down here. It knows that you have set this widget to inventory. So it's going to open because this is true. So it's going to go down here. It's true. And it knows the value is inventory. So it's going to open the widget inventory, so we haven't made these yet. So let's go down here. This is the open widget function here. So for here, you can drag from this enumeration. And we have something called switch on enumeration. So switch on if you click on it now. Now what switch on is? It can play different values depending on what you have selected as the value for this enumeration. Right now we only have the inventory as a value, but if you had multiple values, you would have multiple pins here. So you can do an action depending on what you have selected as the enumeration. So here for the inventory, remember, we are inside the open widget. So let's go ahead here and say Create widgets and select this one here. And we want to create the inventory widget. We want to open the inventory. So great widget inventory. And then I'm going to right-click remote to a variable because I like to have them in variables and call this one WB inventory. Okay, so now I have this variable and I want to add to your ports just like this. But now we're actually adding it to the viewport. Just a quick check before we actually do this, you can, again remember we can hold Alt and click on it here too, disconnected quickly. Before we do this, let me take this inventory variable. You can hold Control and drag. If you hold Control and drag, you take this variable value. If you hold Alt and drag, you set this variable holding control and dragging this variable, you get it out of here. And now we can right-click this variable and convert it to a validated gets. And what this does is you're actually checking before you do this. You're checking if this is already created or not because we don't really need to create this and then set the variable if it's already set previously. So that's what we're actually doing. So if it's not valid, if this variable contains nothing, which means we haven't created this yet. If it's not valid, we want to create this variable. However, if this variable is valid, which means we've already run this code before, then we just want to go ahead and add it to the viewport just like that. So we don't need to create it again and again if we've already created it before, right, so that was it for the open widget. The close widget is a lot simpler. So here again, drag from here and say switch on enumeration. So depending on what we want to close, for this instance, we want to close the inventory. So let's take the inventory here again, right-click, convert to validate it gets. And if we have this open, which means so, if this is valid, which means the inventory is open. We want to drag from here and say Remove from parents. And this is how I remove UI from the viewports. Alright, so now we are finished and just a quick explanation before I actually end this, just so we're not too confused about this. So let me just remove this for now. So now we have made this, this custom event here and it's running on the client. E.g. I want to open the begin play here. I want to open the inventory, Let's say open los widgets. So we're calling this event down here that we made. We're selecting as the widget, the inventory, because remember inside of our enumeration, we don't have more values. Let's say I added another value later on, I called it weapon shop, e.g. I. Click on Save, save everything. Now can see here inside of my player controller, I can now select the weapon sharp. And let's say it goes all the way through here and the open widget. Now you can see I can do something else with the up with a weapon shop. I could have created another widget for the weapon sharp and I could display to the viewport, can see how handy it is to have enumerations. Let me just delete this one for now and let me go back. So in the event graph, let's say I called, actually just change this back to inventory. So here I call the open-close inventory. I selected inventory as the input for the widget. And I select it open like this. And this means it's going to go through here. It knows this Boolean is true, which means it goes up here and opens my widget, and it knows what it is because I've set it up here. So now it's going to go here and add the inventory UI to my viewport. So it's adding this UI here, WB inventory to the viewport. And this is the inventory. It doesn't look good because we haven't really finished it yet, because we need to program it as well. But this is what is essentially happen. If this is set to false. It's going to be false down here. And it's going to remove the inventory from the screen. Alright, so now let's delete this up here. We don't want to open the inventory when we start playing the game. However, what we want to do it, Let's now just close everything here. Let's go back to the blueprints player and our bp player here. So what we want to do is when we click on Open inventory, we actually want to run this code here in our controller called open-close widgets. And we want to open the inventory, press the open inventory button. However, remember, our code is inside the player controller and now we are inside of the player. So how do we get this event, which is inside of the player controller, could be played here and the player. Now if you've taken my previous courses, you can try to do this yourself. You should probably be able to. However, if you're new here or I don't remember, Let's take it in the next lesson because now we need to talk about Blueprint communication, where we communicate between two different blueprints. 15. 3.06 Introduction to Blueprint Communication: Hello and welcome back. So now we're going to talk about Blueprint communication. And what Blueprint communication is. We are simply communicating between different blueprint classes. So here in this instance, we want to open the inventory. What are open and close widget event is inside of the player controller. So how do we get the information from another Blueprint Class here from the player? So what we essentially need to do first, we need to get the reference for this player controller. I'm going to delete this print string hello, which just prints it on the screen. Now, what do we need to do is right-click here and write get controller. And what this does is it returns the controller for this actor. So it's getting, you get this controller for display here. Now we need to specify which controller are you talking about. This one is just a general controller. Remember, we made our custom one here. Now we need to tell the engine that we're actually talking about a disk controller specifically. So this is where the communication gets in. It's something called cost to drive from here and say tossed to. And now we need to write the name of the blueprint here of the controller. So let's, let's say PC town. So this one here cost to PC4 uptown here and the triggered, let's connect it here. Now as this controller here now I can actually access everything inside of this player controller, including these variables as well. So, as well as these functions here. So this is what Blueprint communication is very, very simple. You get the controller. This is just the general reference. And then we specify which controller are you specifically talking about? I'm talking about this PC down as this one. Now we can say I want to run this event called Open close widget. The player I can drag from here and say open close widget, this one here. Now I can actually do this. So e.g. for the inventory, want to open it. And if I compile and click on Play, I can now click I on the keyboard and you can see our inventories actually open. Now we can click I again because it's not going to close. We have to still program that logic. So let's close it down. So this is basically the Blueprint communication, very, very easy. However, there is a small problem with casting. Casting makes hard references and how hard references needs to be loaded whenever you game loads. So this will make your game slower. Sometimes you see games there are very, very slow when they load the game. And it might be because they have passed it to a lot of things in their game. Imagine your game can be very, very large when you finish your game. And maybe you have like 100, 100 items you're costing two or 100 blueprints you're costing two. And all of these are creating hard references, which then slows your game. I'm not saying you should never use this, but you should avoid using it whenever you can. And in this case, we can actually avoid it by using something called Blueprint Interfaces. So let's go ahead and the next lesson and talk about Blueprint Interfaces. 16. 3.07 Blueprint Interfaces: Now that we've talked about costing, Let's now talk about Blueprint Interfaces. So this topic is usually a bit difficult for beginners, but I'll try to explain it as best as I can. But let's now close everything here and here and the Blueprints folder, Let's right-click and go to blueprints and make this one called a Blueprint Interface. And usually I give it to int as the prefix. And for this one, let's call it the name of the blueprint I want to reference to. So I want to reference to this black controller to get my open and close widget event. So let's call this one layer controller. Now I'm also going to right-click and make a new folder called Interfaces just to stay consistent here and drag this into this folder. And let me go to the folder, open my Blueprint Interface. So what a Blueprint Interfaces you can see here. Very, very simple. I can't really do anything in this graph. I can't move anything or do anything. And we're not really supposed to work here. What we are supposed to here to the right, we can create functions. So this first function, you can click on it. You can click on F2 on the keyboard to rename it. And I'm going to call it get's layout Controller reference because this is what I'm trying to do. Here in the output. Let's click on this and set a variable here. Now, you have to select what you want to reference to. I want to reference to my player controller called EC Hook Town. So selecting it here. And now let's just call it player controller. Okay, So this is actually it for now. So now we've created this function gets layer control or reference, or we try to get the reference for this PC folk term player controller. Okay, let's now close this interface and let's go back to blueprints. And we need to go inside of this player controller and add our interface we just made. And we do this by clicking on last settings. And over here in the interfaces, let's click here and search for it ends layer controller, this is the one we just made. So clicking on it here. Now, let's compile. If you do this now we can see here we have a tab called interfaces. And if you click on the arrow, you will see your interface. A very small mistake that many people does here. If you go back to the interface, you have to remember to click on compile. Else you will not see this down here when you add your interface. So remember to click on compile. Very, very important to always compile your code. So now here in the interface we can now double-click on it. For this, for this here, for this reference of this variable, we can drag from here and write self. Basically what this is asking for, this variable is we need to specify what is this EC **** town variable, what is this? And what we're basically doing here is we're dragging here and saying self. Because remember, we are in this blueprint already, the player controller we are trying to reference to. So we're basically saying this variable reference is self, meaning whatever we are inside right now, which is this blueprint class here. So now what we can do is we can go back to blueprints, the player and bp player. So let's go back here. Instead of casting, Let's just delete this part. Here we get the general controller. So instead of costume, we can now drag and say gets their Controller reference because this is what we actually created in this function here. So drag here and say it's player, controller reference, and it has to say message in the end, which means it comes from a Blueprint Interface. So this is a Blueprint Interface function, clicking on it here. And now we can connect it here and from here, just like before, we can now access everything inside of this layer controller. And now we can say Open lows widget like this. And now it's working fully. You can see if I click on play and I click I on my keyboard, it opens the inventory just like before, and we're avoiding the fasting which created a hard reference, which can slow our game down. So this is a lot better to do. So I'm just going to go through it quickly because I know it's a confusing topic for some and it was also confusing for me a while back when I just started. So let's go back here. We created a Blueprint Interface. Inside of here. And inside of this Blueprint Interface, we just made a function called getline Controller reference, where we added whatever player controller reference we want to reference to. And we want to reference to this one specifically. Now what we did is we went to that controller and we added the interface and the Class Settings. We added it here. This made this interface function appear. And what we did here, now we had to specify if I just disconnect this here, this PC **** town controller variable. If you don't do this, it just doesn't know what you're talking about. This. Remember if you put it like this, it means this variable is empty. And whatever you trying to do here, it's going to give you an error. So if I click on play here and I click on I, on my keyboard, nothing happens. And if I exit, it's going to give you an error saying x is none access none just means this variable is empty. I don't know what you're trying to access or what you're trying to do is this variable, it's empty. I don't have any information. This is why you need to say self, because we're basically defining this variable. We're saying this player controller we're talking about is self, which means this blueprint. Whatever blueprint we are in, this self reference is this one. So the PC factor, This is the way we're referencing the player controller. And now inside of the player, we can now take this Blueprint Interface function. And we know what the variable is because we did this self reference over here. And from there we can now access everything inside of this layer controllers so we can even access this WB made if we wanted to. You can see here, if I drag from here and say WB main, I can actually get that variable as well. Alright, so this was it for the blueprint and surfaces. So now we can open the inventory. But let's go ahead in the next lesson and actually finalize this because we also need to close the inventory. 17. 3.08 Displaying the Inventory: Okay, so the final step for opening and closing the inventory. Right now the problem is when we click on I on the keyboard, it keeps opening the inventory, so we need to close it as well. I'm going to go back to the player controller. And inside of here, Let's make a new variable, a Boolean called is, let's call it inventory is open. Now we're going to control the opening, closing by this boolean here. So here in the open widget, let's go in here. So why don't we open the inventory and we add this to the viewport. Let's take this here. And remember you can hold Alt, drag it and set it here to set the variable. Yeah, so if you want to drag it and select Set here as well. So we're going to set this boolean to true. So inventory is open, that is true. And when we close the inventory, so if you go back to the Event Graph and click on the Close widget, we're going to set this to false. Okay, so now it's false. And let's go back to the player here. So depending on if it's true or false, this, this variable here, then we want to open or close the inventory. Remember, we're already making this Blueprint Interface communication with the player controller so we can access whatever is inside of this black controller, including this variable we just made. We can now drive from here and say Is, are inventories open here? We can select the Boolean here so we can get the value of this. And now we can make a branch. So right branch. So if the inventory is open, we want to go ahead and close the inventory. Let's copy paste this one here. And if the inventory is not open here, we're going to open the inventory. Let's drag them here, connect this to the targets. And if you want to make it a lot better, you can just double-click on the line here and you can make it more organized. Okay, so what's essentially happening here is we're asking, is the inventory open? If it is already opened when we click the button, then we want to close it. If we click the button and the inventory is not open, then we actually want to open the inventory. And let's save everything. Let's click on Play. And now we are going to click on I to open the inventory. And I'm going to click on I again, and you can see it closes it. So clicking on eye opens it. We can again, it closes it. Remember I also found that be key if you press on the B key. And this is only here in the blueprints layer. Here if you click on the mapping contexts, if you've also said the BQ for the inventory, depending on what keys you have set, you can press those keys here and the player to open the inventory. So now it's working as it should. 18. 4.01 Creating the Base Item Blueprint: We are now ready to jump into the items. And the reason why we make the bootable items first before we actually coding the inventory, is because we actually need items that need to go inside of the inventory slots. So let's go ahead and create the items before we continue with the inventory in the blueprint folder, Let's now right-click here and make a new folder. Let's call this one items. And inside of here, Let's right-click. Go to Blueprint class. And you can make an actor here because items are just static actors inside of the level. E.g. this plant could have been an item. This tool could have been an item. So these are just actors. If you read here it says an actor is an object that can be placed or respond in the world. So let's select the actor and let's call it BP item base. So usually I create a base class if I want to create multiple of the same thing. So if I want to create multiple items, I'm creating a base class. And then from that base class, I can create the items. This is called child blueprints, but let's talk about that in the next lesson. For now, I want you to go into the item base. And inside of here, Let's go ahead and add a component. And let's search for a static mesh. And a static mesh is just so that we can add our items we have in our folder. And let's call this one item. Okay? And you can see here for the static mesh, we can add a mesh, e.g. we can add the banana as an item and so on. But right now you are in the base class and we don't really want to assign anything here. We're going to do that later. I just wanted to create this Item, static mesh components. So let's add another one, clicking on this item. And then going to add, and let's add a collision. Let's add a collision sphere, selected collision sphere. I'm going to call it a collision sphere. And the reason why I'm adding this one is because we need to interact with the item. So imagine if we go to Assets items, imagine if this item is in the world, then we need a collision sphere. Because we need to know when the player is actually colliding with this item so we can lose it or not. Let's delete this one for now. And for the item, Let's go back here. Let's go back to the collision here. So for the collision, for this item, I don't want it to have collision, so let's remove generate overlap events. Let's remove this one. And let's say here in the collision preset, no collision. Let's compile. Let's now go back to the collision sphere. Now for the collision sphere at the top, I'm just going to make the radius to 100s. So you can look and see here if you go back to the items and drop the item-based to the level, you can see this is the radius in which the player can interact with the item. So if you increase it, that player can interact with the item when the player is inside this sphere. So you can just adjust the radius as you like for your game. I just wanted to put it for at 100 right now. I'm going to delete this one in the level and again go down to collision. And inside of here, we want to generate overlap events, so that is correct. This one is correct as well. And over here in the collision preset, I just want my player to interact with this sphere. I don't want anything else to do so. So let's go ahead and say, let's say customer up here and the collision preset. I'm going to ignore everything except for my pond, which is my layer. Let's compile. And before we forget, let's actually go up here in the BP item base in the class defaults. And up here, if you scroll up, you have to click this one because remember we are in multiplayer and replicates just means, again, just like before, you replicate the information to the client. Because here, when you play as the server and here we have the client. So if you don't replicate the blueprint, then the client will not be able to see it. Only the server, which is this guy here. The server will be able to see the item, but the clients, all the clients connect it to that server, will not be able to see the item. This is what replicates mean. It's replicating information from the server and sending it to the clients so they can see that information. Now, we want the clients to see this item. So we're going to click on replicates, and we're also going to replicate the movement of the item in case the item moves. And that was it for the item base. So let's go ahead and close this down and move on to the next lesson. 19. 4.02 Introduction to Child Blueprints: So now that we have created our item base, Let's now talk about child blueprints. So let's go to Blueprints folder again and go to items. Now, for this item base here, at the reason why I created a base item Blueprint class is because we want to create children blueprints from this one. And I'm going to explain what that is so well, this one you can right-click up here, you can see something called Create Child Blueprint class. So clicking on this one, and I'm just going to call it something random. So now we have a Child Blueprint class and you can hover your mouse over it and it says the parent class is the BP item base. So what does that mean? That means if I do any edits in the item base, it will inherit these edits and apply them to all of the children. So let me right-click again and create another child Blueprint class. Just make sure it's from the item-based you're doing it. So doing it here, and I'm just going to call it something random again, right-click the item base rate another child and calling it something again, okay? Now we have three children. We have this one, this one, and this one. And they are children of the item base. So now if I go inside of one of the Child Blueprint Classes, you can see it already inherits the item Static Mesh Component we made in the item base and also inherits the collision sphere. Remember these are components that we created inside of the item base. So now in the item-based, if I create anything, e.g. I want to make a variable and say, is this Troy bubble or whatever, anything random? This is Troy Abel and I click on compile. Now, if I click on any of the blueprint child's, you can now see in the last defaults. Now I can see this variable is destroyed able, even though I don't have any variables inside of here. This is because it's inheriting all of the things that you make inside of the item base. So now I can actually say if it's destroyed or nuts. And this is very handy because now all of the Child Blueprint Classes, they have the same functionality. I can set them to destroy bubble or nuts. So we do this to make the speed of your game development faster. So instead of going in every single one and making a is destroyed double boolean going in here, making is destroyed a Boolean. So instead of making it 100 times, we can just make it one time inside of the parent blueprint here. And then all the children will inherit those settings. The same thing goes for characters. Let's say you're creating a lot of skins, a lot of players skins. Obviously you want to create a main, like a parent, a blueprint class for the skin, and then create children blueprint classes from that base skin parent class. The reason you do this again, if you want to change a specific settings for all of the 100 skins you made, you can just do it once in the parent Blueprint class, the, the base one here, and it will inherit its, all these children will inherit it as well. Okay. So that was it. Very, very basic. So let me go ahead and delete those here. And with that knowledge, we are now ready to create all of the items. 20. 4.03 Creating the Items: Okay, let's go ahead and create all of the items. Let me right-click on the item base. Created Child Blueprint class. And for the first one, I'm going to call it BP banana. And the items we're going to make again, you can click on the assets up here, items and you can view them here. These are all the items we want to make so that we can loot and have in our inventory. Let me go back to the items. Right-click the item-based again, and let's create BP flavor. Right-click again with another child, EP knife, another one, and let's call this one BP manner, ocean. Another blueprint cloud. Just make sure the parent class is item base. Make sure you don't click anything wrong here. So the item base rate, blueprint, bp meets, and the last one is the stamina potions. So here titled VP stamina ocean. Alright, now that we have all the items, Let's open all of them up here. So the banana lever, knife manipulation, meat and stamina, potions. But let's go to the banana first, click on the item. And here in the static mesh you have to assign the static mesh to it. So I'm just going to search up here for banana selected here, and here it is. Well now it's added here as the item. Okay, Let's compile. Let's go to the cleaver like an item. Go ahead and select the cleaver. Just search for it, compile. Now for the knife item and search for knife. Those are the same process again and again. Let's go to the menopause action item, search for manor potion, compile. Go to the next one. Item meets compile and the last one, stamina potions and click on the item Static Mesh. Go ahead and search for stamina and select this stamina motion. Now, let's click on File and Save all just in case. Okay, So that was it. And before we end this, I actually want to do one more thing. Let's close everything. I want to create a variable called item name and we're going to use this later on. We're not going to use this now. But again, remember, you don't have to go into every single one of these Child Blueprint Classes and create a variable called name. You can just go to the item base. And let's actually delete this one because of that, we just made that too to see the inheritance. So let's create another variable now. Let's call it item name. And for the item name, the variable type, we're going to make it into a string. Click on compile. And as you know, a string is just a line of text so we can actually give it an item name. And maybe if you forgot, why did we not choose texts instead of a string? The reason why we chose a string is, remember, a text is the same thing except for, you can see this flag appears when you choose text. And this is because text is localizable and this means you can translate whatever you write here to another languages here in Unreal Engine. So in window, I believe it is, or actually it's in tools. Here you can see we have something called a localization dashboard. And inside of here you can translate your game into different languages, e.g. German, Japanese, Chinese, Arabic, whatever. You can translate that text variables. However, if you choose a string and you'll want to translate your game later on, you will not be able to do so. You have to select texts to translate that that text you want to write here. So I don't want to translate anything. This string name is actually just going to be used as an ID. So let's save everything. I just wanted to be a string. Now we've created this item name inside the item base. So now every single child here has this item named variables. So I'm going to open all of them. On the first one. You can see here, it says item name. And if I just open the full blueprint editor to show it to you, and the class defaults for this blueprint child, you can see the item name variable at peers. Now for the item name here we can write banana. This is the banana compile and for the stem and a potion, let's call it stamina, ocean. Just like this for the meat, let's call it meets. And for the menopause actually stimuli portion here. And for the men and potion, let's call it manner ocean. And for the knife, click on class defaults, right? Knife, compile. And for the cleaver, Let's write lever. Okay, and remember this view appears with this button up here. This is because the, The Blueprint class is empty and this is why it's showing like this. Okay, so now we have assigned all the names. We're not going to use it now, but we're going to use it very, very soon and you'll see why I made this name variable. Let's close everything down now and let's move on to the next lesson. 21. 4.04 Introduction to Structures: Alright, now that we have created all of the items, we're actually ready to create the information of the items. So the name of the item, the thumbnail, so the image that appears inside of the inventory when you allude the item, the category of the item, and so on. Until all of the information for a single item, we need to define all the information. So before we do this, we can actually do this inside of structures. Let's go to blueprints. And here Let's right-click and make a new folder. Let's call it. You can call the structures, but I usually just call it structs. That's up to you. Inside of here. Let's right-click. Go to blueprints and select this one called structure or this one. I usually use S t as a prefix for structures. And let's call it item info because we want to create the information for the item. Double-click on it and you'll see this is what I structure looks like. So a structure is just a collection of variables. So instead of going to the items and e.g. here in the item base. Instead of going here and creating variables, e.g. if the item is stackable, or maybe you want to have the thumbnail for the item, or maybe you want to have the category for the eyes you can see. It gets to a lot of variables here and sometimes it gets messy, so we usually don't do this. Let me just delete them here. But you can do is you can create a structure inside of here. You can create all of the variables. E.g. I. Wanted the item name, I want e.g. the coin value for this item if I want to sell it and you can choose what type this variable is, e.g. for the coins, I can select a float, and for the name I can select maybe a text because I want to translate it later on. Now we have all of these variables inside of a structure. So the cool thing now is if I go to the item-based e.g. I. Can make a new variable here as the variable type. I can type the name of the structure. So SC, item info and I can select it here and I can save. And now you can see if I click on my variable. Now I have all of the information here for this item. So I can have the item information inside of this structure. And if I click on one of my child blueprints, I can see here in the class defaults. You can see now all of this information, the name of the item, the coin value, and whatever variables you add. So very cool. Structures are just a collection of variables that you define inside of here. Okay, so let's delete all of this for now, and let's delete it here from the item-based because we're going to create something much cooler than this. Let me save everything. Now that you know what a structure is, let's actually go ahead and create the item info structure. 22. 4.05 Item Info Structure: Alright, so let's go ahead and create the item info structure. Let's click on structures. Let's now open the item info structure. And inside of here what we want is the name of the item. Let's create a new variable. We want a thumbnail so the image that appears inside of the inventory when we allude Dyson. And the type here is a texture 2D, which just means an image. And select it here, object reference. And let's make a new variable. And we want the e.g. we want a description of the item. You don't have to. It depends on what game you are creating. Some games don't have a description, but let's just add it here. I don't know if we need it or not, but we might need it. So let's create a description for the item. We can set the category for the item. So let's choose this one as the variable type. I'm actually check I forgot here. So in the enums are we haven't created it yet. So in the enumeration is you can actually create it if you want to as the exercise in the enumeration, I want an enum with the categories for the item. So we have the category weapons, food and potions can go ahead and create it and add it to the structure if you wish to. Now let's try to do it together now, I'm going to right-click here, go to blueprints and select enumeration. This one item category. I'm going to open it up and inside of this list. So remember an enumeration is just a list of items. So here I want a list of categories. I'm going to say weapons. The next one I'm going to add is food, and the third one is oceans. So we have these three item categories. And let's go back to the item info now for the category, I'm going to select it here and say E item category. So whatever you call the enumeration selected here. Next one, I'm going to say I'd send class. And the item class is just so that we can spawn the item into the world if we drop it from the inventory. So let's select it here and search for item base. Remember we made the item base. Now this is the item class selected here and select the class reference. Very important. The class reference, differently from the object reference is that the class reference is used when you spawn things. So we want to spawn the item when we drop it from the inventory, so we need the class of it. Now let's add another one and call it is on summable. So can we drink or eat this item? And Boolean, this is just a yes or no questions. So it's a Boolean and the other one is stackable, so it's this item stackable in our inventory, can we have two items and the same slot, three items and so on. And the last one, I'm going to say Max Stack size. So how many items can we have in one inventory slots, e.g. we can have 99 bananas before we create another, another stack. So all this Max Stack size is it's just an integer. Alright, now we are finished with the item info. And instead of adding the item info to the ice and base as a variable, I'm actually going to do it through a data table. So you can see here, I'm not holding back with the knowledge. I'm trying to actually show you how we would do it like professionally in a game. I don't want to do it the easy way. Let's actually go ahead and learn about data tables and I'll show you a very cool way on how to add the structure. 23. 4.06 Introduction to Data Tables: Alright, let's now go ahead and talk about data tables. So in the Blueprints folder, Let's right-click, make a new folder, and let's call this one data tables. Inside of here, Let's right-click, go to miscellaneous. And here we can select something called a data table. You can see here important spreadsheet table is what it's also called. So you can click it here. And now we have to select what structure you want to use. So you need a structure before we can make a data table. Remember we already made our structure in the previous lesson. So now we can go ahead and select our item info structure. And now we can click on OK. For this data table, we can call it d t item info, data table, item info. Now let's open up this data table. And this is what it looks like, very, very simple. It's just showing you information. You can see all of your variables that you have created inside of your structure appear here. And right now it's empty. So you can click on Add if you want to, and you can see what happens when you click on add. An item will be added to the data table here. So you can see if I keep adding items, I'll keep adding items down here. What you can do here, clicking on the first one, e.g. you can see for every single item in your game, you can define the name of it, the thumbnail of it. We can define the description of the item, the category for it, the glass, e.g. it's the banana, and so on. So you can see, you can define information for every single item and you can have it in a nice structured way inside of a data table. Now this is basically, this is what a table is. It just contains information. So we have the structure. And with that structure, we make a data table so that for every single item we can actually specify information here. And we're going to do it in a lot easier way. Usually we don't use it inside of here. So instead of Delta tables, we don't usually go in here and write the name, so like the thumbnail and so on. I'll show you a fuller way to do this. So let's go ahead and just click on Delete for every single one of them here, remove, remove, remove. So now it's empty again. And let's save everything. Let's close it down and let's move on to the next lesson and I'll show you how we can add the information for the item. 24. 4.07 Item Info Data Table: Okay, so now I want you to go inside of Google Drive. If you don't have one, please make an account. Or you can use Excel if you have Excel, but usually it's the easiest way just to use it inside of here, that Google Sheets, when you have an account here in Google, go to Google Drive, which you can do up here. And actually up here. And you can select Drive. When you are inside of Google Drive, just right-click here and just make a new Google Sheets. And Google sheets, I'm just going to call it RPG inventory tables, just in case we have a multiple. So now we have this one here, and I'm just going to make it a bit prettier. It's up to you how you want to design yours. Alright, so now I've stylized mine. I just use this one in the center. I use this one and I use this one here. Okay? So another very important, it's just up to you how you want to design it. Now, up here, we want to write ID. So up here I'm just going to make all of them bolt. We have an ID and now you actually have to write every single variable that you have written here in your structure item info. So we have an id, you have to have this to begin with. And then we have the name, then we have the thumbnail, we have the description. And remember to write these exactly as you have written them here in your structure. E.g. if you have a space here, you have to have a space here as well. So write them exactly as how you have written them in the structure category. We have the item loss, we have the is on to mobile and we have the is stackable and the last one, Max Stack size. Okay, so now we have all of them here. And for the ID, the reason why we need an ID is because later on in the game, we tell the engine that we give it an ID here and the ID, if you go back to your item base, remember in the item base, you created this item name variable. So this will actually be RID here. From this, we're actually going to tell the engine. So e.g. for this banana, we're going to tell the engine from which row we're going to take this information. So e.g. if you have the idea of banana, it's going to take this information here. It knows that it needs to look at this row where the ideas banana. And it knows the thumbnail of the banana and the description and so on. This is why we made this item name and we wrote the item name in every single child blueprints. Alright, so we actually need to add every single item here so I don't remember it exactly. So let me just minimize it and open Google sheet like this. And now we can write banana lever. Then next one is Knife, manner, ocean and meat and stamina, ocean. And remember to write the ID exactly how you wrote the item name here for every single of your items. So remember to write the same thing here. So it actually knows what information it should extract from. So what row it should extract from. I'm going to copy all of those and paste it. Here are the thumbnail. You can go to the UI and to the icons. I've included some of the thumbnails for you. So for the banana, you can right-click, go to Copy reference. And now you can go here and paste this reference. So this is what it looks like. It looks weird, but now the engine knows where this icon banana is because you have specified the location of it. I'll do the same thing for the cleaver. You can right-click the clever API reference. And now I can paste it here. But the knife reference paste it here. And I'm just going to click on No for this one. And for the menopause ocean up your reference and for the meat as well. And for the stamina ocean. Alright, I'm just going to fill the first one now here and then you can do the rest because else it's going to take forever. For this description, you can just add a description for your items, e.g. for the banana, I can write a delicious banana or something like that. For the category, Remember, in the enumeration item category, we have the category of weapons, food and potions. And this is also what you have in the item info. Remember for the category you use this enumeration. So it can be one of these three right now. If we go back, e.g. the banana is a, is food, e.g. the manner potion is potions. Remember to write it exactly as you have written it here. And for the item class, the way you can get this reference is not by going here and the items and right-clicking and saying copy reference. Because if you do this, this is actually not an item class. This is an item actor. So let's delete it from here. The way I usually do this is if I just go to a data table here. And I'm just going to make a random item here. And let's select an item class e.g. the banana. I'm going to right-click this here and click on Copy. Now I can go back to my Google Sheets and paste it here. And this is the correct one for item classes. So here for the last reference here, correct one is if you see blueprint generated class, this is the correct one. Okay, so now we have the banana here and what you can do is you can just copy this, paste it down here, and you can just change the name of the banana to cleaver. And this one here as well. So two times lever, lever. It can do this for the rest is consumable. It is just a yes or no. What I usually do in Google Sheets is I go to Format and do conditional formatting. And instead of here, I select for the format rule, I select text is exactly here. We can say false. And it will point to red, or the color will be red if it's false. And I'll add another rule and change it to true. And then change the color to green if it's true, just like this. So now I can see if I write false here, it becomes red, pyrite, true, it becomes green. And this is for booleans here. Whenever you take a Boolean, it says true, like this. Whenever you have it unchecked, it says false. So this is very cool. Now, let me just delete this and instead, instead, I'm going to click on Insert and I'm going to select a checkbox. I can see for this checkbox, if it's unchecked, it's red. If it's ticked, which is true. It is actually like this green. There's a lot cooler in my opinion. You can just drag this on all of your items just like that. Actually let me have it to false before I do this, dragging it to all of the items just like that. And I think this is a lot cleaner. Okay. Now that you have all of the information filled for every single item, you can go ahead and click on File and go ahead and click on Download and download it as a CSV file. Now I'm going to click here and show in folder here in my Downloads folder. Now I can rename it and you can rename it to the same exact name what you gave to your data table. So we call the DT item info. And now I can open my engine and here I'm going to close everything down. I'm going to go to my data table. And here what I want you to do is import is that it's able to your engine. So what you can do is just click and drag this into this data table. And now it's going to say Import. It's okay, cool. Let us click on this here and see if we have any errors. Now can see Very cool way to fill all of the information. So now we have e.g. for the banana, we have the name, the thumbnail, we have the description, the category, the item class. If it's consumable and stackable and the Max Stack size, so we have them for every single item. This is the easy way to do this here in the data table. And the reason also, if you have non-programmers on your team, e.g. game designers and whatever. It's a lot easier for them just to change information from data sheets and download it here and just imported into the game. And that way they automatically change all the information for the items. So very cool. If you have a game designer who doesn't know anything about programming, they can just do this change information, e.g. you could have something like coin value and you can design how much it costs to buy these items from the shop. And people can just change the values here. Important information, and it will automatically change them inside of here. Alright, now that this is done, let's go ahead and create a library function where I'll show you how to extract information from each row. 25. 4.08 Item Info Library Function: Alright, so let's go ahead and click on the blue openness folder. Let's right-click and make a new folder called libraries. And inside of here, Let's right-click. Go to blueprints and select the one called, Let's see here, blueprint function library, a library here and call it PP function library, because we can only have one. The function library if you open it up. It's basically a library of functions so we can hear you can just add new functions. Basically have a library of functions that you create here. The cool thing about a library is that you can use it globally. So e.g. here, let's say, haha, I don't know. We're just going to call this function hahaha. And now in the player, we can just go here to the player now and right-click and say, hahaha. And now we can see, we can actually call this function from the function library and we can use it here. So whatever we create an a function library we can use globally in any blueprint we wish to. So just, just so that you know, your game can get very slow if you have hundreds of functions here. So it's bad practice to just make functions inside of here instead of their respective blueprints if you don't need them. But for the item info, the item information, we actually need it in multiple blueprints. So this is how you need to use function libraries. You need to think, how many times are you going to use this function if you're going to use it in the player and the player controller, maybe you're going to use it in another Blueprint Class. If you're going to use it multiple times, it's a lot better to just make it in the function library. So you don't have it to make it over and over again in every single Blueprint class. Over here, let's make a new function. Let's click on F2 to change the name. I'm going to call it get item info. For this get item info, the thing I want to do is right-click here and say gets at a table row, data table row. Okay? So for this one here, we have to select which data table are we talking about? I'm talking about DDT item info. And what is the item or what is the row name. So now you can see here, when we select a row name, e.g. the knife, and we run this function. It knows that it needs to take information from the knife row here. So if I open up my Google Drive again, it takes information from this ID, which is the knife here. And then it knows all of this information which comes out here. Because if you take it here and say break, then you break this information into all of these variables you created. So if we select the row name knife, it now knows what the knife thumbnail is, the description of it, the category, because you have defined all of those here inside of your data table in Google Drive. And the reason it knows which row item name you have is because in every single, remember in every single item, you defined this variable called item name. So for the meat e.g. it's going to take this thing you have written here and the item name meet. We're going to run it through here. Remember this is a string variable. You go to that same base. We created this as a string variable here. And the item info, I'm just going to make an input of string that we can use later to put it in here. And let's call it item name. Okay, so we have this one. And now if you go to the data table, so there is a small mistake if we don't do this. So in the data table, you see here the id don't have spaces. So even though you put a space in your Google Drive or Google Sheets, you can see here you have a space, you have a space, but the space is automatically removed here. So e.g. for the potion, if I go to the item stamina potions and see here you have written a space. But for the data tables, they cannot have spaces in the ID. This way, we actually need to do something because all of your items have space. This is the data table, doesn't have spaces and it will give you a buck and don't know what you're talking about. So we need to remove the spaces from all of these way we do this is here in the function, just drive from here and say replace. So we're going to get the item of the name. We're going to replace, just write as space here in the front. Just one space. And that was it. So it's going to replace all the spaces with nothing, which means it removes this basis. And then it's going to get the row name. That way we can remove all of the spaces that we have made just like this. And let's delete this one for now from here and say return node. And drag this into the return now to automatically create an output here of the item info. And let's call this one item info. So that was the function we need to create, compile, and save everything. So the cool thing is here, e.g. on the player, we can now say get item info. This is the function we just made. And you can see here, we don't really need to connect pins from here because in Blueprint usually you connect it here because you're setting information. But these, these green ones, as you can see here, they don't have this and this is because they're just getting information. They're not setting any information. But we don't need to run it through this one. So to get information here, Let's go back to the function library. They can get item info, click on pure, and now compile. And let's go back to the player. Now we can say get item info. And you can see here it gets, it makes it into a get function instead. So this is why you press pure. Okay, so now we can get this item info. Then we just have to specify what item are we talking about. We're going to do this later. So we're going to do it dynamically through the inventory depending on what item you select or loot from the ground. So it's going to give it the item e.g. we allude to the stem in a potion from the ground. Okay, it's going to run through this here. It's going to put the role name here, stamina potions. And now it already knows what information you're talking about because you have defined all of this information here. So in the output here, if you drag and say break, now it knows the stamina, potions, thumbnail description category and so on. So very, very cool stuff. I'll see you in the next lesson. 26. 5.01 Creating the Inventory Component: To make the inventory Component, Let's go to the Blueprints folder. And inside of here, Let's right-click and make a new folder, and I'm going to call it components. Inside of this folder, Let's right-click and click on Blueprint class. So here what we're going to create is this actor component is this is basically the inventory component we are creating. So let's click on it. And I'm going to give it an, a prefix of AAC for actor component and call it inventory. Alright, so if you double-click it, it just looks like this and ordinary blueprint as you are used to by now. So for now, let's not work here inside of this one. Let's go to the blueprints and actually find the player. So inside of the player folder and the player, and inside of the player, we can now add the inventory components. So here in the components, click on Add and then search for the AAC inventory you just created. And here we have it. Now we have the inventory. But right now we can't really do much with it. So this was it for this lesson, just adding, creating, and adding this inventory components. So let's move on. 27. 5.02 Inventory Slot Structure: Before we can continue working with are created inventory Component. Let's go ahead and create two more structures. We are missing these last structure on the category structure. So let's go to the Strokes folder. Here we created the item info. Now let's right-click here again and go to blueprints and select structure. This one we are going to call inventory slots. And let's go inside of here, know what the inventory slot structure is. It's basically holding information about what is inside of that specific inventory slot. Remember here in the UI we created this inventory slot. So we're basically having a structure that holds information about what is the specific slot in the inventory contains. So first off, it contains the item. So whatever we have loaded and the item, if you click here, remember we made a structure called item info. So it contains this item inside of the slides. Secondly, it also contains how many of this item we have item quantity, and this is just an integer numeric value. Then it contains the widget itself. So I'm going to call it inventory slot. Then selecting the UI, we created WB inventory slot, so it holds the inventory slot variable itself. And as the last thing, I want to add a slot index, which we can use later on. Don't worry about it for now. But the slot index is just which inventory slot are we talking about? Because remember, when you make an inventory, you have many, many slots in the inventory. So it's always nice to give them an index which you can use later on if necessary. And that was it for the inventory slot. So let's move on to the next lesson. 28. 5.03 Inventory Category Structure & Data Table: Let's now go ahead and create the structure for the categories. So going back to the structures folder, right-click again and go to blueprints structure. And let's call this one inventory category. Let's open this one up here. This one is very simple. It's simply going to contain what category are we talking about. And again, we have this enumeration called item category, this one here, item category. And the second thing we need is the icon for the category. So what does it look like? Oh, category icon. And we have a couple of icons for the category. Now, this type here is a texture 2D. Texture 2D, simply just an image. This one texture 2D here back in the assets, actually down here in the UI, we have icons and we have icons for the categories. So e.g. the weapons category is this knife here we have the category and the icon itself. Next, we need to create a data table for it, just like we did before. So I'm going to open that up here. This is the item info data table. And actually down here I'm going to call it DT item info. I'm going to create a new one by clicking on the plus down here. I'm going to call this one DT inventory category. I'm just going to drag these tables. Are these fields a little bit wider here? Just like that. Okay, so just like before up here we have an id. And then remember from the structure you made, we have the category and then we have the category icon. I'm going to make them bold up here. So for the ID, we just write the name of the category. Remember we have weapons, we have food, and we have quotients. I'm just going to copy this back here. Again, remember to write this exactly as how you have written it here in the enumeration, else it will not work. So in the numerator enumeration item category, these are your categories. So remember in the data table we have to specify them exactly like this. Now for the category icon, we need to copy references. So I'm going to go back here in the UI and the icons. Now for this weapon's category, I have this one. So right-click, just like before we did with the items, right-click, copy a reference, go back here. Now for the food, Let's see which one it was. It was this one food category. Right-click up your reference, tasted. And for the potions here, consumables, oceans. Right-click, copy your reference and paste it over here. Now we are basically finished with this one. So let's click on File, download as a CSV file, I'm going to rename this CSV file here to DT inventory category. And before we do anything, let's go back to the engine. Go to Data Tables, and let's right-click here, go to miscellaneous and then select Data Table. Now we have to select which structure are we talking about? We're talking about the inventory category structure, like okay, and call this one DT inventory category. Now what you can do is again, go to the download folder. We can drag this on top of this data table and it will automatically import everything. Now let's open it up and see if everything is correct and just check everything you can see it has imported everything correctly. And now let's save everything. Their final thing we need to do again, we need to create a library function. So let's go to the library's function library. And here just like before, let's create a new one called Get category info. Or maybe it's better to call it get's inventory category info. So we are specific about what we're talking about. Here again, I'm going to add an input of string just like before. And let's call this one category name. And just like before, I'm just going to go into the item info and just copy paste this here. Remember the only thing we did is write a space here so we remove all the spaces. We're replacing them with nothing. So I'm going to the inventory category, pasting it in here, connecting the source string. And from here we can say Get Data Table row. Just like before, we select our DT inventory category. And for the name, it goes down here. And for the output now we can, we can get a return node at a return node. And then again, just like before, drag it into the return now to automatically create a variable here and call it category info. Okay, so now we can use it just like before. Now we can go anywhere in any Blueprint and get this info. So e.g. I. Can go to the player and here we can say Category info. And as you can see again, this is a set function, so we need to go back to our library before I forget, click on the category info, set it to pure. And now you can see it is pure. It is just getting information. So we need to, we don't need to set it. So here we need to write the category name. This will be set automatically later on. So this is what we have been doing so far. We created an inventory structure. And then over here, we created a data table in Google Sheets and important is here. And then we created a library function which is called get inventory category info, which is just going to get information about whatever row name we input here later on. And we can get that information. 29. 5.04 Creating the Inventory Variables: Let's go ahead and create the variables for the inventory. So let's go back to the components folder inside of the inventory component we created earlier. Let's open the full blueprint editor. Inside of here, we need to create a couple of variables. First off, we need to create a variable called amount of slots. So we need to define how many slots does our inventory have? And the type is an integer because it's just a numeric value, as you can see here. And the next thing we need to add is selected inventory category. So later on, we need to set which category we have we selected. This one is e iGEM category, just like this. So later we can define what category have we selected depending on what button of the category we are pressing. For now, we can just let it be like this. Next, we need to create the categories that we have. So we need to have all the items we elute from the ground inside of variables that we can contain. So first we have the weapons category, and then we have the food category, and then we have the oceans as a query. And remember for the category here in the structures we created this inventory slots. This inventory slot contain the item, the quantity, the inventory slot itself, the widget itself, and the slide index. So this is actually the categories. So let's click here and say inventory slots and select this structure here. Now if you compile it, you can see you have this slot here. However, for a category we have multiple slots. So for each category we have 16 or how many amount of slots, in this case, for this game, we are going with 16 slots. For the categories. They don't only contain one item. Remember for each category they contain the amount of slots we have set over here. So e.g. if we have 16 slots, weapons category has 16 slots, the food category has 16 slots and so on. So instead of having it like a normal variable, we need to change the variable type to an array. An array is simply a container where we have multiple of these structures. So clicking on an array and compiling, and now I will compile. You can see here if I click on the plus, now we have this singular slot inside of these categories. So here in this slot it contains an item and the quantity. And if I click on Plus again, it contains another item and the quantity and so on. So you can imagine for a category, we have 16 items here, down the row here. So now you can see it makes sense that we need to have an array because it doesn't contain just one inventory slot. It contains multiple inventory slots. I'm going to delete all of those slots here. We're going to add them dynamically in the game. We need to do the same thing here for the food category, search for inventories lots. And over here again, inventory slots and remember to change them to an array. So this one too or an array and the oceans down here to an array and go ahead and click on compile and save everything. And now this is what we have so far. So we're going to set the amount of slots. Let's actually go back to the player. The player opening it up. And if you click on the inventory component, you can now see we have these variables that we can play with the amount of slides. I'm actually going to set 16 because this is my inventory and I have 16 slots. If you want more slots, you can go ahead and add more slots to your game. And for the selected inventory, we are going to set it dynamically into the game depending on what category we are pressing on. The same thing for the categories we are setting them also dynamically in the game. So this was it for now. Just remember to set the amount of sludge for your inventory and let's move on. 30. 5.05 Resizing the Inventory Category Variables: Here we are inside of the inventory component. And before we can use these arrays here, we need to resize arrays. So when you create an array and a variable of an array type, you have to resize the array before we can actually use it. And for this array, we're actually going to resize it depending on how many amount of slots for the inventory we have. I'm going to delete this here, and I'm going to right-click and say custom events. And let's just call this one initialize inventory because we're going to run it as the first thing. Down here. Let's run it through the clients. So CL, initialize inventory for the replication run on owning client and reliable. And remember to run the client one up here and the normal custom events just like that. So very, very simple. We're going to take one of the variables here. And for the array, if you want to know what functions you can make for an array, you can just write array. And then you can actually see all of these are for the array and you can play with those as you wish. But for now, we are going to say resize, that we're resizing this array. The size of it is just the amount of slots that we have created here. So it's going to resize it, this array to have 16 slots. So remember in the player, in the bp player here, if you click on the inventory component, depending on how many slots you have selected here. So here for this game, I'm just creating 16 slots. So it's going to re-size this array to have 16 slots as well. Let's do this for the food as well right from here and say resize and also for the potion, drag here and say re-size. Now connect everything. And you can drag from this amount of slots and connected here as well. If you wish to be more organized, again, you can double-click wait, rerouted nodes. And just so you can select everything and press Q and the keyword that will make everything straight like this. And remember you have to run this event somewhere for it to run, because right now we don't run this event anywhere in our code. So let's just run it here for the player whenever the player's spawns. So here in the beginning play, let's, let's just run it here and we can derive from this AAC inventory. Remember, this AC inventories our inventory, so we can call this events, so we can call initialize inventory and we can do it here in the beginning. If you wish to see if this is working, because right now if you click on Play, you can't really see anything because it's just resizing here. But sometimes it's very nice to use print nodes. So when string and here you can maybe just take this one, e.g. and say length. What is the length of this array here? So let's connect it to this print string. And now let's compile. Click on play. And up here you can see it says 16. I can make this longer for you to see. And let me make the color red. So if I click on Play, you can see to the top left of the screen it says 16. So the size of the arrays are correct. Now, now let's click on compile, save everything, and let's move on. 31. 5.06 Displaying the Inventory Categories: Let's now display the inventory category widgets. So let's go back to the Blueprints folder and let's go to the player controller. Remember in the player controller, we are working with widgets. Inside of here I want you to go to the Event Graph and right-click and let's create a custom events. So for this custom event, we're going to call it rate inventory, category widgets. And also remember to copy the name and let's make one for the client. Because again, UI is done through the clients. So right-click, make a new custom event and this one is going to run through the client. So for the replicates, let's change it to run on cloning client and reliable. Now let's run this client one from the ordinary ones. So we run the code and look just like this. So for the inventory category widgets, if we go back to our UI and inside of the inventory, here, we made a vertical box called categories. So this is the vertical box and we want to add the categories to this vertical box. Now to do this first, click on this vertical box and we need to set it to is variable. So we can actually use this variable and add items inside of it. Now, when it's variable, Let's go back to the player controller and now we need to access it. So remember it is in the WB inventory and you already have made a variable from it before. So let's drag it here, and let's get that variable. Now we can drag and write the name of the vegetable box. So VB categories. Before we do anything, drag from here and say clear children. Because we're going to redraw each category widgets and categories slots as well when we make, make them later on, when we redraw, we have to remove the old ones. So e.g. when you load an item, you have to redraw everything to update the UI. So we have to clear the old ones before we do anything. So let's clear that children before we add them again. And to add the categories, Let's drag from here now and say that a table row names. But this does, is it's going inside of our data table for the inventory category. Here it's going to get each of the rows and we can print them to the screen. So here are all the names. So here what I want you to do is drag from here and say for each loop. So we're going to loop through every single row. Let's go back here just to show you in the blueprints and data tables and inventory category. Inside of here we have three row names. So the weapons, the food, and the potions. And this is what's going to happen here. It's going to loop for every single of these names here. So three times for each of them. Remember, we made a function inside of the function library, saying gets category info. So let's get our category info function here. And now let's plug this name into this string and it's going to automatically convert the name variable into a string. So now we're getting the category info. And if you don't remember what this, what this was, you can double-click on it and it will take you to the function and the function's library. And you can see what does it simply gets the name and then gets that data table row information and outputs it here. So we can actually use it in the player controller. So here you can either right-click and Split Struct pin and you can get the information or you can drag from it and say break, this is what I usually do. And here you can get the information as well. So what we are trying to do is for each of these inventory categories, we are trying to create a widget and add it to this vertical box. Now let's go ahead and drag from here and say Create Widget. So we already know this function. So we're going to create a widget. And the widget we are going to create is this inventory category widget we created earlier. Remember in the UI, if we go to the category inventory category, this is the widget we created. So this is the one we are creating. And we are creating and for each of these row names. So we're going to create it three times. So it's very cool to work with data tables. If you decide to add a fourth category, it will automatically take it into account here and it will automatically added to the inventory. So very cool to do it dynamically like this because it will get a lot easier for you later on. Okay, So here, when we create the widget, we want to tell it what the category is. And we also want to plug in this icon, because remember we have this static icon and we want to change it depending on what the category is. So let's go back to the inventory category. Here, go to the graph. And now let's click on the plus here for the variables. The first variable we're going to make is categories. So we're going to assign the category to it. And next we have the category icon. And this one is going to be texture 2D. Now what we're going to do is click on the first one and then click on Instance editable and expose on spawn. And you can do it on both of them. So the category icon as well, instance editable and expose on spawn. What this does is if you go back to the player controller now, you click on file and refresh all nodes. You can see we have exposed them here so we can actually plug information into them. So let's drag this category and assign it here. And let's drag this icon and assign it as well. So now we have created a widget, so it's going to create a three widgets. So, so far what we're doing is we're clearing the children for this vertical box so it's clean. After that, we're getting all of our row names, which has all of these three here. What we're saying is for each of these rows, we're going to take the name, we're going to take the inventory category info. And from here we're taking the icon and category and plugging it into this create widget function. So now we're creating three widgets, however, remember, we are just creating them here. We need to add them as well to the vertical box. So I'm going to copy this here, the inventory and vertical box variables. And now what we can do is drag from this vertical box. And we can say add child to vertical box. And let's connect it now. And what child should we add? Simply this widget we just created. Now what you can do is double-click on these lines to make railroad notes and organize your code a little bit better. And now let us compile. So right now if we click on Play, nothing will happen. And the reason why it doesn't add. So if you click I to open the inventory, nothing will happen. Remember, you haven't run this code anywhere, so you have to write it somewhere. So create inventory category widgets. Let's actually just run it for the player. So if you go back to the blueprints and we go to player B, player here in the beginning play, Let's now say Get Controller. And let's get the controller for this player. Then we can say, remember here we made an interface called int player controller. So we have the player controller reference. So we can say it's layout, control or reference because this is the interface we made earlier. So now as the player controller, because remember, we have been working in the player controller, so we need the reference and now we can call rate inventory category widgets. So inside of here, Let's say create inventory category widgets. And it should work. So let's compile and save everything. Now it's going to give us a bug. So if we click on play and I click on the eye, you can see nothing happens. And if I exit here, it's going to give us a bug. And the reason is if we go back to the player controller, you are, you are taking information from this WB inventory variable. However, before we click on the eye, so this one, remember, you're running it instantly when the player is spawning. However, this variable is not created yet. This variable only gets created whenever you click on the I button because then you open the widget here and you create this variable. So if you can copy this here, we create widget for the inventory and you go back to the Event Graph. And up here in the initialize the widgets, I'm just going to add the inventory as well because the India Sheila is widgets runs automatically when we began playing the game. So it actually gets created right away and we can use it here in the beginning play for the player as well. And the reason why it gets created faster in the controller is because the player controller is created before the player is created. That's how it is. So now let's click on play. And when we click on AI, you can see, we can now see the information here. We can see all of the three widgets. However, the icons have not changed. And because this is the final step we are missing. So let's go back here. Let's go to the WB inventory category. Here. Let's delete those and keep the event construct. For the event construct, this is just the same as the begin play. What we need to do is we need to take this image category because remember, if you click on it, this is whatever you named it here. So this is my icon, my image. So I need to take this variable here and say, sets brush from texture. And now we can choose what texture to set it to. The texture is simply this category icon we just set. Because remember in the player controller, every time we created the category, we assigned the respective category icon to it, we actually already have that variable ready and we can connect it to the texture. Now let's compile and let us click on play. And if I click on i now you can see all of the category icons are assigned automatically. So just a quick run through. If we go back here, we created this credit inventory category widgets. And we run it through the client because widgets to run through the client. And then we remove or clear the children here just to make sure that it is empty, then we get all of the data table row names. And for each of these names who are getting their information. And with that information, we can plug it into the Create Widget. So we're creating the widgets one-by-one through this for each loop. And we're plugging in the information. We're also adding them one-by-one with the slope. So now we have created the categories and added them to our inventory. So let's move on to the inventory slots. 32. 5.07 Displaying the Inventory Slots: The inventory slots, Let's go back to the player controller. And just like before, the categories, Let's go down here and make a new custom event. And let's call this custom event rate inventory slot widgets. Again, let's copy this name because we have to run one through the clients. So let's do a custom events and run it through the client. Remember to click on it. Run on owning client and reliable. And for the client or for the normal one, we have to run the client. Remember it's the slot widgets, not the category. So selecting the slot widgets. So what we want to do with these widgets, if we go back to the UI and we click on the inventory. So here remember for the inventory, we created this grid inventory variables. So for this grid inventory, what we need to do again, you have to click here is variable else we can't use this variable. So if I don't, click is variable. You can see here if I get my inventory and as a grid, we can simply not see this variable. But if I go here and click on S variable for this grid inventory, I can now drag from here and say grid. And you can see it as a variable and we can use it just like before. Let's clear the children and make sure there are no inventory slots inside of it every time we allude an item later on or drop it from the inventory, we have to redraw all of the slots to update the inventory. We have to make sure the old ones are cleared before we add the new ones. So let's clear the children and make sure it is empty and clean. Now we're going to make a loop. So drive from here and say for loop, and select this one. So again, remember for the amount of slots, we already have a variable in the inventory. So if we go back to the inventory component here, we created this one called amount of slots. We need a reference to this inventory. So up here, I'm going to click on the plus and then find my AAC inventory variable. And let's call it inventory. And then let's do the same thing down here. Let me click on the Plus, select the AAC inventory variable and call it inventory. So now what we can do is plug it into here. And for this one, create inventory slot widgets. Let's go to the player and click on the DP player. And inside of it, again, Let's just run it in the Begin Play. We can take it here from the controller just like before what we did with the inventory categories. So let's drag from here and say to create inventory slot widgets. So selecting this one here and we need to plug in the inventory. Remember, you can just drag from here because you already have the inventory. And you also have defined how many slots you have in your inventory. So now you can have this number, this 16 here that we wrote. So if we go back to the player controller, we need to loop it as many times as what you have written here for the amount of slots, because this is the amount of slots we want to create. So dragging from here and saying amount of slots, this one here. Now for loops, they start from the index of zero and not one. If we just plug them in here, it's going to create 17 inventory slots and not 16. We have to take this one and say minus. So subtract and subtracted by one, and then connect it to the last index. So what are we going to do 16 times? We're simply going to create widgets. And what you want to create, we want to create a WB inventory slots. And just as a nice thing later on, we need to have the slot index. So let's actually go back to the UI and let's open up the inventory slot. I'm just going to go to the graph and make a new variable called slots index, and then selecting the integer and compiling. And just like before, let's select the instance editable and expose on spawn. Go back to the player controller like on file and refresh all nodes. So now we can take this and plug this into the slot index. It's always nice to have this index because later on you can need it when you're programming and you need a specific slot. Alright, so as the last thing now, just like before we created the widget, we now need to add it to the grid that we have. So taking this here, the WB inventory and then the grid inventory variable. And now let's drag from here and say Add child to grid and less connected. So for the grid, we have the rows and the columns here. Now before we do this, the content we want to add is simply this widget we just created. And you can double-click here again to make a reroute node. Now for the rows and the columns, It's very, very simple. You can drag from here and say divided by four. Because what I want you to do is have the inventory to be four slots by force, lots of forest loss by four slots. And this is what you can do. So we have 16 slots divided by four, that will give us four on the column. And also divided by four are not divided but modulus four and then it will give us four by four. So if we drag from here again and say modulus and select this here, and then four again. Now we can take this and connect it with the row, and take this and connect it with the column. So you can always change these numbers. It's because I want to have my slots four by four. But maybe you want your slides to be eight by eight so you can change these numbers depending on what your inventory it looks like. Now let's click on compile and let's click on one way to see what happens. If I click on, I can see my inventory is getting added to my screen. So this is what it looks like. It's very huge right now, and I need to reduce the size. But let's actually remove all of the icons to begin with by default, because I don't want to see all the icons appearing as default. So I'm going to click on the inventory slot, go back to the designer. And here you can click on the icon and go down here in the visibility and set it to hidden. The same thing with the number click on it, go back to the visibility and also set this one to hidden. Now if I click on Play again, and now I click on the eye, you can see everything is hidden and it's nicer this way because we can then show the icons later on if we actually have an item and not this default icon for the size, it might look right for you. If I go back here, you can see here I'm designing in 12 80 by 720. So this is my default designing screen here. This is what I'm designing it for. People with smaller monitors will see it normally like this. You can see it's not, it's not huge like this. If I click on play and click on here, you can see it's very huge here. And it doesn't really look like that over here. This is because we have something called DPI scaling. Now I'm working in this resolution. However, if you click on here because I have a fork, a monitor, it's I think something about 3,000 here, 3,800. So clicking on this small icon, you can see here it's scaling up my UI depending on what my screen is. So right now I'm designing it for a screen over here. Actually this one over here. However, my screen is somewhere around here. So it's actually, you can see the scale is for actually scaling it four times or 3.5 times. What you can do is you can just select this one and then you can reduce the scale so it doesn't scale so much. Clicking on here and just setting it to two, e.g. and this is only if it happens to you. So this is usually when you want to re-size UI two different monitors and make them look good for different monitors. There may be 2.5 and the size clicking on Play, I can click on the eye. You can see it's a lot smaller now and I like it better this way. Alright, so now we added the inventory slots. Let's save everything, and let's move on. 33. 5.08 Set Selected Inventory Category: We need to do now is when we click on a category button for the inventory, it needs to set it to that selected category. So let's go ahead and the blueprints, and let's create this logic inside of the inventory Component. Let's go down here and make a new custom events. And this one we're going to call set selected inventory category. And again, we are working with UI. So I'm going to copy this and make a new custom event and run it through the client. So running, owning client and reliable. So what do we need to do here for this set selected inventory category? Remember, we have made this enumeration, the E item category, set, the selected inventory category. Let's drag it from here. And while holding Alt, you can drop it and it automatically sets like this. So we're simply just setting this variable and I'm going to drag this and drop it into the event. This will automatically create an input here. You can create it manually, or we can just click and drag and drop. And it will create it for you. Now let's call the client one up here, Set Selected inventory category. I'm going to click and drag this again here, so it just runs through the whole process. Now, we need to run this event whenever we click on a button or the categories. So let's go back to the UI and let's click on the inventory category. Now, let's click on this button, the button category and let me go down. And then on the event onClick. So what should happen when I click this button? I simply want to call this set selected inventory category. So how do we get this event? We are inside of the inventory and right now we are inside of the UI. This can be a practice for you to try to figure out how you actually get there, how you get to that inventory. Now, let's do it together so you can pause if you want to do it alone. So here, what we want to do is there is a function where you can get the layer that owns this UI. So every, every UI that is spawned for a player is owned by the player. So right now we can right-click and say Get Owning layer on. So it's trying to find the layer that owns this UI. And here we actually need a reference to the player, but we haven't made one yet. Remember the blueprints when we go to interfaces. Here we only have an interface for the controller where we have the get layer control, our reference. So we actually need to make one for the player as well. So I'm going to go back here to the interfaces, right-click Blueprint, Blueprint Interface. Let's call it int layer. Double-click on it. And inside of here for the function, let's call it get's layer reference. And now down here, remember you have to select the variable of what you want to reference to. So I want to reference to BP layer, and let's call it layer down here. Let's compile. Remember, very important to compile here. Now let's go to the player and add the interface. So bp player Going to the class defaults are actually the Class Settings. And here for the interfaces, let's click on it and search for int layer compile. And now you'll see here in the interfaces get Blair ref. Just like before, we need to define who is the player. We are inside of the B2B players. So you can just try, can say self. So this is the layout reference. Okay, so now we have this and now we can go back to our inventory category UI. So Get Owning Player Pawn. Now it says, what Player upon are you talking about specifically? I'm specifically talking about bp player. So we can say now gets player reference that we just made. And it's message because it's from a Blueprint Interface. So now we have the player reference, and now as the player, we can now get the inventory because the whole process here was to get the inventory. So we can call set selected inventory category. So here in the, in the inventory category UI, Let's drag from here and say AAC, inventory. And let's go down and find the variable. The variables are always at the end here. Now as the inventory we can call set selected inventory category. And what is the category? Want to set it to? Remember in the player controller, if I go back now, it will be a bit confusing now because we are going back and forth what I'm trying to explain it as best as I can. Remember in the player controller when we made the categories for each of the row names here from our data table. We took the category and plugged it into the created a button here. So here in the button it already knows what the category is. So you can just click and drag this and plug it into here. So every button will have its own category, which it will log into here. And the correct information will be set here. Okay, So very important. Every time we set the category, we want to redraw all of these buttons. So here in the inventory slots, we want to redraw all of these slots because we are changing category. So we don't want to see the old slots from the old category. Now what we need to do, and this is actually why we did declare children because we want to remove the old buttons or the old inventory slots be before we add the new ones. So great inventory slot widgets. We have to call it in the year when we set the selected integer category. And now we need a reference to the player controller from this inventory. So how do we do this? The way we do this first, we need to get the player. So we can't really get the player controller directly from this component. But remember, this component is inside of the player. So what we can do is we can right-click and say, yet owner, that will get the player. And again, just like before we have to tell it specifically, we are onerous or what we're talking about. We're talking about specifically this bp player. So we can say gets layer reference that we just made. And now we can connect this one. And here we can get the controller. So you can track here and say Get Controller. However, you can say get controller and then you can say Get layer, the controller reference. And that way you can actually call the create, create inventory slots, widgets. You can do it like this. However, this getting very long that we have to do this every single time. So instead, let's go back to the player. And instead of doing this get controller, let's actually create it into a variable. So over here in the begin play, instead of doing this, Let's get the Controller and let's say gets layer Controller reference. And now we can right-click here and promote this to a variable and call it layout controller. But now we have the player controller and we don't have to do this every single time inside of here. So when we have the plaque control, let's actually delete this cost. Since we now have this Blueprint Interface, we can delete this now and then we can just plug it into here instead connected together. And let's drag everything closer. And now this flow controller can also be used here. We don't have to call this player controller. Again. Let's delete it and let's connect them here. Now the target up here again is the platforms role player controller. So let's take this layout controller variable we just made. And let's connect it up here. Next we go up here and you can see it's a lot cleaner than before. Instead of calling the player controller reference every single time, we can just do this. I'm going to organize it a little bit better, so it's not too messy here. Alright, so now we have this controller and it's looking great. And we can actually do it here as well. To make it more clean, we can take the player controller and just login into here. Actually this is wrong. So let's take it here, just call it here, and we can just connect it manually like this. And we can delete this black controller. So now it's a lot more clean to look at just like this. And let me drag them closer together. So the code is a lot more clean here. And if we go back to the AAC inventory, now instead of calling this, we now end up layer have the player controller variable. So that's a lot cleaner. And we can connect it here and call the create inventory slot widgets. And the inventory again, we can take from the player and call the AAC inventory Variable, go down to the bottom, find the inventory Variable and connected here. Alright, so this is actually finished now. So here, when I'm in the game and I click on the eye, it's really impossible to click on the button because right now we don't have a mouse you can see or we can run around that. We don't really have a mouse. So let's to fix this. Right now I get a box as x is nine trying to read the property and it's talking about you get local level subsystem, the mapping context. So we actually have to go back to the player here. The mapping context doesn't like this. There'll be four. We actually set it and plug it in. Let's drag from the split controller and say is valid. Just making sure that it's valid before it actually runs. This code is valid. And if it is valid, you can go ahead and run the code. You can now double-click on this to make it nicer. And let's click on Play and see if it bugs out again. Running around. If I run on the client as well, I can remove it and you can see we don't have box anymore. So just making sure it's valid before we do this. Alright, so for the mouse, we go to the player controller. Here in the class defaults. You have show mouse, cursor. Now let's click on it here and let's click on Play. And now you can see, I can see the mouse and I can't really look around anymore. It's really not important for this course is not about movements, so I don't really care, but you can hold the mouse and you can turn the player and look around. But not really important for now, don't care about the movement or fixing it. Let's just focus on the inventory. So clicking on the inventory doesn't work because we haven't really set it. We have to fix that as well. When I hover my mouse over the category buttons, I can't really press them either. So let's see what's up with that. So let's close this down. Let's go back to the inventory category and let us go to the designer. So looking at the button, I can see that it is set to square blue all the way. And that is wrong. No, for the Hubbard, we need to change it to Hubbard. And for the oppressed we need to change to rest. And then remember to copy the image size because the buttons have changed. So shift right-click here and shift left-click to paste them here for the image, just making sure that the visibility is none had testable, so it doesn't block the button. And now if we go over to the menu I, so right now we need to have this button working as well when we click on it. So if I go down here and I select this on liked, it needs to open the inventory. So if I just compile and go back to the player. So here, when we open the inventory, what we can do is we can make another custom event and link it to here. So it works for the button. Well, let's right-click here and custom event, and let's say open inventory. Plug this into here. So this only fires whenever our button is being pressed, open inventory. So let's go back to the main UI. And here for this button again, just like before, right-click and say Get Owning, layer on. So we're getting the player because this is where our logic is, it Owning Player upon layer reference. And now let's connect them together. And here we can now say open inventory. So now it should work. Let's compile everything. Let's click on Play. And if I click on the UI here you can see the inventory opens. And if I click on eye, it also opens. So it is, Oh, it's working correctly. And the hover on the buttons works as well. Now you can't see if we're changing category because we don't have any items. So it's very difficult to see. So if you want to see it just quickly, you can go to the player controller here where you add your inventory slots. Very nice method to see things is using the print string from here in the loop when we are creating the widgets, Let's drag from here and save rent string. Now the thing we want to print to the screen, let's just print all of the widgets we are creating. So from here, connected here, and it's going to create this get display name. So it's going to show you the display name of these widgets. Let's now click on play. And you can see it creates the widgets for both players. When you click on AI and then click on Category, creates widgets. If you click on another one, you can see it increases in number for the widgets, but we are remembering to clear the children. So it's not because there are 79 of them spawned. There's only these ones spawned right now. This is working correctly. Every time I click on a category, it's creating new widgets. So the only thing we need now is actually work with the items as well. So let us compile everything, save everything, and let's move on to the next lesson. 34. 5.09 Re-adding Existing Items to Array: Alright, so now what we want to do is we want to add existing items to the inventory. So right now we don't really have item alluding or anything like that. But what we can do if we go to the player controller, right now, we're just adding the inventory slot widgets. We're creating them, and then we're adding them to that grid here. But when we switched, when we clear the children and we switch categories and we'll redraw the slot widgets. We also have to redraw all of the items, so displaying the items and we can do this even though we don't have item looting right now. So before we add the widgets here to the children or to the grid inventory. Let's now take this and I'm just going to push this down here just for a little bit so we can add some more stuff inside of here. So the thing we want to do is we want to get the erase from the inventory. So if we go back to the inventory, just as a reminder, we go to the components inventory. Here we made the three categories. So it made the weapons category, and it is an array of the inventory slot. So if we click on the Plus, you can see it consists of an item and then the quantity of the item, the inventory slot and the index. And if we click on the plus again, we have another item. So now I have two items. And just like that. So depending on all of the items we have, we need to draw them as well here so we don't miss them during the redrawing here. Now let's first get all of these three. Erase here. So let's drag from the inventory. And let's say weapons category. Like again, say Foods or food category. And let's write potions category. So now we have all of these three categories. Let's now drag it here. And what we want to do is we want to drag from one and say sets array elements. We want to set the array element, we want to set the index of the item that is already inside of here. And for to do this like we can just drag from here and say set array elements because we also need to do it for those. So it really depends on what inventory category we have selected. Though. Have we select the food one, then we need to do it for the food. We selected the potions one, then we'd need to do it for the potions. So here, drag again from the inventory and let's get the selected category, inventory category here. So now instead of doing here, let me click on Alt and click here to disconnect it. So let me drag from here and use a node called Select. So letting this one, so what the select is, it initially just select an option. So it depends on what you have plugged inside of here. If you plug a number, it selects a number. If you plug e.g. this enumeration, you plug it in here, you can see it's selects between the items inside of this enumeration. So let's just plug those in. So the weapons with the weapons, food and the potions. So it's going to do here. It's going to take the selected inventory category. It's going to take a look at what this value is depending on. Here. If you remember, if you go back to the UI inventory category. And so here when we click on the category, it sets the category and we then redraw. Here. It says the category. And then we redraw all of those slot widgets. So depending on this selected category here in the player controller, it's going to select that value. So if you selected the potions category, It's going to take this potions category and then log this potions category inside of here. Right now it's great. I don't know why. It's a bit buggy. Let me just disconnect it here, plug-in again into here. So it works just so it has that color. Okay, So e.g. if we select the food category, it's going to take that food category here and plug it out of here. And now it is the food category. So what is the item here? The item is we can just get, get this one here and say yet. And we can get an item from the array and select this one called a copy. Which item do we want to get? Which item inside of this array do we want to get? Simply, we just want to get the slot index. Remember, we are looping through is slot widgets. We're looping 0-15, so we creating 16 slots. And for each of those slots, we want to get the item of each of those slots. And then we want to put them inside of here. So for the slot index, again, just right from here and add it here. So this is the index. Remember it's going to loop 16 times. So it's going to set the index. So the first one is going to be zero, then one, then 2345, and so on, up to 15, so it creates 16. Now for the item, we can take this item here and say break. And now for this array here, this inventory slot. But we can do is we can derive from here and say make inventory slot. So dragging this item here, so we're just going to reset the item inside of that array. We don't want to lose our item. So depending on what slot we have, e.g. the first slot is at index zero. We're going to get that item and plug it into here. Even though it is empty, it doesn't matter. We're just getting all of that information and re plugging them into here. We're taking the quantity as well, plugging them into here just to make sure we don't lose any information. And for the inventory slot, remember we are creating inventory slots, so I'm going to drag it here, login into here. And for the slot index, again, just drag from here and plug it into here because we don't really want to use the old inventory slot. This is the slot that will be cleared. When we say clear children, we don't really want to use that anymore as well as the slot index, we clearing everything here. So let's just use the new slot index and then you inventory slot widget and just to hide these pens because I don't think it looks good. You can click on it and click on Hide unconnected pins, and it will look a lot better now. And that was it actually. So let's take this logic here. Let's re-add our UI to the grid here. And for this, these are the widgets. So you can click and drag from this one and re-add the widgets here. And everything is looking perfect. Now, right now we can't really see a difference because we're not really updating the UI. So in the inventory slots were not really setting Item image here too visible or anything. We are going to do this in the next lesson. But just before we do this, Let's actually organize everything here. So I'm going to skip forward and I will show you how I organized it. Okay. So very quickly I went ahead and organized everything. Can see they are they're having all reroute notes, so just make sure to double-click on all of them. You can also select some elements and click Q on the keyboard. This will straighten out the elements. So I'll make sure to organize your code just so you can understand it better. Let's compile everything for now and let's move on to the next lesson. 35. 5.10 Displaying Item in Inventory: Okay, so let's now go ahead and update the inventory slot UI. When we lose an item. Here for the inventory slots, Let's go to the graph and let's delete everything here. Now let's make a custom event. And this one, I'm going to call update inventory slot UI. What we want to do is simply just set this image here depending on the item we loot and the quantity of it as well. So clicking on here, Let's add two different variables. The first one is the item, so is the item info. This is the item, let's call it item. And the second one is the quantity of that item. Let's change it into an integer, and let's compile. So for this item here, Let's take from the quantity and say, is it equal to zero? Because if the item is equal to zero, meaning there are no item in that inventory slot. We don't really want to display the item icon or this text here, because we don't really have an item in that slot. So if the quantity is equal to zero, Let's take this image here and illustrate from here and say set this ability. And let's set the visibility to hidden if we don't have any items. And let's do that as well for the text. And you can see I don't have a variable for the text. Let's go back to Designer. Click on the text and set it to this variable so we can see it as a variable. Alice now take that text, Let's see if we can find it. And I can't find it. And it's actually called image item quantities. It's supposed to be text. So let's change this into text. Go back to the graph, and it's this one. So let's drag it here and say set visibility to hidden as well. Okay, So now they are both set to hidden if the quantity is zero. However, if the quantity is not zero, we want to set this image. So let's take this icon here, the image here. And let's say Set brush from texture. And let's set this icon. So if it's false, if we actually, if it's not zero, we actually have an item in there. Let's set the icon of this image here in our inventory. So what is the image for it? Remember we have the item and let's drag from here and say break. So I can see the information about this item here. And let's drag this thumbnail. We have the thumbnail, so we can use that as the texture league, unhide, unconnected pins if you want to hide the rest of the information. Now remember to set the visibility to visible, because right now it's hidden. I can just copy this here and connect it. And now we can set the visibility not too visible, but to none hit testable. Remember if you set it too visible, then you are blocking this inventory slots. You, if you set it to none hit testable. It means you can't interact with this icon. And I don't believe we need to interact with anything about this icon, so I'm just going to set it to none hit testable for now. The same thing for the text. We need to set the quantity. So let's take the text here and let's drag and say set text. And let's set the text to the amount here. So drag this quantity login into here, and it's going to automatically create this two texts function for you. Now let's double-click just to organize it a little bit better. And now for this texts, we have now set the quantity. Now for my inventory, what I like to do is if this value is one, I don't want to show that number, so it's going to be hidden like this. However, if the quantity is two, it's going to show the number. So if it's one, I don't really want to show the number one. Now let's go to the graph here. And what we can say is we can drag from the quantity again and say, if this is greater than one, then we want to display so branch. If it's greater than one, then we want to take this text. So let me just copy this up here, the text. And we want to say none hit testable. So I want to show this text if it's, if the number is greater than one, just like that. However, if the number is not greater than one, let's copy this. Then I want to set this one to hidden. So if we only have one item, it's not going to display this text. If we have two or more items, it's going to display this text and that was it actually. So let me just double-click and make this look better as well. Make sure your code is organized. It can get messy really fast, and it will take a long time for you to organize everything. So this was it. Let's compile. And now we have to call this function. We haven't really hold it anywhere. So now let's go back to the player controller. Inside of the player controller here we are adding the item to that array, and then we're adding the children. And now we also need to update the UI because yes, the item is being added. However, we're not seeing any changes because we are not updating the UI here was updated the UI, we are inside of WB inventory slot. So remember in the player controller for each of the slots here you are creating that widget, you are creating WB inventory slot here. So we can actually use this. We can drag from this inventory slot and we can say updates, inventory slot UI. This is the event we just created. Now let's double-click, make reroute notes. I'm going to take this a little bit up here. So it is not above my function, not inside of my function, just like this. And now we need to plug-in the item and the quantity and the item. Remember, remember you already said this here we got to the item. The item here, lock it in, the quantity as well, plug it in. Let's double-click and make it look a bit better. And just like this, Let's compile and save. Now we can't really test it with the items because we don't have a looting system. But what we can do is if we go to the inventory components and inside the inventory, and just for the weapons e.g. you can just click on the plus and add a random item. Here. In the items, let's just add something, e.g. this, I don't know this lever here. And we can call it doesn't really matter, labor, whatever. And now let's set the quantity to one. And the slot index everything is, doesn't really matter. So just remember, just make sure you have the icon and you have the quantity. So let us click on Play and see if this works. So clicking on the inventory, I can see my clever. If I change the category, you can see I can see it. I go back to the weapons. I can see my cleaver. So this is working correctly. Now, we can also test it here in the potions. Let, let's add a potion. Let's click on the item. And now let's go here, select one of the potions, e.g. this manner potion, set the quantity to five, e.g. so we can see if the text appears. And if we click on Play, click on AI, and click on the potions. You can see, I can see I have five quotients. If I click on the weapons, I can see my weapon food. We don't have food. And now you can see it is working correctly. Okay, So let us go ahead and delete this one we just created, and the weapons and the quotients. And now let's compile everything, save everything, and let's move on. 36. 6.01 Interacting With the Items: Let us now begin interacting with the items. So first, let's go to the blueprints and the player. And let's create a new input action where we can click on a button and load the items. So let's right-click, go to inputs and in protection. And let's call this one loot or you can call it interact. That's up to you. Let's go to the mapping contexts. And inside of here, Let's click on the new plus here on the mappings. Let us, I'm going to minimize all of this here for the new one, Let's add the lute, lute. And I'm going to press here and press on my EE button on the keyboard. I'm just going to use the IPA and solute items. And for the trigger's going to click on the plus. And here, set it to pressed and pressed, just makes sure you can't spam this e button. So if you hold it down, it doesn't run all the time. So press just means run it one time when I click E. Okay, So this is done here. Now let's close it down. Go to the player. And here in the player, let me just this up a little bit. And down here, I can say IA loads and have this event here. Now what we can do is what alluding we need to run it through the server. So far we have been working with a client because all of this was UI. But however, when you loot items, just make sure you run it through the server because you want to check if the clients can actually lose the items. This is how you prevent cheating. So when you play here and you play as the server, so this, this one here is the server. This one here is the client. Let's say the clients are the clients connected your friends to your server. They are going to press E. Even though there are no items here. We need to check. When you click E here as the client, this information goes to the server. The server checks if this line is standing on an item or not, and then it's going to send that information back to the client right now I'm not standing on any item. I'm going to click on E. That information needs to be sent to the server. The server is going to say, No, you're not standing on any item, you're not going to lose anything. But that information is going to be sent back to the client. It's going to tell the client you are not standing on any items and I am not going to lose anything here. Always taking the code, checking it with this server, and just making sure the clients are not cheating and sending that information back to the client. So, so far we've been working with the clients because it was UI, but now it's actually game logic. So over here, instead of just writing the code directly from here, because if you just write a print string here, again, very good to just write a print string to see what happens if I click on play. And here I click on e as the server, it says Hello. If I go to the client and I click E as the client, it says Hello. So the client and the server can run this event. I want to run the code through the server only, so I'm not going to write the code here. However, we're going to make a new custom event called server loot. And this one is going to run through the server reliable. And then I'm going to run the server event up here. So when the client likes on E, it's going to run through the server as well. So for the items, let me just place an item in here. So for the items, let's just place, I don't know, this banana here, something random. And let's place this Cleaver. I'm going to place them on top of each other, so it tells me how many items I'm standing on. And I'm going to put an item by itself over here, just like this so we can test it out. So what we can do here for the looting is we can right-click and say it's overlapping. Actors, just looking for how many actors are we overlapping? And now it's going to ask you, what actors do you want it to be? I want it to be the item base that we created earlier. So we're going to take the GED overlapping actors when you were standing on the items, it's going to check how many actors are we overlapping. I'm going to take this and say length and then ask if this is above zero. So I just want to run this code whenever I'm actually standing on an item because if the length of the overlapping actress is zero, then we are not standing on anything and I don't want to run my code. So if it is above zero, I actually want to run my code. This is it for this video. Let's just click on the orange string here and see if everything is working properly. And the thing I want to print out, Let's just prints out the length of the Olympic actors, which means how many actors are we actually overlapping? So clicking on the play. And here as the server, I'm going to go to these two items clicking on IE, you can say if it rains too, I'm actually standing on two items now, if I go here and click on e, nothing happens because remember we're only printing when it is above zero. If I go over and lute this here, it says one item so it's working properly. And if I do this as the client as well, you can see the server prints the information, which is very good because we only want to run this code through the server and everything is working properly. So let's delete this and let us continue in the next video. 37. 6.02 Initial Add to Inventory Logic: Okay, So this is where we left off and let's now add the initial logic for adding the item. So let's go back to the components and inside of the inventory component. And here we need to make a custom event called add to inventory. So let's right-click custom event add to inventory. And this one, we can run through the client because we already ran it through the server and we are interacting with an item. And now let's run it through the client because this is actually UI and we need to add the icon to the inventory. Add to inventory running through the client and server are running owning client, sorry, and reliable. Now let's run it up here. Cl, add to inventory. And the thing we need to add is just the item. So clicking on here, clicking on the Plus, Let's find the item base as the variable type because we want to add that specific item or a alluding. Now we can drag from this and add it here as well. And let's compile. And now for the player, we can now take this inventory and we can say add to inventory, just like this. And which item are we talking about? We're talking about this specific item we are overlapping. So let's drag here, make some space. Now, what we want to allude, you can do it with two methods depending on what game you are creating. So here, when you click on E and want to lose an item, you can loot all items at once. You can do it like this. So you can take here and say For Each loop, and you can, for each of those items, you can add those to the inventory. However, for my game, I just want to loot one item at a time. So I'm going to drag from here and say gets a copy. So I'm not going to loop it. I'm just going to get the first item. We don't need a plugin here. So I'm going to take the first item we are overlapping it with, and then I'm going to add that into the inventory. So taking this item here, now, we can't really plug it in directly because this one is an actor object. And if we plug it in here, it doesn't work because this one is a BP item base object reference. So two different things. So now we know that this is the item-based. We, we made it here in the filter. We filtered that the only thing we will interact with here is the item-based to overhear. And they get, we can drag from here, and we can get the item reference. Now, again, we only made interfaces for the player and for the player controller. So let's make a new one. Let's right-click blueprints and Blueprint Interface. Let's make one for the item base. And here Let's double-click and for the function, get item reference. And now are the outputs. Remember here you write the blueprint you want to reference to. I want to reference to my item base, and I'm going to call it item. Now let's go to the item base and add this interface. Go to items, item based here in the Class Settings and here at the interface item base compile over here in the interface, double-click this here and set the reference as the self-reference because we are inside of the item base. Now let's go back to the player. And here we can drag now and say get item reference. Now we have that item reference and we can now plug it into this here and added to the inventory. Let's, let's put them together here, make it look a bit better, something like this here you can even double-click here and make it look like this. We're getting the first item we are overlapping width and getting that reference and then add to inventory again, if you want to loot every single item you are standing on with just one click. You have to take this, say for each loop. And then for each loop, get item reference. And then you can plug every single one here. So it's going to loop through this until there are no more items to loot and then it's going to stop. So I just want to loot one item at a time. I'm satisfied with that, with everything, and let me go back to the inventory now. So over here, we now have an item we are alluding. So if you just click on Print and just connected here, and just connect this with this here. So you can actually just see what, what's happening. So let's click on Play. Now. Here's the server. I'm going to go to this here, like on E and it's going to say meat. So it knows what item one losing. I'm standing now in two items, it's going to lose. The first one is overlapping with. If I click on it, it's going to say Cleaver. If I go over here to the side and only interact with the banana, it's going to say banana. Awesome. So everything is working. So here what I want to do is just right-click and promote this to a variable and call it item to add. And for this one I want to get the item info as well and make that into a variable. There'll be a lot cleaner for us later on. So remember we made get item info, however we need a name. And remember again, in the item base, we already made this item name, this variable here. And when we made it in the item base or each of this single child's, we had to write the item name up here. So if I just open it normally like this, remember when you make a variable in the parent blueprint class, the item-based, all the children will inherit this variable. And you can now input here in the class defaults and put the names for all of them here. So we actually already have that name. So let's go to the inventory component. And now let's derive from the item and get that item name variable. And now we can plug it in here and get that item's information. Just for this one, I'm just going to right-click promotes a variable and I'm just going to call it item to add info. So we have the information of the item we want to add, and that was it for now. So let's compile everything and let's move on to the next lesson. 38. 6.03 Adding Item to Inventory: Okay, so now we need some logic to add the item to the inventory. So here we made this add to inventory. After this lesson, we're going to check if this item is stackable or not. If it's not stackable, we're going to create a new stack in the inventory and add that item. If the item is stackable, we're going to check if we already have that item in the inventory and add that to the stack. If not, we're going to make a new stack. We're going to do this and the next one, however, for just two, Let's get into a better flow. We need to create a function first before we can do all of this. So let's create a new function here, call it add item to inventory. So this is, this function here is the final step. So when we create a new stack, or we find a partial stack and add that item, this function will take in place. So let's say we create a new stack successfully. Then we're going to add that item to the inventory after we make a new stack. So this is the final step. Let's just make this one before we make everything else, because this will make things a lot smoother. Let's go to add Item two inventory. Here for the input, Let's make a reference to the item info. So the item we want to add and also the quantity of the item. So that is an integer and let's call it quantity. And then remember for the items we also have the inventory slots. So if we go back to the player controller and over here, for each item, we also have like we have the ISM, we have the item quantity, we also have the inventory slot, and we have the inventory index, so we can use that here as well. So let's go back to the component here and four here. Let's change it to inventory slots. Let's select this Widget Blueprint reference, and let's call it, let's call it inventory slots. And this one, let's call it slot index. And I'm also making new one. And we need to know which which inventory are we adding it to? Are we adding it to the weapons category? Are we adding it to this food category or this potions category? So let's make a new one here as well. And let's search for inventory slots. Because these are the type of inventory slots structures. So inventory slot, let's change it into an array, and let's call this one inventory. So it depends on which inventory category we are inside. We want to add that item inside of this category. Okay, so let's take this inventory now and set array element. Now, outside of this function, it will be decided which of these three it will be added to. We're going to take that information and set the array element. Now what is the index? The index is simply this slot index. Very simple. Now for this item, again, just like before, let's take this and write make. Now for this item, we want to add this item here. We want to add this quantity, we want to add this inventory slot, and we want to add this slot index. So this is the item we are now adding to the inventory. And it is actually as simple as this, this function is finished. There are a really small, small detail. And imagine if we are already inside of this category. So let's say I'm looting a weapon, I'm loading all happen. And I'm already inside of that. Like I already have my weapon inventory categories selected. So when I load a weapon, it should instantly update my inventory. So I can actually see that I have loaded the weapon here just to make sure that the inventory is updated. So the inventory that I'm already in, so if I lose a weapon and I'm already inside of the weapons category, we want to make sure that the UI is updated so I can see that UI change. So what we want to do, we want to take that item and let's break this here. And I want to take the category of that item I am loading. Now I want to see if this item I am loading has the same category as what I have selected. Apparently. If it has, I want to update the UI. If it doesn't, I don't want to update the UI. And the reason why I don't want to update the UI is because remember, if I just loop this food here and it gets loaded here and I'm, I'm, I have selected the weapons category. We don't really need to update this UI because it has been added to the food and I'm inside the weapons so we don't really need to update anything right now. Remember when you click on new categories here, it will automatically update all the slots we're already updating when we click on the inventory categories, however, we just want to update if we are already inside of that category because it is not getting updated anywhere instantly. So here I'm going to check if that alluded item category is equal here, equal enum, if it is equal to the selected category that I have right now. And if it is, Let's take a branch here. If it is equal, then remember in the inventory slot widget, we made our phone, we made our event called updates, inventory slot UI. And the item we have to plug it in, that is this item and this quantity. So now it's going to update that UI whenever I load my item. So if I'm already inside of that selected category and that item is going to be added to that selected inventory category. It's going to instantly update my UI so I can actually see the change, right? So now I created some reroute nodes and this is what it looks like, a bit more organized, organize them before, just make sure your code is more organized. And now when you are satisfied with the result, let us now compile, save everything, and let's move on. 40. 6.05 Finding a Partial Stack: All right, welcome back. So now we are going to the second part where we are going to create a macro to find a partial stack that already exists in the inventory. So far, what we have done is trying to see if the item is stackable or nuts. And if it is not stackable, we're creating a new stack and adding, adding that item to the inventory. So now if the item is stackable, let's try to find in the inventory if we already have that item. Now what we can do just like before here, where we've got the inventory. Let's actually just copy all of this here. And I'm going to copy this loop as well. Just copy this, go back and paste it. So basically, just like before, we're going to take this category for this item. Then we're going to select the category. Because depending on what the category for the item is, we want to look inside of that specific inventory, e.g. if we're alluding a potion, we're going to select the potion and we're going to loop through the inventory for the potions to see if we already have that item we are loading. So if this is true, let us just connected here to the execution plan and to find if we have this specific item we are alluding, we can derive from this and break it. And here in this item, Let's break it again. And remember here we have a name for the item. So I'm going to drag from here and say equal and select this one for the text equal exactly. Now, if the name is exactly equal to this name for the item, including, I'm going to take this, break this as well, and connect the name up here. Hide unconnected pins for this one as well. And let's make a branch as well. So now what we are doing, we're looping through the inventory e.g. potions. So for loading a potion, and then for every single item inside of there, we are actually checking if this name exists for the item. We are alluding. If the name exists, that means the item is already in the inventory and we have found a partial stack here. Second thing we need to do just to make sure right now we're just checking if the item is the inventory. But what if the item has already reached the Max Stack size? So e.g. potions, let's say I can lose five health potions. What if? What if, yes, I have the item in my inventory, so I found a partial stack. However, I have already full stacks on that, on that stagger that I have. Let's say not only check the name, but also check the amount that we have in the inventory. So over here, let's click on this one and show the item quantity for that item inside of our inventory. And this item quantity needs to be lower than the maximum stack size of this item here. So Let's show the Max Stack size and let us connect it here. So to find a partial stack in the inventory, it needs to have exactly the same name as the item inside of our inventory. And the item inside of our inventory needs to be, the quantity needs to be less than the maximum stack size for the item. Else we need to find a new stack and add edit to a new inventory slot. Let's click on here, just hide them connected pins for this one as well. Here, Let's drag and say end Boolean. So we use this one and Boolean. So if the name is exactly the same and the quantity is less than the max stack size, then we can go ahead say that we have found a partial stack. So let's create a new boolean. And this one I'm going to call has to create stack. I'm going to set this one to false here because now we found a partial stack and the amount of, the quantity is not, is not larger than the Max Stack size. It is lower than the Max Stack size, which means we can actually add items on top of the stack. So it has to create stack set to false and we can go ahead and edit the item. So before I do this, just like before, let's select all of this here. Let's right-click and make it into a macro. And this macro, we're going to call find partial stack, like this here. And for the output again, I need to add a, an inventory item. So dragging this year. So for the output, I need all of these. Again, just like what I did with the create new stack. So let's go ahead and click on Find partial stack. Let's add a couple of variables here. The first one is balanced, so we found an item and this is an execution pin here. And let's just drag this away for now. So item found here in the partial stack, again, just like before, item to add. And then we have the quantity. To add, then we have the slot index and the last one here we have the inventory Variable. First one item is item info. This is the item we want to add. That quantity is just an integer. The slot index is just an integer as well. And the inventory slot, actually I forgot to add. Let me add the inventory slot, which is the the Widget Blueprint. So inventory slots and selecting this widget blueprints. Putting it up here, I'm just going to put it above the slot index here. The inventory is the inventory slots, then selecting it as an array. And this one, I'm going to name not found. So if we didn't found an item, and this is an execution pen. And I also want to make a new one called loop complete, just like before, which we can do something with here. So loop completes, not found. Let's compile and save everything. Alright, so let's go back here and let us just to reorganize things a little bit inside of this macro. So this is what you have so far. And if we don't have to create a stack, we can go ahead and add this to the inventory. So what do we want to add? What do we want to add? Is this item here, item, item to add info. Let us copy this and paste it here, the quantity for the item. Let's drag this item to add just like before and say quantity. Take this get item quantity and add it here. For the inventory slot. We got this inventory here so we can use the inventory slot and index. Let's drag those into here as well. Then we have the inventory again. It is this one here. Let's drag it and connect it. Okay, so right here we are checking if the item quantity in the inventory is lower than the Max Stack size for the looting item or the alluded item here. And if it is, we have found an item and we don't need to create a stack. So let me go out here now before we do anything here, let me just add another logic to make sure. So over here, right now there's something we're not checking for. If I take this quantity to add the item and I need to ask, is it lower or equal to the year? Let me take the item to add info, break it, and take the max stack size connected here. Now, before we're checking the inventory item, right now, I'm checking the quantity that I'm learning right now. Is it more than I can put inside of this stack? Or can I fill this whole quantity into that stack I just found? So just making sure I'm not going to create another stack here. So let me connect it. So if this quantity to add is less or equal to the max stack size, then we are not going to create any stack. So let me just add it here as well. And let me actually just add the item first. And then say has to create stack is set to false. And let me go ahead and break it. So right now we don't have any break execution pin, so let me click on it and let's create another one called break loop. Now let's connect over to the brake loop. And so down here, if it is true, like the quantity of items we need to add, if it is actually not lower than the Max Stack size, which means that we actually need to create another stack. So we're going to add whatever we have into this current stack. And then we're going to create another stack. So again, just like before, remember here and the Craig new stack, your calculated what you had left here. So we actually need to do the same thing. Let's just copy paste this. So I'm going to copy all of this here, going to the Event Graph here. And we can paste it here. This here what we need to add to the inventory again, just like before, we need to add the quantity is the Max Stack size for this item here. And let's connect the item. Let's connect the inventory slot, the slot index, as well as the inventory. And then we are going to set this boolean to true. So we have to create a new stack to add this remaining amount of items. So let's set it to true. And then I'm going to drag and plug it into here because this goes back to this break loop. Let's double-click here. Let's make it clean. So now let's go back to this fine partial stack and let's do something here in the complete. And also remember to take this break loop inside of here. So we're making sure we're actually breaking the loop for the complete. Let's take our hands to create stack and make a branch. So now we're asking, do we have to make a stack or nuts? What did we set it during this loop? If we have to create a stack, we want to set this to item not found, because we have to create a new stack. If we don't have to create a new stack, then the loop is just completed, just like this. Let's put it down here, just like this. So if we have to create a new stack, it means the item is not found. And if the item is not found, let's drag it right down here and create a new stack. So now the item is not found. We have to create a new stack. Okay, so if the item is not found, we're going to create new stack and the loop is complete, is just if we already found the stack and we don't need to do anything so we can play a sound or whatever we like to. So now let's go back to the fine partial stack. We're missing one final step here. Let's say, we said here we have a stack that is equal to the name of the item we alluded, and the quantity of the item inside of that inventory is lower than the Max Stack size for the item we're alluding. If that is false, we need to do something just like before. We're going to take this loop here and say plus, plus. So we're going to increment by one. And just like before, we're making sure that this here is less than the amount of slots that we have in our inventory. Let's make a branch. And if that is true, if it is lower than the amount, actually, let's, let's plug it into here. And if it is actually lower than the amount of slots, Let's just go ahead and again, just loop here and find a, find an item in the next index, right? So I have organized it just a little bit. So now it is larger than the amount of slots that we have. Then we will take this has to create stack to be set to true because we can't really find any item that we can add this item here too that were alluding. So we have to create a new stack and drag from this and go ahead and plug it into the break. Because now we have to break the loop. And now when we go ahead and break the loop, remember when it is complete, it says, yes, you have to create a stack and that will go over to the item not found, which then goes over and creates a new stack. Okay, so let's make sure this actually works and see if we have any bugs just like before. Let's save everything. Now the bananas has the stackable set to true, so we can try it with the bananas. And let's set this here too. Let's actually check what we said for the bananas. So going to the item info that banana has, if we maximize it, it has the maximum size, stack size of ten. So let's duplicate this banana here and holding Alt and dragging, I'm going to duplicate it here. So for this one, I'm going to set the item quantity to five. And for this one, I'm going to set it to four. And then let's copy it again. And let's set this one to five again. Let's save everything. Let's try to play it over for the server. If I click on AI, I click on E here. It's been added to the food here. Yes, we have five bananas. I click on it here. It says For there is something with the quantity. We're setting it wrong here. And if I click on ear, is set to five, so there is something wrong. It's just setting the quantity here. Let's go back. And of course, I see the bug right away here in the find partial stacks. I'm actually not adding here in the quantity. So let me delete this, actually just let it be. What we have to do is take this item quantity and then we need to edit with whatever is already inside of the inventory, of course. So taking this here and taking saying add, so plus loss, the amount that is already inside of the inventory. So let me plug it into here. And let me plug this into the one to T2 ed and compiling. And just before we try the game, so here in the loop, complete, Let's just destroy the item just like before because we are adding this to the inventory. Let me just move all of this a little bit away from here. Let me paste this. And for the loop complete, let's go ahead and destroy the items. So let me resize this for you. Let me click on E here. Now we're losing five or loading nine. Now it should say ten and for just 10.5. And I suspect Actually, this is correct now, but I suspect we have a problem again with a delay, just like we did here with the creating a new stack. And we delayed the code. If I can find it here, we delayed the code. Let's do the same thing because I suspect it's actually doing the same thing here. So when the item is not found and it's creating a new stack, let's delay it by 0.03, just like before. Let's just try it before I reorganize everything, Let's click on Play. And I'm going to look this. I'm going back here, I'm going to this, I'm going to load this as well. So now it says five, it is still bugging out. And what if I try to increase the delay? And I try this again? Now, it is working perfectly. So it is actually this delay. We need to fix this delay here, maybe something 0.05. I'm not a fan of putting this to high because you can actually feel it in the game if you put it too high. I'm just trying to make it work real good. So 0.05 works well, you can have it that way, maybe 0.04 weeks as well. But now it works perfectly. So now we're actually adding those. So if we click on play, and I just loved the ones that have five. So this one, I'm going to leave this one as well which have five. Now if I load this one, it gets added to the inventory as well. And if I alluded this and this, I get those inside of my inventory. Because remember we had two knives and to cleavers, this one needs to be increased in the delay. So maybe 0.05 is a better number. Let's change this here in the create new stack as well, just so we don't get this bug. And as the final test, Let's run the game again. Let me load this here, gives five. Let me load this middle. This is 2.2. That's correct. This glute this, and all of this is correct. Now, awesome. So that was it for creating a partial stack. So let's just make this a more organized for this delay here are just, let's just place it down here. So what we're doing here, now we created a new stack and we're also finding a partial stack if we already have it in the inventory and the item is stackable, else if it is not found. So we already have a full stack. We're going to create a new stack for it. And here in the loop complete, you can destroy the item. You can even play a sound effect, and we will do that later. So go ahead and organize your code just to make it look better, and that was it for now, save your work and let's move on. 41. 6.06 Optimizing the Inventory: Hello and welcome back. So right now I want to optimize the inventory before we continue. So there is a small bug. Now, if I allude this one here and this one here, it's four plus five, it should be nine bananas. And that is correct. However, if I click on Play again and I allude them without opening the inventory, it says none correctly. If I lose the last one and it says ten, the first deck, and for the next stack, it doesn't show that way. It just shows four. It should be 10.4. So there is a bug here. This is because we're not creating all of these widgets unless we opened the inventory. So you can see if I hit play again. And if I open the inventory, lake on all categories, close the inventory and I allude everything here. You can see when I open the inventory, it actually works. So the reason why it's bugging from the beginning is because we're not opening the inventory. And that is because also we're not displaying all of the or creating all of these slots unless we opened the inventory. That is a small bug we want to fix. And also I want to fix and optimize the inventory because I know the code can be better and let's do it the best way. But let's go over to the player controller. Let's go to PC **** down here. And so far we have this one called Create, inventory slot widgets. I want to separate the creation here. So what we need to do instead of creating it only for the selected inventory category. We need to create this for all categories even though we have not opened the inventory. And then I want a separate event where we display the inventory slot widgets. So we actually created this whole thing from the beginning. So when we opened the inventory and click on different categories, we don't keep creating new ones. We don't need to, we only need to create this once here and add them to the array. And then we just display the already created slots when we are clicking on the categories. So there's this optimization that we can do. So let me right-click, go to custom events and create one called Display, inventory, slot widgets. And let's make a new one here running through the clients. So run on owning client reliable. So for this one, we just want to display the widgets. So It's actually this last part of the code. Let me just copy this here. I'm going to click Control X to cut it out and paste it down here. Now we need a reference to the inventory here. So I'm going to click here and search for inventory, AAC inventory, and call it inventory. And this one, clear children also needs to be down here because this one is just for displaying the inventory slots. So this is a specific word displaying, and I'm going to add it down here. And we also need this loop here. We also need it up here. So I'm just going to copy it and going to paste it down here because we need to loop through all of the widgets and display them. So we need this as well. And I also need this selected category. I'm going to copy it, and I am going to paste it down here. And let's connect the inventory. Now for these rows and columns, remember we just said here divided by four. Let's just cut this out here, paste it down here, connect them like this, and also connect the index to this year. And over here for this inventory, what we can do is we can just derive from this and say, gets, what do we get? We just get this index here. And let's take this and say break. And now for the item we want to update here for the inventory, let's drag it and plug it in. The quantity is just this one as well. Now for this content here, this is remember before the content or the child to grid here the content is this widget we created. However, remember this widget, we are saving it inside of this array in the inventory slot and the slot index here and the inventory slot. Let me just delete this here. And I can drag from inventory slot and add it here to the content, as well as updating the inventory slot UI. This slide index here. So let me connect it and add some reroute nodes. So it's good to look at. Okay, so here I added reroute nodes. So what we're doing just like before, we're clearing the children, and then we're looping through all of the widgets we created. We're getting that index depending on what inventory we want to look at right now. And then we are taking that item quantity, logging them in, updating the UI, and also displaying all of these inventories lot widgets. So now with this event, we only need to create all of the widget ones. Because now when we click on the inventory category, widgets. We're actually just displaying them without creating them all the time. So up here we actually want to fix this as well, because right now it is not creating all of the widgets. You can see here. It's only creating the widget for the selected inventory category. So what we can do here, we can drag out like this. And just what we did up here with the categories, we just got all the categories. Let's copy this one. Gets that a table row names for all of the categories. So these are the three categories we have. And let's get the length of the categories. So now it's going to print three because we have three categories. Let me right-click here, promoted to a variable and call it a mount of categories. And this is the amount we are going to loop. So we're going to loop that many amounts to create all of the widgets. So let me just create it. So it's not too confusing. And as for the length of amount of categories, I'm actually going to drag from here and say minus one because we are going to loop them starting from zero. So 01.2, so we don't need this to say three l, So we will rent four times. So we have three categories. We're starting to print from zero. So 01.2, that is why I'm subtracting by one. And let me make another variable here called temporary counter. So we're going to use this one to know how many times we are going to loop. So if this amount of categories, let's take this temporary counter, set it to an integer, say cut out here. So if the temporary counter is less or equal to the amount of categories, so remember the temporary counter starts from zero, the default is zero. So if it is less or equal, the amount of categories, which is two, then we can go ahead and loop through the categories. Over here. Let's just connect it and loop through and down here, instead of using the selected inventory category, I'm going to delete this and let's use our temporary counter instead. You can right-click this here, and you can click Change pin type, and you can change it into an integer. Now we are using an integer and we're going to connect this here. So as you can see here, let me just drag this away. Let me delete all of this. Drag this here, also just disconnect this for now. So what's going to happen is we're going to start with zero because the temporary accounts are default value is zero. We're going to select this option here, the weapons. And now it's going to ask, is the temporary account or less or equal, the amount of categories, which is two in this case. So first it's going to loop the first one, then we're going to add one to this counter, so it says one. And then it's going to loop through this, then it's going to loop through this. And when it gets to three, when it gets to three, then this one will actually be higher than the amount of categories, which is two. And then it will not loop anymore. So this is what we're doing. So let us connect this inventory to these three categories. And over here, let us reconnect this to the array. And let's also reconnect this to the gets over here. Let's compile. Now when we complete the loop for the first one, let's take the temporary counter, dragon and say plus, plus. So we're adding one to the counter. And then we're going to loop through this again. So let's just call it from here, create inventory slot widgets. Create inventory slot widgets. And we have to set the inventory again. We can just drag from this one and plug it into here. So now it is working. And if we take a look here, this one we don't want, so let's just delete those here and I'm going to create some reroute notes, so it's better to look at that. So now I have organized it here as you can see, so you can see the code here. So first we are getting how many categories do we have? And we're subtracting by one because the temporary counter starts at zero. So we have three categories in total starting from 01.2. So these three categories, we're going to loop through them here. And every single one we're going to loop through the category. We're going to create widgets. And we're going to add, just like before, the categories or the inventory slots to that category array we have selected. And again, we are now selecting as soon as a temporary counter. And when we finished the loop for the first one. So when we finished the loop for the weapons category, we are going here into the complete, we're adding one to the temporary counter. So it starts at zero, then it gets to one. And then we are recreating the inventory slot widgets here. So it's going to run this again. And now the temporary counter is equal to one. And then it's going to actually create all of the widgets for the food category. And then when it's finished, it's going to set it to two. And then it's going to create for the potions. And when it gets to three here, then it's going to say false. And what we can do here at the end, when we have created all of the widgets here, we can display the inventory, so we can call this one called Display inventory, slot widgets. So let me just call the client one up here before I forget display here. And the inventory we can drag it into here. And let's call it over here when it gets folds. When we have created all of the widgets, Let's say display, inventory, slot widgets. And for the inventory, Let's take it up here, connected here with the reroute nodes and let us compile and save everything. So we have this logic as well for the player. So let's go actually not here, let's go to blueprints player. And inside of here, remember in the beginning we said initialize inventory. We are re-sizing their race. That's fine. And over here we are creating the category widgets that is fine. And the inventory slots as well. So this is correct. Now let's go back to the inventory. I think we have some logic we need to change there. In the components inventory. We have this one when we click on a category on the inventory. And actually I can go back just for clarification. For the inventory category when we press on it, remember, when we press on it, we set the inventory category. And if you double-click here, it's this code here. We are creating the inventory slot widgets. Now we have optimized the inventory, so we are going to delete this and instead we are going to simply display inventory slot widgets. So now we can just display them and the inventory is optimized. We don't have to, we don't have to create those widgets again and again. Alright, so let's test it out before we do anything else. And I think we have everything. Everything's looking good. Let's compile, Let's save. Let's click on Play and see if we have any bugs. So let me go over and loot everything just like before and see if I can actually load them now. So if I click on I opened my inventory, they are being loaded correctly. The same thing for these ones here. Now, when you switch the inventory category, it's actually just displaying whatever we have already created. So this is a lot to optimize now. It's very optimized with the inventory bug fixed and with the inventory optimized. Let's move on to the next lesson. 42. 7.01 Adding Drag and Drop Operation: Alright, so now we're ready to drag items from the inventory. So let's go over to the UI and go to the inventory slot. So what we are going to do now is we want to drag from the inventory. So if I click Play, I want to, if I have an item here, I want to drag this item and I can drop it on the ground. So this is what we're trying to do. Go inside of the inventory slot. Let's go to the graph. And inside of this graph, let's go to functions and click on this Overwrite button. Now here we're going down and let's see here, let's choose this one called on mouse button down. And it creates this function here. And here what we want to do simply is just drag from here and say it sect, drag if pressed. So you have to do this so it can detect your mouse button and clicking on here and I'm going to click on my left mouse button, or you can just find it here. And for the mouse event, let's connect it with the pointer events. And for the return value, let's connect them together here. Alright, let's compile now. And again in the functions up here, click on the override again. And let's search for on drag detected. So it's up here on drag detected. Select this one here. And here, let's just print string and you can see what's happening. So I'm just going to say hello. Let's compile and let's click play. And if I open up my inventory and I click here, you can see it says Hello. If I click and drag, now it actually detects that I'm dragging. And it says here low. So now we can add some code inside of here. So before I do anything, let's get a reference to the player and to the player controller. So again, we are inside of a UI and for us you can say Get Owning layer. This will get you the player controller. And if you use get Owning Player Pawn, this will get you, the player character getting this one here to get the player controller dragging from it saying gets layer controller. And again, this is from the Blueprint Interface we can use. Let's right-click promoted to a variable and call it layout controller. And again, right-click saying Get Owning layer on this time. So we can get the player and right from here and say gets layer Eric top. This one gets their reference. And getting the player reference we can right-click, promote your variable and save layer on. Okay, so what we're trying to do here now when we click on play. So what I want you to do is what I have this item. I just want to get the information inside of this item because when I drag here, I want to display the icon that I'm dragging from the player pawn. Let's get the inventory again, inventory. Let's scroll down and select this inventory. And just like before, we need all of the categories. So if you write category, you can get the weapons category and the food category, and then the potion category. And just like before, we need the selected inventory because we need to know which inventory we have currently selected. So just like before, let's right-click and choose the select function here, select node, neck, the select inventory. And again, just connect all of these inventories. So depending on what we have selected here, Let's drag and say gets. And now it's going to ask you which inventory slot index you want to get. Remember we are in the inventory slot. So you already have this variable slot index. So let's connect it here. So now we're getting the index we are clicking on. Now before we run the detect drag code, let's just make sure we have an item because I don't want to make the dragging work for inventory slots there are empty. So taking here saying break. And so for this item quantity, it is not equal. So we can write this. If it's not equal to zero, then I want the code to go ahead and run. However, if it is zero, we don't want to have the code run because the inventory slot is empty. But now the most important thing, this is the function that is very important. Let's right-click and right creates drag and drop operation. So this one is going to drag the icon and it's going to ask you, what is the default drag visual, which is the icon we are dragging. Remember again, we are inside of the inventory slot. So we can just take this one here, the image inventory or actually the image item here. Plug it into here. And now we have the item plugged in, just making sure that slot we are dragging from is not empty. So we actually have an icon that we are dragging. Alright, so that was it. Let's now connected here. And for the operation, let's connect it together like this. You can click on here, click on the height unconnected pinch just to make it more clean and let us try it out. So let's compile, Let's click on Play. And if I drag like this, nothing happens. If I go over and load this, I drag. You can see now I'm dragging the icon. It's looking great. If I do this for the banana e.g. and I drag, now, I'm dragging the banana. So you can now see it is working. But now we need the code to work where we actually drop the item. 43. 7.02 Dropping Item From Inventory: Okay, so now we want to drop the item and to do so, let's go to the main UI here. And inside of here, Let's go to the graph. And again, just like before, and the functions click on the override. And let's select this one called on drop. Because initially, when you are playing the game here and taking an item and dropping it from the inventory, are actually dropping it on top of your main UI. We're going to write this code inside of here. Now before it can work, you can see here if I print a string in the UNDRIP for the main UI, it needs hello. So you can see the code is working. However, right now it's not by drag and drop. You can say it's not saying hello. The code we're writing in here is actually not working. So to make it work, you can go to the inventory slot. And inside of here, in the graph here, for the on drag detected, you need to take the player controller. We already made that reference. Take the player controller, take them main UI variable. And you actually need to set the visibility of the Canvas. Right now if you click on the canvas, you can see that the visibility is none hit testable, and it actually needs to be visible here in order for it to work. But we don't want to change it by default because visible means it blocks your mouse when you play around. So we only want to change it whenever we are dropping the item. So let's go back to the inventory slot. And here, let's take this and say set visibility. And we want to set the visibility to visible. So that is correct. Let's take it here and drop it right before we finish the operation. We are making this menu I visible. And let's create some reroute nodes and let's connect it just like this. Alright, so let's compile and let's go back to the main UI. And now if we try to drop, we are going to say hello. So let's play here. Let us go to this Cleaver. Let us drag and drop. And you can see it says Hello. So now the code is working here in the Andhra function for the main UI. So here before we get started, just like before I want a reference to my player. So let's right-click and say Get Owning layer upon, let's drag and say Get Player Reference. And let's connect it together. And let's right-click and promote this to a variable and saying layer on. Now what should happen when I drop the icon here to the level, it needs to spawn item again. So now I need to spawn the item. We need some spawning logic. Usually the spawning we do that in the player controller. So let's go to the player controller. And in the player controller, by the way, you can see I created comments for everything just for you when I give you all of the code. So that is very nice to see and to create comments. If you don't know, you can just over, over some of the elements and click C on your keyboard, and that creates comments. So very nice to be organized like this. Alright, so let's go down here and let's right-click and make a new custom event. And let's call this one drop item. And to drop the item, we need to spawn it into the level. So drag here and say spawn actor from plus. And now we need the last of the item we are spawning. Let's just drag this, plug it into here, this bond transformation as well. And for the collision handling, you can just say try to adjust location but always spawn. And when we spawned the item, we also want to spawn the quantity for it. So dragging from here, now this is a, an actor objects. So we can't just say set item quantity, like we have it here in the, if you remember in the item base, if I go to the item base, we have this one set item quantity. However, I just need a reference to the item first if you can say get item reference, the one we made before with the interface. And now you can say set item once a t. Now we also need to set the quantity when we spawned the same depending on how many we dropped from the inventory. I'm going to drag this and connect it here. And I'm just going to drag it right above or right under the class, the class I'm just going to call it item instead. Item quantity is good and spawn transformation is good as well. Alright, so usually when we spawned things, we go through the game mode. And the reason we go through the game mode, if you remember the multiplayer compendium, that game mode is always existing on the server, it never exists on the client. So going through the game mode, we make sure that the client doesn't spawn things randomly and cheating. So we need to go through the game mode. This one, we're actually now working backwards. We need to spawn from the inventory component. However, I started here. So it's actually more clear where the thing, the main goal here is to use this one called spawn actor and we're responding the item. So now let's work backwards. Let's go to the game mode, because the game mode needs to call this event. So let's go back. Blueprints a mode. Let's open the full blueprint editor. And here let's make a new custom event called request. Drop item. And this one needs to call this from the player controller. So let me just click here and make a variable for the player controller. And it is PC **** down, this is what we called it. And let's say layout controller. And from the player controller, Let's drag and call this drop item function. We are event we made. For the items. Let's just click and drag and drop. And for this bond transformation, Let's actually drag from here and say make transform. I usually make the transformation in the Game Mode and further location again and just click and drag and drop it into the request item. Now, here we don't need to replicate and run on Server, because remember again, that game mode always runs on the server. You can't run any clients stuff inside of here, the client cannot access the game mode. Everything or create here always runs on the server, so we don't need to set it to replicate it to server here. Okay, so the last step, this requests drop item needs to be run from the components, the inventory Component. Let's go back to the components. And it all, it all starts here, so we're actually working backwards. So here let's right-click and create a new custom event. Let's call this one, drop. Hi Tim. Here. Let's make a new one running through the server called drop item. Just like that, run on server reliable. And this one we are going to call the server one server drop item. And here we need to call the one from the Game Mode. So I'm going to right-click and say gets a mode and then drag from here and we need to get the game mode reference. However, I don't think we created any interface, Blueprint Interfaces for the game mode. So let's do it here. You can do it alone if you want or exercise, and you can do it with me. Now, let's right-click, go to blueprints, create a Blueprint Interface, a mode. Let's open it up and here make a new function called gets Game Mode reference. Now, here we need to say what are we trying to reference? We're trying to reference the bug town. This one, this is our game mode, and let's call it a mode. Now let's compile and save everything. And let's go back to the Game Mode, going to the Class Settings and then adding that interface, interface game mode. Now let's click here and the interfaces, and let's call the self reference. So now we have defined what this variable is. Now we can go back to the inventory component again. We can drag here and say gets a mode reference. Now let's connect it. And from here we want to run the request drop item event that we made. Alright, so now let's just connect them here. Let's connect the player controller, the item, the item quantity, and the location. And now we have them up here in the drop item. And we're going to do the same thing. The player controller, the item, the item quantity, and the location as well. And now we can use this one inside of the main UI. So let's use this. So what's going to happen is we're going to call through the main UI. And it's going to go through here, going through the server just to make sure it's not declining running it. And it's going to run through the game mode. It's going to request to drop the item here in the Game Mode. And then when that is possible, it's going to drop the item, the player controller, where its bonds the item as well as the quantity. So let's go to the main UI here. So inside of here from the player pawn, Let's take the inventory, because now we want to call this event here. You'll go in here taking the AAC inventory variable here down at the bottom. We can now say drop item and select it here. Now we need a plugin for the controller, so we can just drag from the play upon and save player controller. We already have made a variable inside of here, plug it into here, and now we need the item class. So how do we get this one? Just like before, I'm going to the inventory slot and I'm going to copy all of this here. So copying all of this and copying this as well. I'm going back to the main UI, pasting it here. I'm going to delete this slug index, so I just have this here. And for the inventory, we can just connect it. Let's take the Player Pawn just to make it more clean. Instead of connecting this here, let's take the player pawn called the AAC inventory variable again here, and then connecting it to all of this. And now for the index, we need to know what we are dragging. Because now when we are dragging an item, we actually need to know what is this slot index we are dragging from. So I'm going to go back in the UI and I'm going to open the inventory and I'm going to the graph. And here I'm going to add a new variable, this variable I'm going to call dragged slot index, and I'm going to set it to an integer. And let's compile. Now, let's go back to the inventory slots. So here in the inventory slot, when we are dragging from that, let's actually set the drug slot index here. So I'm going to push this a little bit here. Let's take the player controller, let's call the WB inventory variable. And from here we made the Dragged slot index. I'm going to set that here and just drag it up here, set it. And what are we going to set it to? We're just simply going to set it to this slot index here because this is the slot index we are dragging. If I compile now and go back to the main UI, I can take the player controller. So going to take the player pawn, going to take the player controller. And from here we can take the WB inventory variable. And now we can call the drag slot index. We can plug it into the one up here to get the item information. So now we can take this and say break. I'm going to take all of this and just push it backwards here. So for the item class, we have it inside of this item. So if you take it and say break and open it up here, we have this item class. We can plug it into the item as for the quantity we have it here. So let's plug it in and asks for the location. Let's just put it wherever the player is currently. So taking the Player Pawn saying gets actor location. Taking this here and you can plug it into the location, clicking on this one, pressing hide unconnected pens as well as this one hide unconnected things. Alright, so now we are actually dropping the item. However, we also need to update the Inventory. So I'm going to take this one here and say set array elements. And let's connect it here, or the item we need to remove the item from the inventory. So let's say here and say make. And we're going to make that inventory slot. So for the item, we're not going to add anything that will delete the item from the inventory as well as the quantity we're not going to add anything. However, we still need to keep our inventory slot and our slot index so they don't get deleted. So clicking here on the inventory slot, let's show our inventory, inventory slot and index as well. Let's drag them into here. And the only thing we're going to delete the item as well as setting the quantity to zero. Now click on here, hiding unconnected pins. And now for the index we can just drag from this dragged slot index. We can just copy it if you want. And it can paste it up here just to make it more clean and you can plug it into here. Now we also need to update the UI as well. Remember to do that as well. So directly from the inventory slot, saying update inventory, there's logic connecting it for the item. We're not going to plug anything in that will delete the item from the inventory as well as setting the quantity to zero. Now remember to do this now we have updated everything that we need to update, and let's connect it here now. And remember to click on the Boolean here ticket. So it's true and let's compile and let us now try the game. So save everything, click on Play. Now let us go ahead and lose something. And let's click and drag it into the world. And you can see it is spawning, awesome. And I'm going to drag this one as well. It is spawning. And if I just click on the banana, take it up, drag it and drop, it. Drops here. If I click on it, alluded again, it loads the correct amount. If I click here, I drop this one is ten. This one is for, I loved this one. It should actually look at this one first. It says four. I'm going to load this one is going to add six here and then saying four here. So it's actually working as it's supposed to do now that we are dropping items from the inventory, let's actually add some physics, so it looks good when we are dropping them and they're not floating in the world. 44. 7.03 Enabling Weapon Physics: To enable the physics for the items, let's go ahead and click on the Items and the blueprints. Let's open up the item base. And inside of here, if you click on the class, defaults are actually in the mesh and the item here, you can see here in the Details panel we have something called Physics. And here you can click on simulate physics so it can drop down on the ground. However, this one you can see we cannot click it. So what we can do is we can right-click here. And in the beginning like events, we can drag this item right from here and say simulate physics. So set simulate physics and we're going to set it to true. So every time a weapon spawns or an item spawns, it's going to set the physics to be true. Now let's click on Play and see what happens. And right now if I click here and drop it, you can see it is still floating and it has something to do with the collision. So clicking on the item. And if we go down here to the collision, you can see it's set to no collision. And instead of no collision, click on Custom. And here, religion enabled, let's click on it and say religion enabled. So it's query and physics, we need the physics here. So collision is enabled. And we're going to ignore everything except for the world dynamic and the world static. And this is the ground so it doesn't fall through the ground. Let's compile now and let's click on play. And let me just lose something. And if I click and drop, you can see it falls, but it's false through the ground. And if this happens to you, I actually found why that was happening when I tried making it. And that is because the collision is really bad for these items that I downloaded. So if you just open one of the assets, e.g. item that clever, Let's fix this one. So this clever item, if you click on show, maybe this happens to your project as well. So showing the simple collisions here, this is a simple collision. And what you need to do is here in the collisions you need to add a box simplified collision. You can see this simple bugs got added. If you click on it. Now I'm going to press R for the scale tool. And I'm going to scale it up. I'm going to reduce my scaling to this one instead. Let's reduce the camera speed a bit. I'm going to scale it up a bit. So we can see it has a bit of collision here. This is the collision box that we scaled up and down. I'm just going to scale something like this and to the sides like this as well. I'm going to test it here for the knife. Let's go ahead and click on collision box simplified. You can now click on it and increase it this way. And also up words just like that. I also do it. Let me just do it for the banana as well. Let me go to collision and then box simplified. And I'm going to scale it up. And the reason is this, the collision is really bad, so it's falling through the ground like this. So now let's save everything and let's just test it out with the items we already have. Now, you can see it's floating a little bit, and that is just the items. They are really bad collision. So let's pick it up, Let's drop it down. And you can see now it's not falling through the ground. So you can fix the collision on your item, make them more specific right now. These are done very quickly. So I'm going to add the collision as well for my potions. But now you can see they're not falling through the ground and everything is working perfectly. 45. 8.01 Getting Slot Information: Okay, so now it is time to move the items between the inventory slots. So when we lose an item here and the quantity is set to two, That's why I'm alluding to. But you can see her I cannot move them between the different inventory slots because we have not done so. We can just drag and drop them to the world and load them again. However, we cannot drag them into new inventory slots, and this is what we will be working on. Let's go ahead and go to the UI and press on the inventory slot. And inside of the graph, Let's go ahead and make two functions. So up here in the functions, Let's click on the plus and let's call the first one, gets dragged slots. And let's add another one called gets new slots, slot and get the new slots. So we want to get some information about these two slots because we will be updating them. Let's go into the first one, get dragged slot. And inside of here, Let's take the player controller or the player and the inventory AAC, inventory variable. So now we want to get the three categories, searching for category. First, getting the weapon category, getting the food category, and getting the last one, the potions category. And also get this one gets selected inventory category. And just like before, Let's do select the negative here and connect all of our categories, inventories. And we have been doing this a lot of times now. So now we just want to get some information about the Dragged slot. So depending on what inventory we have selected, we want to get that item. And now which item is it? It's from the drug slot. And remember we already made at dragged inventory slot index, and it's inside of the player controller. So what we can do is here, the player pawn and the player controller, Let's actually go back from the undetected and we made them inside of here. I'm actually going to cut them out from here and put them in the beginning play event instead, just drag the player upon just like this and connect it here. Okay, So that's connected. And let's go back to the Event Graph and let's make it begin play. And here we will add those two here so they are defined whenever we begin playing the game. Alright, let's go back to the get dragged slots. And inside of here, Let's take the player controller, let's say WB inventory, so the inventory widget variable. And here we have this one called dragged slot index. And let's plug it into here. So now we are getting the Dragged slot index. And from that one we can now say break. And this information, Let's just add it to a return node. So dragging from here saying return, adding a return node. And let's drag all of the variables inside of the returned node so we can use them later. Since we are just getting some information, we can click on this function and click on pure. So this is turning it into that green function, which is simply just getting information. So you can see the Event Graph. If I drag this here into the world, it is just this green Get function that doesn't have execution pins because we set it to pure. Alright, so now let's make this one get new slot index. So in the get dragged, I'm just copying this whole thing. I'm going to get new slot index. I'm pasting the whole thing here. And now we can again drag from here, make a return node. And let's just connect, just like before, connect all the variables here. And instead of doing the get dragged slot index, Let's just take this slot index. This is the new slot, slot index. So let's compile everything and save. And that was it for the gets dragged slot index and get new **** index. And we will be using them to update the inventory. 46. 8.02 Update Slot Information: Okay, so now we made the get dragged slot and get new slot functions. Right now we are going to make the update once again, go here and create new function. Let's call the first one updates, dragged slugs, and make a new one called update new slots. Let's go into the update dragged slot. And again, we just need the Dragged slot information. So I'm going back here and they get dragged slot. I'm going to copy this whole thing and I'm going to go back in the update drag slot and pasting them inside of here, and to update the slot again just like before, drag from here sets array elements. And now let us connect it here. So now we want to update the Dragged slot index and for the item, Let's drag it here and say make inventory slot. And over here, we're going to make new variables. Let's create two ones here. But the first one is going to be called dragged slot item, and the second one is called new item quantity. Let's change this one to an integer and the first one to an item info structure. So this is the item, that drug item is simply going to go into this item here for this array as well as the quantity. Let's drag that and we will be using this later. But let me just drag everything down. As for the old inventory slot and slot index, we don't want to change those. They stay the same. So we are going to take it here from the direct slot index. We're just going to plug them back in because we don't want to change those. The only thing we want to change in the drug slot, It's the item and the quantity coming from this input. And as for the slot index here for the array, we can just drag this slot index and plug it in. And now we are updating the inventory. But remember you also need to update the UI. So I'm going to drag from this inventory slot and say update, update inventory slot UI. And let's plug it in. As for the item, let's just plug this item and again, as well as the quantity for it. So I'm going to create some notes. You can click on this one and click on Hide unconnected pins, right? So I added some reroute notes and organized it. So now what we are doing is simply getting the drags lot index or getting the item. And here we just need the inventory slot and the slot index and plugging them back into the new one because we don't want to lose that information. The only thing we're changing is the item as well as the quantity for the Dragged slot index or item that when we are dragging it around in the inventory and we remember to update the UI as well. In the end, though, for the update new slot, I'm actually going to delete this and let's just right-click here and click on duplicate. And let's just call it update mu slots. And the only thing we're actually going to change inside of here. We're going to delete this drugs like index, and we're going to use this new slot index instead. Let me just push the code a little bit and organize it. And that is actually It's all, everything else stays the same. This is still the drugs slot item you will see later, and everything is the same. The only thing we are doing here is getting this new slot index and we're keeping the information about the inventories lot widget and the slot index as well. Now, let's compile and save everything. So now we have these. If I go back to the Event Graph, we have this one. Get drives slot indexed, get new slot index. Actually this one, again click on pure. So we have it like this. And then we have the update drag slot and update the new slot. So now we have those and we can use them to update the inventory. 47. 8.03 Dropping Item on Inventory Slot: Okay, so now we are ready to drop the item on the new and the old inventory slots. So let's go back to the inventory slot. Let's go to the graph. And here, just like before click on the override, go down and select this one called on drop. So now let's just print a string and see what happens. See if the code runs. So it should say Hello if I drag, so if I click on play and I drag from here to here, right now, nothing happens because there are no items. So if I drag here and drop it into here, you can see it says Hello. But for inventory slots where I don't have items, it doesn't say anything, so that is good. But if I drag here, drop it, it says Hello, so everything is working as it's supposed to. So now let's make a new variable here, and it's a Boolean, and I'm going to call it is stackable. So now what we want to do is check for us one thing and set this one to if the item is stackable or if the item is not stackable. Let's go Get over here and get the new slot and also get the direct slot. First, what we want to check is if we are dragging the same item on top of each other. So taking this item saying break, as well as this item saying break for the new item we are dragging into. Is this name on the new item slot, is it the same as the item we are dragging from the driver slot? If it is, that means it's the same item. And we also have to check if that item is stackable. If you right-click and right and B, you see this one and the Boolean. So first here, the first item, Let's drag this is stackable and plug it in here, like here, and say hi to unconnected pins. So is this item stackable? And is the name the same as the drag one? This means it's actually the same item. And also just to make sure I'm going to click this plus here and add another one. And just down here, also making sure that the drag items slot is stackable as well, hiding unconnected pins here. So now what we're saying here, we're checking if the name is the same on the new slot and the slot. So we're checking if it's the same item and we're also checking if that item is stackable. And if it is, we're going to make a branch. And let's connect it and say yes, it is stackable. Now there is another thing we need to check for. What if we drag this item from the drug slot into the new slot? And the new slot is empty. But the plot is still stackable. The right now we're checking if it has the same name, it will not have the same name. If this slot here is empty and doesn't have an item, we need to check for that as well. So what we're going to do, we're going to take this item quantity from the new slot we are dragging to, and we're saying equal. So if this is equal to zero, meaning there are no items inside of that slot. However, this drug slot item is stackable. So breaking from here and saying and Boolean, if it is zero and the drugs, that item is stackable, then it is actually also stackable. This one can be true and this one can be true. So to do this, we can drag from here and say OR Boolean and then connect this one up here, and then connect this one over here. So now we're saying if this is true or if this is true, then we can go ahead and say that the item is stackable. And here in the false, we're just going to set it to none stackable and we're going to use this a bit later. And then let's create a new function which we will use in the next lesson. So don't worry about it right now. But let's call it update inventory slots. And let's go back to the Event Graph, actually to the UNDRIP here. And let's drag this one, update inventory slots. Let's just connect it with both of them here. And remember here when you drag, so on drag detected that we made earlier, we said the main UI to be visible, the main canvas, we need to remember to set it back to none hit testable as well. They'll go ahead and copy this code, go back to the Andhra, and let's paste it down here. And less connected also connect this one and set this one to be true. Now we also have to remember to change this one to non-hidden festival. And we also have to go back to the main UI, this one here, and go to the graph, go to the UNDRIP. And also here when we drop it on top of the menu I, we need to set it back to non testable. Because this one here and the inventory slot, this one only works if we drop it on top of another inventory slot. This year, we're also changing it back whenever we are finished dropping the item on top of the canvas. So instead of this plaque control Ellis deleted. Let's take the Player Pawn, take the player controller from this play upon. And now we can connect it up here and just push the code like this, connect them, and remember to take this and set it to none hate testable. So now we're changing and changing it back as well. Okay, so now we're finished with the unwrap function. We're simply just checking if the item we are dragging is stackable or not. And this is something we will use in the next lesson when we make this function here. So let's save everything and let's move on to the next lesson. 48. 8.04 Updating the Inventory Slots: Hello and welcome back. So now let's make this one update inventory slots. So over here to begin with, let me drag the new slugs and get dragged slot here. First, we are checking if we are not dragging the item on the same place. So if I click Play and I just drew, take an item here. If I drag it, I only want to run the code. If I'm dragging it down here to this inventory slot, I don't want to run the code if I'm dragging and then dropping it on the same inventory slot. So first we're checking if the new inventory slots slide index is equal to the old one, which means we just dropped it on the same inventory slot. If that is true, we don't want to do anything actually, just for my own reading. I'm going to try it from this and say not and choose this NOT Boolean. So if it is not the same slot index, then we will go ahead and run the code. However, if it's false, if it is the same slot index, we don't want to do anything. Then later, we are then going to ask if the item is stackable or not. Because if it's stackable, we're going to add them together. If they are not stackable, we're just going to switch them between each other. So first let's get down here. Let's say the item is not stackable. What happens? Let's take this one, update, dragged slots and update the new newsletter and drug slide. And let's connect them here and connect them like this. So for the new slot, remember we are taking the item from the driver slot and we're dropping it on top of the new slot. Then new slot item is the Dragged item here from the direct slot. So let's take the get dragged slot. Let's take the item here and drop it, as well as the item quantity. As for the direct slot, we need to put the item from the new slot, the dried sludge. So we're switching between these two. We're taking the drug slot item and putting it in the new slot. And then we need the new slot item and put it in the drafts slot. Now, we have just updated the new slot item. So it's impossible to get this information. Now we can't just take this and do like this, because here we just updated this item. This item here is actually now this item here. So we can't do it like this. What we can do is we can just take this get new slot. And before we do this here, Let's right-click remote to a local variable. A local variable is just a temporary variable. Call this one, new slot item. And we can right-click on this one, promote to local variable and call this one new slot item quantity. Now let's connect them together and connected together with this one as well. And now you can use those variables to add them here. So the new slot item and then new slot item quantity. Alright, so now that is correct. You can actually just play the game and see if that works. So this is if the item is not stackable. So let's click on play. And I'm going to lute this here, this here. And if I just switch these two together, you can see now they are switchable. If I drag them over here, that works as well. Okay, so everything works here and I can also switch them together. That's nice. I can drop it. I can switch those and drop this as well. You can see it works perfectly. Now. However, it doesn't work with the stackable items because we have not done this code. So you can see here the item is stackable. Nothing is happening because we haven't done anything here. So this is working now, let's move up here. So before we do anything for the stackable items, we want to add the quantities together. Because you can imagine if you have four bananas in the first slot and you have five bananas in the second slot, we need to add four plus five because we're dragging the stackable item into the next one. So let's take the drug slot and also the new slot up here. Now I have those and let's take the quantity from the new slot. Let's add it together with the direct slot. And now we have just made this one new slot item quantity. So let me just drag it over here and just set it here, connected up here. And the next thing we need to check for is this new item quantity. Is it greater than the max stack size for this item in the new slot? So let's break here and check if this is greater than the max stack size because we don't want to add the whole thing if it gets greater than the max stack size, Let's drag here and make a Boolean. So let's say first, No, it is not greater than the max stack size. So we're just going to add e.g. for bananas together with five bananas. So this is false. It's not greater than the max stack size. Let's drag the update new item slot, and let's drag the update, dragged slot and connect them together. So for the new slot, again, just like before, the new slot item is just the one from the direct slot because we just dragged it over there. So taking this, plugging it in and ask for the new item quantity, we just added them together here. So you can. Take this and plug it in and create reroute nodes. And we can now for the false connected here, actually, instead of doing this, we can actually just use this one. Let's delete this and let's just take this one here so we can just use this variable we just made That's a bit more clean to use something like this. And now for the update direct slot, now we just added the direct slot item on top of the new slot. So further drags lot, we actually don't have an item anymore. We're just going to let it be like this, the quantity zero and the item will get deleted from the old slot. Okay, so what if the item we are putting on top of the new slot gets more than the Max Stack size for that item. Let's now copy this again and paste it up here. So for the newsletter again, it is just like the item is just the item from the drugs slot and the quantity for the new slot is just the Max Stack size because it cannot get any higher than that. As for the drugs slot here, the dried sludge item is just this one again. So I'm just going to copy this, paste it here. Now, for the new item quantity, we need to subtract this new quantity from the Max Stack size. So let's take the quantity here, say minus the maximum stack size. So let's say e.g. the drug slot was ten and the new slot was four, that will give us 14. However, for the bananas, the Max Stack size is ten, so it's going to say 14 minus ten. That gives us four. Remember we just dragged ten to the new slot. So we have the four that is left into the dried sludge. So we're going to say minus here, and I'm going to create some reroute notes so it is a bit more clear. And let's connect this true up here with this one, and now it should work. So let us compile everything. Let's see if we have any bugs. Let's click on Play. Let me go ahead and loot some of the items. And now I have 10.4. If I drag them a new slot, it actually disappears. So I actually need to see what's happening. Let me get back here and clicking on the updated of the new slot and just checking that this is correct and this looks fine to me. So now if we go back to the Andhra and go back to the update inventory slides, IF function here. And I can see actually the error is here. We need the Max Stack size from the drugged slots. Because we don't need the Max Stack size from the new slot. Because if I drag here, you see the new slide right now has zeros. So Max Stack size is zero because there's no item that is actually the buck. So instead of here, Let's just connect it, connect this one instead, and create reroute notes. So it looks good. Now let's compile and it should work. This was just a small mistake. Let's loot everything again. And now we have the correct Max Stack size. So let's drag it to the next one, and now it works. And if I drag this ten to the four, it should say 10.4. So this should switch between each other just like that. So it works now the stackable items are working. And if I drop it here, I drop this one, I load them. Cfi, lets, let me actually draw this one, will collect this, put it over here, it should fill this slot here first. Then it will put the things that are more here. It will put them in the first slot. Okay, so everything is working now. We are updating everything. I'm going to go ahead and place all the items on the ground and let's test the final product. 49. 8.05 Adding Sound Effects: To make it a bit more interesting before we end this course, let's go ahead and add some sound effects. So in the audio folder, I've included some sound effects. We can of course add more, but let's try those for now. So those sound effects, you can click on the first one and hold Shift click on the last one and right-click. You go ahead and create multiple queues. So we are creating those sound cues. I'm going to rename them. E.g. I. Can rename the first one. Instead of calling a queue over here, I'm going to call it the SC for sound cue, and then the name of the sound effect. Now I have renamed all of them, so just see to begin with for sound cue. And I can play them now, but they are very loud. I think it will be allowed for you. So before I do this, I will open the first one. And now for this up here, for the volume multiplier, you can reduce the sound. This is bottom Hoover. So let me write 0.5 and play the queue. And maybe 0.4 is better. Let's close it down. Let's open the next one button press, let's say 0.4. I think this is fine. Now for the los inventory, Let's try 0.4. That's fine. Again, going for the drop item, maybe 0.5 for this one, this is very silent and the Luddites him 0.50, 0.4. I think it's better. Okay. And the last one, the open inventory. Let's try 0.4 as very loud. 0.3. I think that 0.25, maybe, something like that. Let's save everything now that we have reduced the sound. Now as small trick if you want different sounds. So right now you can see this is what it sounds like. But if you want it to sound a little bit different every time you open, it, can just drag from here and write modulator down here, this one modulator and connected here. So now you have a modulator in between. And you can say the minimum, which is 0.9, and the maximum pitch is 1.1. And if you play it every time you can hear, it's a different sound effect. Every time. It changes slightly in the pitch up and down. So it's up to you, e.g. the lute sounds, the drop item. You can make them slightly different every time you load. So that's fine for now. So let's add the button hover and button to begin with. So let's go to the UI. And first-year for the category. Let's click on it. And here, let's click on the button category. You can go down here and you have depressed sound and the hovered sound. They'll click over here, selecting the button hover and button press for this one, let's compile and save what we can do. We can also add it to the inventory buttons. So clicking on the main UI, if we click this button, we can add the same thing here. Button press the button, hover. Let's compile and save everything. You can try it out. You can try to click Play and see what happens here for the client. If I click busy, now it's working. So it's a bit more interesting than no sound at all. Well, Let's close it down and the next thing we need to add is the close inventory and open inventory that Let's go to the blueprints. And let's try first. We have here and the player, we're opening and closing the inventory. So we can lay it here, or we can play it inside of the player controller. If we go to the player controller and you're free to do whatever you like here, so it's up to you. We can also relate here when you open the widget, the opening inventory, or when we close the widget, close the inventory. So it can either do it here or there. Let me just play it here in the player drag from here, say late sound to D, and also copy paste it down here. So here we are closing the inventory. So clicking here and selecting the lows inventory. And down here we're opening the inventory. So I'm going to select Open inventory and let's include them here in the comment as well. Okay, let's compile and let's click Play and see what happens. So if I click on it to open the inventory, and I click OK to close it again. Okay, now that works as well. The last thing here in the audio we are missing is the drop item and the lute item. For the loads item we are pressing E to loot the ISM and it's going to go through the server and add to inventory. However, we have not loaded yet here. So let's go over to the inventory and let's actually play it here in the loop, complete. When we destroy the item, we have loaded it here. Let's drag from here and say play sound to D. And the thing we want to play is as the alluded one. So it's lewd item. And let's also copy paste it up here. We're also loading up here. Alright, so the final sound we are missing here is the drop item. So for the drop item, if you remember, let's go to the UI and let's go to WB main. Inside of here we have this Andhra function or dropping the item. And we have this one drop item from the inventory and it ends up, if you remember, in the player controller, will respond the same when we drop it. However, if you play it here, remember this event is running through the server. So it never runs through the client. So if you add lay sound to d here, it will not work. The client will not hear it. So let's actually do it inside of WB main here. When we are ready to drop the item, let's go ahead and drop the item. You can even just lay it over here on update the UI. Let's just play it here before we do this final thing. And remember to select the drop item sound cue. And let's compile and click on play. So now when I walk around, I alluded an item. Open the inventory I allude. Okay, Sounds nice. And when I drop the item, you can hear that as well. That's how you add sound effects. This can of course, only be heard by yourself because this is an inventory after all. And we don't want all these sounds to be heard by the other layer as well. So now everything sounds good. And let's move on. 50. 8.06 Testing Out the Final Product: Alright, so now we're ready to test the final product and see if we have any box. So if we click on play here and now it is the server and ask the server, I'm going to allude a weapon and I'm loading it. I'm loading the next one. This is the knife. Everything's working. I can move them around and if I allude again, it will load up here. So that is working correct? Just like that, I'm going to lose a potion and going to press here. And this is three potions on the ground loading this 13 stamina potions load more stamina potions. This was one on the ground. Looking here, it will put more potions. I think the maximum stack size is ten for the potion is actually six for the quotients. And now you can see they are added on top of a new stack. And I can keep this as five, I believe, for the manipulations. So it's going to make a new stack. So everything is working perfect. I'm going to load the bananas. These ones work as you know, we've tested them a lot of times just like that. Perfect. So these are working. I'm going to lose the meat. And you can see the meat. This one is, I think six pieces. And actually not this one. This one is six pieces, so it's going to add 5.1. And that works. 5.1. That is correct. And now you can see this works perfectly. And if I just keep polluting weapons, alright, so everything is working as it's supposed to. I can move them around. If I move pieces that are not stackable, they will not stack. So this foreign five, I can switch them between each other and I can drop them if I want to. Now, as the client, we have to know that we can do the same. So clicking on Play, this is the server. So going back to the client, I'm going to minimize this a bit. Going to the client, pressing on eye to see the inventory. I can look this, this works great. The meats is here in the food. That's great. I'm going to allude all of these things and it's working perfectly as well. Now for the client, if I drop, the server should be able to see them. And I can see this, that decline just dropped. So this one is, if I alluded, it's five potions. So if I drop it here, the items can, the client can see it, and the client can load these five oceans as well. It will be stacked here before it gets stacked over here. Okay, so the last thing, let's test it between two clients because we don't want the server logic, so it should be correct as well. If two clients are laying together, let's say on a dedicated server. So let's go ahead as this first client. Let's loot and let's just drop these five bananas. I can see them as well. And the new client here going to lose them. And these are actually five bananas, Let's say I dropped them here instead. And I can see them on the other clients. So everything is working well for both the client and the server. This was it for the inventory. I hope you've enjoyed the course. It was a lot of fun to make. If you're interested in my other courses, please visit pixel helmet.com. I'll I'll keep releasing courses every month. So go ahead and take a look if you want any help. I can also help you on my website or if you want to join our discord server, that will thank you for being here and I'll see you in the next one.