Drag and drop in Unity UI - create your own inventory UI!

hey in this video we'll build a full featured drag and drop system with inventory like grid multiple items and object snapping let's go as you can see we already have a place for our items right here in hierarchy I will right click and select UI image to create a new shape that we'll be able to use as our grid let's make it a bit bigger and reduce its transparency we'll call it agreed now let's create an inventory slot right click on the grid and select once more UI image I'll call it inventory slot resize it to 240 by 240 and change the picture to make it look a bit better because we'll be using this game object multiple times in our project it is a good idea to create a prefab out of it simply drag it from the hierarchy into the prefabs folder in assets that way we'll be able to create multiple instances of it that will share the same properties but as you can see we already have an issue with spacing those slots if you watched my grid tutorial you know what to do click on the grid parent and add a new component called grid layout Group Change cell size to 240 by 240 and set spacing to 32 by 32. of course you can modify those values however you'd like now each time I add a new grid object it will be automatically spaced in the nice grid reminder that in this video we'll only create a drag and drop logic if you're interested in the full inventory creation tutorial be sure to subscribe to not miss out now time to create draggable items right click on any of the inventory slots and select UI image to create a new object inside of it I will call it item let's set its graphic and change Dimensions to 180 by 180. great time to create a new script click add component and type draggable item press return wait a few seconds and open newly created script so Unity has a great built-in event system that allows you to implement Mouse dragging very easily let's import it here at the top type using Unity engine dot Event Systems what event systems allow us to do is to implement a very interesting interfaces related to player actions for example if I would now type a coma after monobehavior and start typing I pointer you can see eye pointer click or eye pointer move that would allow us to trigger custom methods when a player clicks on an object or moves the mouse over it in our case we'll be using three interfaces related to dragging objects I begin drug Handler I drag Handler and I and drag Handler now right click on each one of those separately and select Implement interface in quick action exactly the same way as you know start and update methods are being used by unity to perform custom Logic the same way those three methods will be triggered when the player starts the track when the player is dragging and finally when the player releases the mouse to test it out let's replace those throw exceptions with debug.log begin drag dragging and and drag after those changes set the script now you can see that when I start dragging the object there is a console log being in drag during Mouse movement there is dragging and when I release the mouse button we have an end drag message let's turn those messages into some powerful Logic the first step will be to move our item with the mouse while dragging to do that in on drug method type transform dot position equals input that Mouse position after that change the item Position will be copied from the current Mouse position while dragging already looks great but now we have an issue notice that when I start to drag our item below other slots it gets lost under it that is because in ety hierarchy objects placed last are at the very top of the scene so having the first slot as a parent places our item below almost everything a solution to this problem will be to unlink the item from the slot while dragging and place it at the very bottom of the hierarchy that way it will always be on the top of every other object in the scene to do that go back to our draggable item script and firstly let's define a new variable transform parent after drag we'll use this variable to save what was the original Parent of the object and then assign the parent once more after the finished drag in on begin drag type parent after drug equals transform dot parent and in on end drag type transform dot set parent after drug finally also in the on begin drag we need to set canvas as the parent of our object during the drag so transform dot set parent and passing transform that root which points to the canvas wherever we are in the hierarchy transform dot set as last sibling to place it at the very top of our view let's save the script and test out our game now you can see that during the drag process the item object is placed above everything on the screen the only issue we are having right now is that when I release the item it doesn't go back to the original place in the slot that's actually pretty easy to fix notice that currently item is not really tied to the center of the inventory slot and we can freely move it in the editor to avoid that we can add to the inventory slot another grid component group that way we'll create a one item grid inside every inventory slot change its cell size to 180 by 180 the same as the item object and change child alignment to Middle Center that way item object will always be in the middle before we'll test it out remember to update our prefab so that this grid layout group will be added to every other inventory slot here at the top click overrides and apply grid layout group now every inventory slot has this grid press play and look at that perfect snapping action after Mouse release if you got lost at any point you can support me on patreon and get source files for all of my Unity tutorials Link in the description now time for the part you all been waiting for dragging items between slots actually that will be a matter of only a few lines of code on our inventory slot let's create a new script called simply inventory slot open it just as we did with items let's use unityengine.event systems and this time Implement I drop Handler interface as the name suggests this method will be triggered when something will be dropped on this object to get that dropped object in our case an item let's type game object dropped equals event data dot pointer drag now what we can do is to modify parent after drug verbal of the draggable item that way here in the on and drag method item will be assigned to the new parent firstly we need to make this variable public and also to avoid displaying it in the unity editor we can add height in inspector attribute now back to the inventory slot let's get draggable item script from the dropped game object type draggable item called dragable item equals dropped dot get component draggable item and finally draggable item dot parent after drug equals transform perfect let's save everything make sure to apply added script to the prefab and play the game I will now click on our item move it above the other inventory slot and nothing it snaps right back but why is it like that that's because when the mouse pointer is released game checks what is directly under the mouse it turns out that under the mouse we have our item we can't drop item into the item so the game just reverts back to the original Parent the solution to this is to hide this object from any of the mouse inputs during the drag process so that when the mouse pointer will be released it will ignore the item and will do all the checks with the inventory slot as intended you you may have noticed that many of the UI elements have this right cast Target checkbox when it is checked we can interact with the object but when it's disabled for the mouse this object basically does not exist let's use it in our script at the top of the draggable item script I will create a new variable public image image to make that work we'll also need to use the intention.ui and then here in the on begin drag let's type image dot raycast Target equals false and in on end drag image dot raycast Target equals true so that interaction with the item will be again possible after it will be placed in the slot save go back to Unity assign image to the script and press play now finally our drag and drop works perfectly between multiple slots now at the very end let's create a prefab out of our item and duplicate it into a few different slots perfect now I have this beautiful inventory screen with multiple items when I press play you can see how all of them work with each other and I can track items between multiple slots but there is one thing that we haven't predicted what would happen if I would drag two items into the same slot any ideas Let's test it out because there is a grid inside each inventory slot those items simply got stacked one under the other fortunately we can pretty easily fix that in inventory slot script let's create a new if statement that will check if there are any children in this slot type if transform dot childcount double equals zero and then execute all the logic we created before now when we start our game you can see that adding two items into the same slot is no longer possible if you'd like to continue your Unity Adventure be sure to check these other tutorials as always thanks a lot to my awesome patrons that support this channel see you soon

Channel: Coco Code

Views: 78,237

Keywords: unity3d, unity ui, drag and drop, drag, drop, inventory, coco code, bionicl, coco code tutorial, tutorial, Minecraft inventory

Id: kWRyZ3hb1Vc

Length: 12min 46sec (766 seconds)

Published: Thu Sep 08 2022