Drag and drop in Unity UI - create your own inventory UI!
Вставка
- Опубліковано 9 лип 2024
- 🎁 Support me and DOWNLOAD Unity project: www.patreon.com/posts/7169829...
This tutorial/guide will show you how to create a great full featured drag and drop inventory user interface. You will learn how to drag items on the screen, how to drop them into special slots, how to enable snapping back to original position and finally how to manage multiple items at once! Inventory tutorial coming soon!
--------------------------------------------------------------------------------
👨💻 SOCIALS:
💜 Join our Discord: / discord
🔵 Follow me on Twitter: / bionicl333
--------------------------------------------------------------------------------
🎓 YOU WILL LEARN:
- How to create unity ui grid
- How to create inventory UI
- How to implement drag and drop
- How to enable object snapping in inventory
- Simple Drag and drop implementation
--------------------------------------------------------------------------------
⚙️ VIDEO CHAPTERS:
0:00 - Intro
0:13 - Grid
1:54 - Draggable item
4:39 - Draggable item always on top
6:26 - Snapping
7:46 - Drag items between slots
11:16 - Multiple items
Your teaching process is so clear and simple and very logical fold by fold.
Appreciate your hard work. Looking for more videos for you.
For anyone that wants the items to swap slots when dropping on a full slot here is how.
public void OnDrop(PointerEventData eventData)
{
if(transform.childCount == 0)
{
GameObject dropped = eventData.pointerDrag;
DraggableItem draggableItem = dropped.GetComponent();
draggableItem.parentAfterDrag = transform;
}
else
{
GameObject dropped = eventData.pointerDrag;
DraggableItem draggableItem = dropped.GetComponent();
GameObject current = transform.GetChild(0).gameObject;
DraggableItem currentDraggable = current.GetComponent();
currentDraggable.transform.SetParent(draggableItem.parentAfterDrag);
draggableItem.parentAfterDrag = transform;
}
}
Very helpful I hope it gets pinned.
Thank you so much!!!
Very nice! I cleaned it up a bit, this does the exact same:
public void OnDrop(PointerEventData eventData)
{
GameObject dropped = eventData.pointerDrag;
DraggableItem draggableItem = dropped.GetComponent();
if(transform.childCount != 0)
{
GameObject current = transform.GetChild(0).gameObject;
DraggableItem currentDraggable = current.GetComponent();
currentDraggable.transform.SetParent(draggableItem.parentAfterDrag);
}
draggableItem.parentAfterDrag = transform;
}
You earned yourself a new subscriber. I've been following your content for some time, and it seems to me that you're quite knowledgeable in Unity's UI side of things. Keep up the good work 👍👍👍
This was a beautiful Unity UI tutorial series. Hoping to see more!
I love you so much already! You helped me with something that no other tutorial I've found could, and in such a clear and elegant way too! ^^
I subscribed.
This is one of the best tutorials I've ever seen for unity! Great teaching skills here!
Yeahhhh you're back !
Thank you !
M8, you are one of the best! Everything showed, everything explained, nice clean and neat, without speeding and uselest trash talking, keep on going! Fingers crossed for your success!
Thank you very much! Dzięki! 🎉
Agreed with statements above. Everything was so well laid out and explained so well. I appreciate this a ton!
Thanks for this tutorial! I had no idea that Unity had these interfaces built-in. It's pretty cool how relatively easy it is to make a drag & drop system like this!
As always, great tutorial
My guy, you have criminally few subscribers for such amazing content.
Thank you so much for this awesome tutorial. In my game, I had text as a child for my draggable item. I wondered whether raycast target will work or not. But it worked well.
Exceptional tutorial! Really nice graphic design elements!
Holy Shit.. Your explanations, especially the ones with custom animations are so damn good!
Thanks bro :D I understood all of that very well :)
Your movies are just outstanding. Amazing job ;)
Wow that was great. Who knew it was so complicated :)
Amazing tutorial! Happy to subscribe you
Thank you so much, I was watching the full inventory tutorial but the dragging didnt seem to work, watched this tutorial and now everything works PERFECTLY.
On a side note, if anyone wants have more GO's like buttons under their items, dont add the grid layout group and just add an
transform.position = parentAfterDrag.position at the BEGGINING of the onEndDrag method. If you add it in the end it will just offset your item which you do not want.
Just from the first few second I watch your video, I already know your tutorial was extraordinary. Then I got to 04:50 mark. I was wrong, it was more than that! This is the type of tutorial that everyone hoped to see when they need one.
Thank you! I spend a few hours on those animations ;)
Great tutorial!
Best drag and drop tutorial
This is one fantastic tutorial
Excellent tutorial! Instant Subscribe!
awesome animation！easy to understand
Thank you, very you have great tutorials! ;)
Great video super easy to follow.
I love you so much already!
Great video!
great instruction and demonstration i subscribed and liked
Very helpful!!! Thank you!
thank you very much for this amazing vid!
i did it a bit different, but i still learned alot
this is my on drop:
public void OnDrop(PointerEventData eventData) {
var other = eventData.pointerDrag.GetComponent();
other.transform.SetParent(transform.parent);
transform.SetParent(other.lastParent);
other.lastParent = null;
}
it swaps items when you drop one into another.
Just found your channel. Damn those tuts are clean
You are a genius, thank you so much!
Best explanation.. Thank you.
Nice video! :)
Thanks for teaching me this! Just like Sam Hogan’s Cellular Automata-inspired game, i’m making a Level Maker in Unity.
THANK YOU SO MUCH!! I am self-taught and I've been working with Unity and C# part time for the past couple of years! The inventory system is something that I have not found a decent tutorial on that didn't feel like a big pile of spaghetti!! You are SO clear and precise with your explanation of the "drag and drop" portion (which had always given me the most headaches)! I am definitely going now to watch your full inventory tutorial! I appreciate you SO SO much for helping me get over this massive hurdle!!!
INCREDIBLE!
You're goddamn hero! Thanks!
if you're struggling to get this to work on a screen space - camera canvas, try getting the hit.point of a raycast screenpointtoray in the ondrag event to put the item at
amazing, thanks
THANK YOU SO MUCH!!
amazing, thank you.
Ohh this is cool
Nice animations!
THANK YOU!
The cleanest explanation on UA-cam. Thank you so much sensei!
My stupid brain still don’t understand fully why the ray cast matters. As OnDrop should be triggered when a draggable item is released and dropped onto it. It should detect whatever object that’s colliding with it, and not the position under our mouse pointer. Strange.
Hopefully someone from the community could kindly explain the logic behind. Thank you!
Thank you!
Very nice
Thanks! I have a question though. When I implement snapping, the item glitches to where the mouse is and where the inverntory slot is. It does not snap back when the mouse button is released, instead it teleports constantly between item slot and mouse position during dragging. Can you help with that?
Really Simple 👍
Thank you ❤️
Can you please do a video or just explain how to get info of the object stored in the table when you drag n drop it there
And store that info to costume class
Something like inventory so i need to track each item on it thanks
I’m working on the inventory video - it will be out by the end of the month 🎉
I can not seem to understand. When I try to drag an item it disappears and then teleports back to its position when I release. I made sure that our codes are the same and everything else basically. But it just doesn't work...
Probably thats because of the "transform.SetParent(transform.root)" when you begin dragging, your item goes directly to the root of your hierarchy that is not even on canvas. Your item just need another parent inside of the canvas hierarchy.
Instead of this, lets say you can create a new variable with "public Transform goose" and assign with any object on this canvas, then you change the line with "transform.SetParent(goose)". Now it should be working, goose is a very kind parent
If your item is being transferred to some crazy (30000000, 300000) coordinate once you implement the "transform. Position = Input.mousePosition" you might need to get to change it to "cameraNameExample.ScreenToWorldPoint(Input.mousePostition)" but as a new Vector 3 so you can ignore the Z axis.
thank you soooo much bro u saved me
But it's still not wortking
It's probably easier to just use transform.position = eventData.position;
@@jamieschooling7631 It didn't worked
You could also just use the position from the eventData that is passed as a parameter to the OnDrag method :)
quick actions and refactoring in vs code is not showing for me, idk why, can anyone help me?
If I want this to work between two different parent groups (for example, dragging and dropping between your inventory and a chest), how will I go about this?
Thanks
Question: Is possible to make a tetris inventory system (ala escape from tarkov) with this?
How to make Item appear not only over it's parent slot, but during dragging, over every slot?
Can't you just change layer order to solve the "sliding under slot" problem (by adding a canvas component to the object to gain control over the layer sorting)?
Which is not to diminish the value of this video with a nitpick. Much more clear and educational than most tutorials. I've been devouring courses about making inventories, including paid ones, because it's the first thing I've encountered that has given me trouble and felt especially complex for what seems like a simple feature, and this is one of the best videos I've seen on the subject.
you could, but that's not really the problem. the problem is that the slot now contains two items. You don't want that. So either have it be illegal to drop another item, like in the video, or have the items swap places.
Thank you for the detailed comment! Please keep in mind that sometimes I need to take shortcuts or simplify things to make tutorials more accessible for beginners. That being said, I am strongly against adding a classic Unity layer sorting. I really like the Unity UI approach to sort order based on hierarchy (like in Photoshop). Also this approach (of changing parent on the start of the drag) doesn’t sound bad to me - technically when you start dragging item it’s not part of this slot anymore.
Good point. However, you can't move a canvas directly. You'll need to parent the movable object by an object with a canvas. You can then modify the sorting layer of the parent canvas.
@@CocoCode Yeah, when I had time later I tried my solution and it didn't work perfectly in all use cases anyway. Yours seems to work consistently across each UI I've used it in so I don't think I was right to nitpick it in the first place.
Between the help I got from your video with the drag and drop functionality and picking apart some inventory examples from other people to work out the advantages and disadvantages of different data structures and how to design things for my own game I'm happy to say my inventory system is complete and I'm already a week deep in making a complex alchemy system, which is super easy with an inventory system that already works well.
@@jumpkut I was talking specifically about when the item "slides under" the slots when you pick it up, but I went with the latter solution. That part was very simple to program, though. There is probably an even simpler way but my first attempt worked perfectly so I haven't messed with it afterward. I simply cached each item's index in the inventory array as well as each item's parent slot, then assigned item 1's parent transform (slot) and index to item 2 and vice versa.
Edit: And a minute ago I incidentally learned about using tuples to do the same thing, reducing 7 lines of code to 2 lines of code.
the eventsystems engine literaly just dosent work, is there any work around? What do i do???
This is pretty awesome, but what if i want to use merge system , i want to merge two items ?? how to go about that?
how do i apply a filter to a certain slot so it will only accept a certain item?
thanks
I got it working for the most part, I can move all of them, except for the first one, it just snaps back to its original slot for some reason. Rewatched the vid three times, any clues?
Wouldn't be easier to use EventTrigger Component?
My item is going out of the canvas when i am dragging it i did just like in 6:15 but its not working please any solutions for this
Please help me here's my error : argumentnullexception: value cannot be null.
by the way when i'm dragging my object disappears
Hermosa explicación
Hello, first of all, thanks for the great tutorial!
My question is, if i have a draggable Item that has one or more children e.g. a text, the snapping does not seem to work. Do you have a solution for this problem?
Edit: I found it myself: by disabling the target raycast property of the text element.
You saved my life.
You have a video if you want swaping items ??
Which element is Bacground and Box ?
i feel like some time i drop its not snap i feel raycast doesnt work well
How can I implement Drag and Drop with 2D Objects instead of UI Images?
I need help, i can drag the item but it disappears in the game view instantly und never comes back :(
same problem
Same here
@@Wabbel
can you make level lock and unlock pleaaaaaaaaase
Input.mousePos teleport to some weird places like 385101.8 when value is 486
This is a nice quick tutorial, but it's not really great for the Item and the Slot to be so tightly coupled (meaning that the scripts "know" too much about each other). It's better to just make a simple "SetNewParent" method on the DraggableItem, and then simply calling that method from the Slot instead of directly setting it like in this vid. I also recommend doing some kind of error checking, like ensuring that that the dragged item actually HAS the DragItem component, otherwise your game could crash (or throw errors). This is easy to fix with a simple
if(droppedObject != null && droppedObject.GetComponent()) {//code to set new parent here}
you also don't have to set image as public, just give it [SerializeField], this will let you edit it in the unity Editor without having to (needlessly) make it Public (which lets other objects mess with that data)
يا اسطورة
i love ur tutorial but how do we replace the existing item when we drag new item on the slot? like replacing it instead of not able to drop
I changed OnDrop() to this,seems working,hope I haven't messed up XD
public void OnDrop(PointerEventData eventData)
{
Transform parentAfterSwap;
GameObject dropped = eventData.pointerDrag;
DraggableItem draggableItem = dropped.GetComponent();
if (transform.childCount== 0)
{
draggableItem.parentAfterDrag = transform;
}
else
{
parentAfterSwap = draggableItem.parentAfterDrag;
transform.GetChild(0).SetParent(parentAfterSwap);
draggableItem.parentAfterDrag = transform;
}
}
@@WhiteCavalier15 thank you so much!!
you are the lifesaver and the gamechanger :D thanks man, i hope this comment got pinned because it will be using like at least 10 years by some people :D@@WhiteCavalier15
can u please give me a "ivnentoryItem" script ? I cant find the option there
Thank you so much for the tutorial. Can I asked for some help though? I was using your drag and drop, but instead of image, I use textmeshpro - text(ui). On the TextDrag script I changed all the image into TextMeshProUGUI and it gives no error in dragging. The problem is placing it into the slot. It keeps giving this error:
NullReferenceException: Object reference not set to an instance of an object
InventorySlot.OnDrop (UnityEngine.EventSystems.PointerEventData eventData) (at Assets/Script/InventorySlot.cs:14)
in the script, it was this line:
draggableItem.parentAfterDrag = transform;
what do I need to change to make it take the text?
Thanks in advance 🥰
oh nvm, I just called the wrong script in my InventorySlot script 😋
do you have any idea to drag object
The type or namespace name 'DraggableItem' could not be found (are you missing a using directive or an assembly reference?)
Getting this error. IDK why. I'm new to this line of work
Can someone help me? I'm using 2021.3.17f1
Hi Bharat, that specific line of code is referencing a separate "DraggableItem”. Essentially Unity is looking for the script titled “DraggableItem” but is unable to find it. Likely what you have done is named your script something different from what was shown in the video. You can fix this error by writing the name you have given to the script instead of “DraggableItem” since that is likely not a script that exists in your project. For example, I named my first script “Drag” instead of “DraggableItem”, so I needed to change the code to reference the Drag script instead. Hopefully you found this helpful and were able to understand it. If you have further questions feel free to ask and I will try my best to reply.
@@ReaganSSS that makes sense now. Thank you :D
hello, very good video... greetings from argentina... how can i change position articles? (swapping)
When I drag and drop my x / y values of the object go from ~25 instantly to over 5,000 in each value making the image disappear, any suggestions?
This actually happens to me too. I'm not sure why.
This is my code:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
public class InventoryItem : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
public Transform parentAfterDrag;
public void OnBeginDrag(PointerEventData eventData)
{
Debug.Log("Begin");
}
public void OnDrag(PointerEventData eventData)
{
transform.position = Input.mousePosition;
}
public void OnEndDrag(PointerEventData eventData)
{
Debug.Log("EndDrag");
}
}
I've tried debuging the Input.mousePosition and it looks normal but when I actually am dragging the item around the X/Y values are insane (Like 61,222 and similar for the Y)
Any help on this would be awesome. glad Im not the only one
@@EllsDev
@QuailValleyBoyz
If you are still having issues with this, it seems to be a problem with the coordinate system used by the mouse vs the coordinate system of the canvas: the mouse uses the World Coordinate system, while the UI object uses the canvas coordinate system (local). Read the position value of the mouse and compare it to the position value of the item. If hey are different (even if the mouse is hoovering right over said item) then that's the issue.
it happen to me too Really want answer some body help please
🥺
@@chaosroninofmagic1055 If I remember correctly, that issue happened because you are taking (x,y) coordinates from the object in relation to the canvas, and when you drop it, Unity transforms those values to world coordinates. It was something like that.
can you make a second video where you show us how to add stacks for your items? It would awesome if you can show us.
Here you can find a full inventory tutorial (that includes stackable items): ua-cam.com/video/oJAE6CbsQQA/v-deo.html
@@CocoCode thank you so much :D I really needed this
I can't right click to implement interface, there is no option to implement it.Even I use Crtl+. there are no quick solution. What should i do?
Check if you have Miscellenous Files under your Visual Studio project instead of Assembly-CSharp
muy bueno sos un nashe
Hello, thx for the tutorial. But It doesn't seem to work at all on Unity 2020 LTS, I don't know why. I follow every step you did. When I drop an item, it always go back to its original slot. My code is 100% equal to yours, no change at all. Can you figure out what's happening, please?
Did you ever find a solution for this? I'm having the same issue.
Not sure if you were having the same problem as me, but I hadn't added the InventorySlot component/script to the inventory slot prefab to ensure it was on all inventory slots..
@@ryanlsindledecker2510 Yes, mostly. I had to rely solely on OnEndDrag and remove any OnDrop method instead. It's quite dirty and I don't like it, but it "works"...
I feel like click once and it drags until you click again is more intuitive like in Minecraft. Pure drag and drop has fewer use cases. Anyway I learned enough to behave like that so thanks
you could use internal instead of [HideInInspector] public
how to make items dropp out of your inventory when you let them out of your inventory border ?
when you drop with the mouse use a raycaste to hit the terrain and pass that position to a function that will instantiate the item prefab, will need some tweaks
I loved the tutorial, but how could I make items swap slots by placing one on top of the other? I have no idea I really need help.
if (transform.childCount == 1)
{
child = this.gameObject.transform.GetChild(0);
DraggableItem draggableItem = eventData.pointerDrag.GetComponent();
child.SetParent(draggableItem.parentAfterDrag);
draggableItem.parentAfterDrag = transform;
}
Look the inventory tutorial
dis bcs grid component in item
Please do make video on how to implement this with new input system and how to do it with keyboard and game pad! Thank you!
throw in a start function or Awake, I used awake, Call in - using UnityEngine.InputSystem - then declare your input, findobject of type, boom straight then from there *input declared name* . input
new input, make sure it's a pass through and vector 2
I have done the swap items logic. In case anyone is interested.
public void OnDrop(PointerEventData eventData)
{
if(transform.childCount == 0)
{
Debug.Log("DROPPED");
GameObject dropped = eventData.pointerDrag;
DraggableItem draggableItem = dropped.GetComponent();
draggableItem.parentAfterDrag = transform;
}
else //swap items
{
Debug.Log("Swap items)");
GameObject dropped = eventData.pointerDrag;
DraggableItem draggableItem = dropped.GetComponent();
Transform originalParent = draggableItem.parentAfterDrag;
// Swap
Transform itemInSlot = transform.GetChild(0);
draggableItem.parentAfterDrag = transform;
itemInSlot.SetParent(originalParent);
dropped.transform.SetParent(transform);
itemInSlot.SetAsLastSibling();
}
}
will it work for Input.touch?
Exactly the same implementation as in the video should work with the finger (instead of mouse) on mobile devices 👍
Am I wrong or you are using 'image' without assigning it?
Why you have no errors??
You proobably forgot to assign it on the editor