Unity Minecraft Inventory System: Drag and Drop Implementation

The inventory system in Unity enables drag-and-drop item management for a Minecraft-like game.

### Implementing Drag and Drop in Unity's Inventory System
* 🎮 In this episode, we continue building our inventory system in Unity, focusing on **implementing drag and drop functionality** for item management.
* 🛠 Before diving into this part, it's essential to have watched the **first episode**, as it lays the groundwork for understanding the **current implementation**.
* 📜 We begin by setting up a script for handling drag and drop, initializing private variables for **cursor slots** and **item slots**, while ensuring they are **correctly referenced in the inspector**.
* 🖱 The script checks if the user is currently interacting with the UI, only allowing interactions when the **cursor is in the UI**, and establishes the necessary **pointer event data for mouse clicks**.
* 🔍 We create a function to identify which UI item slot is clicked based on the mouse position, filtering through the results to find **relevant item slots**.
* 🔄 The drag and drop functionality includes multiple scenarios, such as **picking up an item**, placing it in an **empty slot**, **swapping items between slots**, and handling **different item types**.
* 📦 We also introduce a **creative inventory panel**, allowing users to access various block types without removing them from the inventory, ensuring the system remains **user-friendly**.
* 💬 As we wrap up, viewers are encouraged to suggest topics for future videos, emphasizing the **importance of community feedback** in shaping content direction.

[Music] you hello and welcome to another episode of how to code again like Minecraft in Unity. In this one, we're gonna be doing part two of our inventory system. So, if you haven't watched the first part, you will need to see that part before doing this part because none of this is gonna make any sense without that part. Which I had it split into because it was just running a bit long. After editing the video, it ended up actually being more like half an hour recording-wise. It was over an hour, which is why I split it in two. But there was a lot of stuff that I didn't need to keep in the video. It was me rumbling and things like that. So, where we got to was we switched out our toolbar for a working inventory sort of management system where if we place a block down, they actually subtract the amount from our inventory, from our item slot. So, in this episode, we're going to actually implement drag and drop handling, and we're gonna get straight into it by adding a drag and drop handle the script.

let's go into our script. So, the first thing we need is we're gonna call a serial ice-filled because we don't want. We don't need it to be public private UI item slot, which is the class, one of the classes that we made in the last video. And we're just gonna call this cursor slot. I'm gonna set it equal null because when you set something to serialize filled in private, if you don't give it a value at any point or you don't initialize it, you'll get a warning in the inspector saying that this object is null and will always be null because the code, the actual compiler or whatever is reading the code, doesn't realize that we've set whatever we want this to be in the inspector. If it was public, it would assume that we're going to set it in the inspector, but because it's private, it doesn't know. And then we want a private item slot, and this is gonna be called cursor alright and slot. And this one we are initializing in the code, so we don't need to worry about saying

there's no and then some values that will make a bit more sense if you've seen the drag and drop handle or a tutorial I did that I mentioned in the last video. But we need these for our actual clicking and things. We need a reference to a graphics or a caster, which in order to use our ups are going to need the event system, and also we're going to need a UI system in this. And again, set out to know, and I'll last, I'm pretty sure our last one is the actual event system itself. So in our start, I want to do in here is initialize our cursor item slot. And we're going to initialize it using just the you item slot, because we also have the option to initialize it with items in it, but we don't gonna have any items in it. I will explain what this slot is doing shortly. I'll tell a lie, we are going to need one other reference near a reference to our world, because we need to know if we're in the UI or not, which we cannot tell from in here.

presently, but we do have a bull in the world to tell us whether we are currently in a UI or not. So, let's go, Dave function. The first thing we want to do is if world dot sorry if not world dot in UI return. So basically, nothing is gonna happen in the update loop for this function for this script unless we are in the UI because it's just gonna get to this point, check, see that we're not there in the UI and return out and let the rest of the game get on with things. And the next thing we're gonna do is if import dot get mouse button down zero, which is the left mouse button, the standard clicking mouse button. And then in here, we're gonna be doing some, well, we're gonna be calling a function to do some stuff. But before we get to that, we're gonna create another function. And this one is actually going to be a UI item slot. I'm gonna call it check for slot. So in here, we need to assign our pointer event data. We're going to equal a new pointer event data.

using our event system, which apparently I misspelled. Yes, I did. And then we say a position about pointer event data to the mouse position, which we will get by using import dot Mouse position. Nice and simple. The next thing we need to do is we create a list of type raycast result, which we're just gonna call. Don't forget to close your brackets, everybody. But you're just gonna call results. And then we're going to cast our array using our point date pointer event data. And we're gonna pass in the list we just created. And what that's going to do is it's going to cast array at the mouse position, wherever the mouse position is on the screen. And it's gonna return a list containing all of the UI elements that are under the mouse of that position. If there is, for example, we've got our inventory slot. Our inventory slot has an icon in it. And both the inventor slot and the icon over the top of a window, for example, like the toolbar window or the inventory window or

whatever. It's gonna return all of those objects in this list. So, for that reason, we need to ensure that we are only looking at items that we're interested in. So, we'll loop through all of the raycast results, and then in here, if result.gameObject.tag is equal to UI item slot, we want to return result.gameObject.GetComponent<UI item slots>(). However, if we get through all this and we get to the end of this foreach, and we're still going, remembering in mind that once we find an item slot in all the things that we've clicked on, we return. If we haven't returned and we get to here, that means that wherever we've clicked doesn't have a UI item slot or an object tag to do item slot there, in which case we're going to return null. And just before we forget, let's go over to our prefabs, find our item slot, open up that prefab, and we're gonna have to create a new tag UI item slot and apply that to our

object now we're only interested. We don't want it to apply to the icon and the text. There anything else that you put in here. We're only interested in the item slot because we only want the one that has actually got the UI item slot script on it, and these don't. I'm not sure why I didn't get it now. Our fellow show it used to ask you if you wanted to apply tags to all of child objects on the one that you're applying it to. It didn't do it that time, and I'm not sure why. But if he does ask you that, don't you only want it on the top parent item slot, the one that has the UI item slot script on it? We'll just do a quick look in here just to make sure it has actually updated. Yeah, as you can see, all of these are now UI item slots. So we'll go back into here. What we're gonna do just to make sure everything's working is here. We're gonna do if check for slot does not equal not debug log.

there is actually there is some what we're gonna need to do first somewhere in not I'm telling show where we put it as this has been a long series and some of it was a long time ago somewhere we turn the mouse off there we go cursor lock state assault mode we need to undo this whenever we enter and leave UI mode so because we the way we set up our in UI ball in worlds we can just copy that go find in UI bill which is here and then say if in UI so if we are in UI set that to none else set it to locked and then if we go into unity where I've got a couple of other little things left to do before we can actually test out the clicking so if we just we need to put a drag and drop handle scripts somewhere so I'm just gonna put it on canvas doesn't really matter I guess you can arrange it however you want I'm just gonna put it there freeze and we need to set these values so our graphics rate Custer is right here.

drag that down there. Our event system is here, so we just drag that in there. Now we need a cursor slot, so this one is a bit different. We'll drag in a prefab, and we want it to be at the bottom of the hierarchy within the canvas, obviously. We'll call this one cursor slot. We want to take away, we want to untag this one because this one doesn't count as far as clicking goes. We don't want to register this one as something we've clicked on because this, as you will see, is going to be the thing doing the clicking essentially. So once we've done that, what else do we need to do? We want to get rid of this image script because we don't want a background image floating around everywhere. And also, we need to up the scale of these because these are all scaled up. You would come up with a better way of handling the scaling of the UI system if you were using all this properly, but we're only just going through the basics. So if we go back to

here and we drag in our cursor slot, and it's just, we'll turn off maximize on play so we can see the console. Let's just give this a quick spin, see if what happens. So nothing happens at first because it's set to not doing a thing unless we're in the UI. So let's go into the UI so we can click, and nothing's happening. But if I click here, I can see item slot clicked, and that's if I don't collapse them. You'll see there, it's registered, and every time I click on an item slot. However, if I click over here, it's not. So that's great. That's exactly what we want. So now that we know that the clicking and everything is working, let's start handling what happens when we click. So we need an or function, which we are going to call. We'll just call it handle slot click. We'll just call it an unhandled slot click. It's just gonna be a void. It's going to take in a UI item slot, which we're going to call click.

slot. So, the first thing we're gonna do is if click slot is equal to null, return. And what this allows us to do is it means that we can call it here, and we can just pass in, without any sort of checks, we can just pass in the result of dysfunction. So, we say handle slot click, check for slot, and then basically, if this does return null like that, and this function will just return back out. So, we don't need to worry about checking that it's not null before calling this function. This function will handle out by itself. And now basically, what we want to do is check everything, every, we need to cover every potential outcome of clicking on a you item slot. So, the first and most obvious one is if not cursor slot dot has item and not clicked slot has item, return. Because basically, what we're saying there is the slot that we have clicked has nothing in it, and we are not currently holding anything, so we don't need to do anything. So, let's go on to the next potential outcome if not cursor slot dot has item.

put our clicked slot does have an item. Then we actually have to do something. What we're going to do is first we're going to go into our UI item. So yes, our UI item slot. So this is gonna be public. I'm gonna, it's gonna be off type item stack. And we're just gonna call it take all. We're gonna create an item stack, which we're gonna call handover. And it's gonna equal a new item stack. And then we're gonna get this stack ID and stuck amount from stack in this item slot. Then we're gonna empty the slot. And then we're going to return hand over. And then if we go back to drag-and-drop handler, what we can do in here is say cursor item slot dot stack equals clicked slot item slot dot take off. I will just quickly test that to make sure it works because there is something else we need to do, but it'll be more of your saying show you it working or press I to call enter our inventory. If I click this now, you can

see it's taking it out, but we can't see it anywhere, and the reason for that is we haven't set our cursor slot properly. So, right now, it's here, but it's not working right. So, firstly, let's just go in here, say that to numb because we've removed that, and then we want to go to our update function. And when I say cursor slot, slot transform position equals input dot Mouse position. So, if we just let's just zoom this out a little bit. So, this is our cursor item slot. If we press play now, it should move with the mouse. There we go, it's moving around as the mouse moves. However, it's not updating. So, just let me have a quick look and figure out why that is. All right, it's not updating because we're not updating the slot. So, cursor, yeah, what do we want to do? Cursor slot, that's what I called it. Cursor slot dot update slot. So, now if we press play when we go into our inventory system, and I click this, you can see that we have picked up the actual item now. We

can't do anything else 'cause we've only coded two eventualities. One is for them both being empty, and one is for the cursor being empty and the inventory not. So, let's just code some more. We go back to here, so our next potential, once we've done that, by the way, we don't return, we don't need to do anything else. So, if it's the other one, that's just copy this line. If it's the other way around, if I, let's just copy the whole lot. So, if it's the other way around, we're basically doing the exact same thing, as you may have guessed it, the other way around. So, this wants to be cursor item slot, and this wants to be click slot, and then this wants to be that item slot. Excellent. Oh, sorry, that wants to be clicks lot dot item slot, and this one doesn't want to be item slot, and then this one wants to be clicked or clicks lot, I think, yeah. So, now, at the very least, we should be able to pick items up and put them down into

empty slots, so let's just test that. Pick it up, put it down. There we go. Now, obviously, if I try and put this in a slot, Lord, it has something in it. Nothing's gonna happen. And the reason for that is because we haven't coded what happens if all slots have an item in them. So, let's get to that one. And this one is gonna be the trickier of the potential outcomes. So, if both of them have an item, we need to do a series of subjects under this check. So, the easiest check is both items are different. So, if gose a slot dot item slot stock ID does not equal clicks lot dot item slot dot stack dot ID. So, if they're currently carrying two different items, then what we want to do is we want to swap them, basically. So, we'll get our cursor slot and remember, take all empties, the cursor slot, and there you know, actually, what we're gonna do before we carry ons, so we don't have to keep doing this, is we're gonna do an opposite of the take all.

function which is gonna be public void insert stock. We'll call it. It takes in an item of stock and then all we're gonna do is stock equals stack UI item slot update slot. So now instead instead of yeah instead of doing this we're just gonna say first I to cursor item slot dot insert stack and then we pass this in and then we no longer need to do this and then exactly the same for here clicked item slot dot in stock item slot dot insert stack. So now when we insert the stack into this one it's updating its own UI elements and when we take it out of this one it's also updating as you are on UI elements which is gonna make life down here a little bit easier. So we create another item stack old slot. We'll just call it and this is gonna be clipped slot dot item slot take all. And so remember using the take-off command will empty these slots. So now that these slots are empty we can go ahead and swap them over. So clicks lot dot item slot

dot insert stack, and we're gonna pass in the old cursor slot stack, and then curse the slot dot item slot dot insert stack, and we pass in the old slot. So let's run that again so I can pick them up like before and put them down like before, and everything updates. Now, if I click on one that has an item in it, it swaps them over. Great. So there is one other eventually that you probably want to account for. I'm not gonna go over in this because it's not complicated. I'm sure you guys can figure it out. It's not complicated to do. It's just a bit tedious. And that is if you're clicking two slots. If you're holding, say, 32 Sun blocks, and you're clicking on an inventory slot that has 12 Sun blocks, in that situation, you wouldn't want to swap them over. You want them to combine them. You want to add them together. But where it comes in tricky is you will have to take into account stack sizes and how many you want to take from one of the other and

all that kind of thing. Like I say, it's not complicated. It's easy enough to figure out. It's just tedious, and I'm trying to keep these videos to the important part. But you would want to go into your world, find block types, and in here, you would want to add like a public int stack size. And then you would say, This is them, like putting the amount that is the maximum that that block can be stacked. And then you would run your checks in here to make sure that you are never putting more than that amount in a UI item slot. And remember, these UI item slots are gonna be used in any inventory. If you build a crafting table, anything like that. So these checks will be run on the slots themselves. It's not some other code somewhere else in the game that checks on this. The actual slots who are doing the checking. So like I said, I'm not gonna cover it in this, but not because I don't think it's important enough, just because it's long and tedious and like

like this speech, and I don't think you guys need me to go over it for you because it's not complicated. It's just basic maths and just adding and subtracting. But what we do want to do is we want a creative menu inventory window. So let's just quickly make that before we finish up. So we're going here, and we're gonna create a panel into our canvas, and we're gonna create a panel. We'll call our panel creative inventory. And then if we go up to, we just double-check what my toolbar width is. Toolbar width is 218. So I want this to be the same width. So let's center it, make it to OS. It's scaled up, isn't it? - Yeah, there we go. Height-wise, let's just make it. Yeah, that was good enough. We'll do the same thing we did with the image. So if we're just copy component there and paste component values, it gives us the same background as our toolbar. And then inside our panel, what we're gonna do is we're gonna add a

component, and we're looking for a grid layout group. So, a cell size wants to be 24 by 24. We're gonna start it upper left star axis horizontal. Looks fine. So, what this is gonna do is if I drag an item slot into here, into here, and then I duplicate them, as you can see, it arranges them correctly. We've got our width a little bit here. Is that because there is a margin? Let's just make that to 16. There we go, right? So, bearing that in mind, let's create one last script for this video, creative in inventory. And this is essentially all just gonna be start only. We're gonna need to take in a public game object slot prefab. So, we're gonna say, Oh, sorry, we do need a world reference as well. So, once again, world equals game object defined world. Get parliament world. I'm gonna say, For each, nope, let's do regular for int I equals one. This is what these are gonna be, is the block ID index. So, again, we're starting at one because we're not

including the air block, which is block 0, but I int I equals 1 is less than world dot block types dot length I plus plus, and then we're gonna instantiate a new slot game object. New slot equals instantiate, and we're gonna use our slot prefab, and we don't need to give it any positional data or anything like that because that's gonna be handled by the grid layout, but really we do need to make sure it's a child of this object for all the grid positioning to take hold. So we can do that quite easily by passing it in here, so it will automatically instantiate as a child of this object. Let's just drag, before we forget, we'll just drag our script into place, and we want to drag our prefab across. Okay, so the next thing we need to do is we're gonna create an item stack. It's gonna equal a new item stack, and we're just gonna cast our index as a byte. The amount doesn't matter, so just say it's 64 for now. So now we have our

item stack. We actually need somewhere to put it, so let's just create a quick list. List item slots. Slots. This really is just some way to store a. Doesn't actually matter whether you. You don't need. We're not gonna need to access this at all, but we do need somewhere to put these slots. So this is gonna equal a new list item slot. And then for each one of these, we're gonna create a new item slot. So item slot slot equals new item slot. And then we're gonna pass in a UI item slot, which is going to be new slot.getcomponent(UI item slot). And then the stack, we're just going to pass in that stack that we've just created. I think if we run that, we should find we have our creative blocks. There we go, we have all of our creative blocks. We can pick them up like normal, right? The reason that that's gone behind the window there is because the creative. So if you didn't already know this, the lower down in the hierarchy, the further up it shows. So everything is currently

behind the creative menu as far as that concern, so we always want our key us a slot to be the bottom-most item in our canvas hierarchy. So, if I just run that again, now it's on top of it. And of course, we can swap these around. So, that's what I mean about the inventory slot working independent of whatever container it's in. However, the problem we've got the minute is that creative menu. We don't want to actually remove the item from it. So, we're just gonna add a couple of things in it. So, the first thing we're gonna add is in item slots. Where are we? Item slot public Bull is creative. And then in our drag-and-drop handler, we're just gonna do a check at the top here. Again, it doesn't matter if it's null, so we let that return. It doesn't matter if neither items have anything in them, so we'll let that return. If clicks slot dot item slots dot is creative, so cursor item slot dot empty slot, we're just gonna throw away.

whatever's in there, and then we're just gonna take the stack, but we're not gonna take the stack this time, if that makes sense. Insert start click slot up by some slot dot stack, and then back in our creative inventory. We're just gonna say slot dot it's creative equals true. So now, if we go in here, we should be able, as you see, we're taking 64 dirt out of there, and we're leaving 60 further, same with that, and it just gets rid of whatever we put there. So I should be able to see we haven't coded anything to what for what to do if both items are the same, but like I say, I'm just gonna leave that to you guys because it's just more tedious coding on what he's all a long two-part video. But yeah, if we click these, we can pick up a full stack, and then we can put it down here, and then we can come out of the inventory and use them, but the blocks are a bit messed up with the icons because I've

got leaves in there, but I haven't got an icon for leaves. But again, that's another thing. It's not a big deal to fix. So, the last thing we want to do is when we go in and out of our UI. We don't want to be looking at the creative mode, and we also don't want to be looking at the cursor. So, we're if we just find in UI. So, in here, we're going to put the. We're going to turn everything on and off as we need it. So, the first thing we're going to want to do is we're going to want to bring in a reference for our what your shoes public is fine public game object creative inventory window and public game object. We'll just call it cursor slot. And then when we go to our UI script, we're just gonna say so if we are in the UI creative industry window dot set active true. And then if we're not in the UI false. And then exactly the same thing for cursor slot dot set active true. And then set active

false. So, we'll go back into Unity, drag those references in, create a slot, create an inventory, and then disable those because, again, we don't want them visible to start with. Now, if you press play, there we go. When you enable your inventory, of course, you've got the... you could code whether you want the cursor slot that the mouse is attached to to drop its item when it is... when you exit out like that, right now it's not gonna... it's still gonna star it. You'd have to tell it to specifically drop it, but in order to do that, you would want to store the last place that this sand was before I... like before I picked it up because when I press that, if you just drop it, it's gone. So, obviously, players would be a bit unhappy if they picked up a stack of something that they'd spent their time harvesting and then closed the inventory without putting it back in another slot and then lost it forever. So, you'd want to store the last place that the sand was and then put it back there, but again.

this is the same as the picking up items of the same type thing. It's just tedious coding that's not really worth covering in the video because you guys are definitely smart enough to handle up. So, that's gonna be it for the video. I hope you enjoyed it. Once again, let me know what the thing you want me to cover most in the next Minecraft video is. I'm not sure when that video will be because I have a couple of videos I want to get done before that, but like I say, let me know in the comments what you'd like to see, where you'd like the next Minecraft video to be to cover, and that's it for now. Bye-bye.

Make Minecraft in Unity 3D Tutorial - 14 - Inventory Part 2

Game related content!!!!11one

On this channel you will find mostly beginner-to-intermediate level tutorials for working with Unity 3D, typically using C#, with something different (but always video game or game-dev related) occasionally sneaking in. This channel is family friendly in language and themes, however the occasional low-poly bunny rabbit may get squashed in the pursuit of game dev shenanigans.

You have been warned.

b3agz

Implementing Drag and Drop in the Inventory System

The video is a continuation of the inventory system tutorial in Unity, focusing on drag and drop handling.

The script includes a private UI item slot for the cursor and initializes it in the start function.

The update loop checks if the player is in the UI and handles left mouse button clicks to manage item slots.

Implementing Mouse Event Handling for UI Elements

The process involves using pointer event data to get the mouse position and casting a ray to retrieve UI elements under the cursor.

A list of raycast results is created, and a loop is used to find the UI item slot, returning its component if found.

The item slot's prefab is tagged appropriately, and the mouse cursor's lock state is managed based on UI interaction.

A cursor slot is added to the canvas hierarchy and untagged to prevent it from registering clicks.

The image script is removed, and the scale of the UI elements is adjusted.

The clicking functionality is implemented, with the cursor slot handling item transfers between itself and the clicked item slot.

Implementing an Inventory System with Item Pickup and Slot Management

The cursor slot's position is updated to follow the mouse movement, allowing for item pickup in the inventory system.

The code is modified to handle both empty and filled slots, enabling items to be picked up and placed down.

The next step is to code the scenario where both slots have items, with the goal of swapping them if they carry different items.

The function `insertStock` updates the UI elements of stock item slots when an item is inserted or taken out.

It swaps the items between two slots and empties them using the `takeAll` command.

The video suggests adding a `stackSize` variable to block types for managing maximum item stacks, and recommends running checks in the UI item slots to ensure they don't exceed the maximum stack size.

A panel for the creative inventory is being set up in the canvas, matching the toolbar's width.

A grid layout group is added to the panel to arrange item slots, with a cell size of 24x24.

A script is created to instantiate the item slots based on the world’s block types, ensuring they are positioned correctly within the grid layout.

Creating an Item Slot System for a Creative Menu

An item slot system is being implemented to store and manage creative blocks in a game.

Each item slot is created using a new list and is assigned a UI item slot component.

The system allows for picking up and swapping blocks, while also ensuring that the creative menu does not remove items from the inventory.

The speaker is working on a UI for a creative mode, focusing on managing visibility for the inventory window and cursor slot.

They plan to store the last position of an item before it's picked up, to prevent players from losing it when exiting the inventory.

The video concludes with a request for viewer feedback on future Minecraft video topics.