Simple Drag Drop (Unity Tutorial for Beginners)
ฝัง
- เผยแพร่เมื่อ 14 พ.ย. 2019
- ✅ Get the Project files and Utilities at unitycodemonkey.com/video.php...
Let's make a very simple Drag and Drop in Unity, great for an Inventory System.
Simple Inventory System in Unity (Store, Use, Stack and Drop Items)
• Simple Inventory Syste...
If you have any questions post them in the comments and I'll do my best to answer them.
🔔 Subscribe for more Unity Tutorials / @codemonkeyunity
See you next time!
🤖 Join the Community Discord / discord
📦 Grab the game bundle at unitycodemonkey.com/gameBundl...
📝 Get the Code Monkey Utilities at unitycodemonkey.com/utils.php
#unitytutorial #unity3d #unity2d
--------------------------------------------------------------------
Hello and welcome, I am your Code Monkey and here you will learn everything about Game Development in Unity 2D using C#.
I've been developing games for several years with 7 published games on Steam and now I'm sharing my knowledge to help you on your own game development journey.
You can see my games at www.endlessloopstudios.com
--------------------------------------------------------------------
- Website: unitycodemonkey.com/
- Twitter: / unitycodemonkey
- Facebook: / unitycodemonkey
![[LIVE] : ONE ลุมพินี 69 | คู่เอก "กุหลาบดำ vs นาบิล"](http://i.ytimg.com/vi/PNM6U8e_HMo/mqdefault.jpg)
Here's a really simple video on something that is extremely useful! Inventories, Skill Bars, etc.
Play 7 Awesome Games (Action, Strategy, Management) and Help Support the Channel!
Get the Game Bundle 67% off unitycodemonkey.com/gameBundle.php
@CodeMonkey, hey! Thanks for this! Can you help? eventData.pointerDrag.GetComponent().anchoredPosition = GetComponent().anchoredPosition; dont work in Grid Layot Group. How fix it?
That's great , I would like to know how to allow a dragged object to remain locked once it is on its correct position so that one cannot be allowed to move it again.
@@lexmakes Try to use eventData.pointerDrag.GetComponent().position = GetComponent().position; work for me
better you use transform.position = Input.mousePosition;
then you don't need to worry about canvas scaling etc.
@@DjagoMorshosties Thank you, saved some of my hair from being rippedout.
This 10 minute video saved me probably three hours worth of effort, thank you very much.
The events explained by you are just fascinating, this guided me a lot and helped me make a custom inventory for my game!
So simple and nice! After 10 hours spent for my experiments with drag and drop you show me how to do this with a few lines of code... Thank you!
Thank you so much for making this video. I've been going crazy for an hour trying to get OnDrop events to trigger by messing with Override Sort Order, but what I really needed to do was add a CanvasGroup and blockRaycasts as per your video. THANK YOU!
Using those interfaces is really neat! Thanks a ton for this amazing tutorial 👏🏻 To implement a whole drag n drop inventory is a hell of a project but it so much worth it once it is up and running. 😎
Your videos are always on point, best topics 👌
If anyone is finding this video (because CM is amazing and you should be finding them) and trying to do this with the new Input system. Go to your camera and add a Physics Raycaster OR Physics 2D raycaster to your camera first. Then the events they are showing you will work. (If not using UI, I believe you may need to add a collider to the object)
Hope this helps someone!
Thanks ! I almost gave up this tutorial in the 2 first minutes because it wouldn't show me the events
Clean, simple and overall a perfect video! Appreciated a lot.
Thank you CodeMonkey as always! I made a slightly different variation that uses Triggers for the itemSlot to talk with the DragDrop class to tell it where to place the item if any part of the item enters the ItemSlot rather than just the mouse cursor.
It's really awesome seeing your way of doing it, and discovering another way of doing it to fit my specific desires!
Awesome! That's exactly what I hope people do with these tutorials, take them as a base and apply them to their specific use case, nice job!
YEeEeEeEeeeeEEEsS! OMG thank you so much this is exactly what I needed!
One of the best Unity channels of TH-cam...
Thank you for the tutorial. It's very concise and helpful.
A small tip: you don't need to add a canvas group to block raycasts for the dragged object, just grab its image component and set raycastTarget = false;
Where ever i search about something, i find u immediately 😧, u are legendary man thank u a lot 🙏
You have some of the best tutorials! Great job!
Man, I had troubles getting DragDrop to work properly especially when I get into the NRE, long before I found this tutorial and adapted it to my code and made it work just the way I wanted. Thanks, Code Monkey.
👏🏾👏🏾👏🏾👏🏾👏🏾
Great great tutorial!
Fast and objective.
Thank you!!
Super clear, and very easy to use. Thank you Master.
amazing tutorial as always
Thank you for your well-made videos. It always help me a lot.
I found this very helpful getting my own implementation working. Thank you!
This man, without a doubt, creates some of the best tutorials. His tutorials are easy to follow and are very useful. Stay blessed, Code.
I'm glad my videos have helped you! Thanks!
You got the best unity tutorials out there... fantastic content!
Thanks!
Thank you man. You're best
Thank you Code Monkey! :D
Thank you so much! You probably saved me days of work
See, THIS is useful and quick game dev I love. I learned more here about game dev then I did on the first few videos of a Udemy course lol. Thanks
thx for tutorial dude! This iş very useful!
Great video this has really helped me with my drag and drop game. Thank You so much.
Thank you very much! Very helpful, also did not know about OnDrop haha.
So amazingly helpful! Thank you.
Another banger... Thanks Code Monkey!
Great job as always , thanks.
this is how a good tutorial should be! thank you for making this so easy to understand! :)
Helpful as always, thanks!
Hi again @Code Monkey. Another great tutorial with something I need! Thanks again.
I have one problem, though. It seems when the item is in a hierarchy under the canvas that doesn't end up with a unit scale (the rectTransform, not the Canvas), the dragging happens to slow or fast. You have to divide by the "cumulative scale" of the rectTransform, but you can't use lossyScale, since I think it also takes into account the scale of the canvas and part of the hierarchy above it as well. It also doesn't work to use only lossyScale and ignore the canvas.scaleFactor.
Any ideas?
Thank you so much! look for that info all day
I might not need this now But I'll keep it for a future project. Thanks!
If you are using the new Unity Input Sytem this wont work by default. You need to go to Edit --> Project Settings --> Player --> Other Settings --> Change the setting "Active Input Handling" to both.
still doesn't work
Thanks, exactly what I was looking for! Didn't know there was an OnDrop event :)
Ohhhh really usefull thanks ! :)
Tip: by default unity has a threshold on drag, meaning the object starts following after the mouse has moved an amount in some direction.
To avoid this and have the object move exactly under where you click, you need to implement the *IInitializePotentialDragHandler* interface and inside *OnInitializePotentialDrag* set *eventData.useDragThreshold = false*
ty
I was going crazy trying to figure out why there is such a delay/lag when I drag even using the script exactly.
I added IInitializePotentialDragHandler
public class DragnDrop : MonoBehaviour, IPointerDownHandler, IBeginDragHandler, IEndDragHandler, IDragHandler, IInitializePotentialDragHandler
and
public void OnInitializePotentialDrag(PointerEventData eventData)
{
eventData.useDragThreshold = false;
}
But that didn't fix the problem sadly. Is this what you meant with your advice? Thanks!
Thank you so much! Came to the comments looking for this exact issue!
THAT'S WHAT I WAS LOOKING FOR, THANK YOUUUUU
It works for Mouse but there is still Drag threshold when using it for touch screen. any idea ... anyone , why ?
you are a lifesaver. Thank you
great!! thank you,you really helped me!
I just wanted to say thank you so much for the video! This tutorial helped me along the way with my thesis work so I am especially grateful
I'm glad it helped! Thanks!
thanks a ton, im trying to make a card game and I need to drag and drop and this works great
Thank you so much for this!
By all means, this saved me life
How do you adjust this for a two-block wide draggable object? I am using this for a 2D platformer where you drag blocks (sprites with colliders) using a world-space canvas. I have item slots in a 10x10 grid, and have the 1x1 draggable objects (the potion in this tutorial) working well. How would you modify the code to allow for different shape blocks?
Thanks
Good work! Thanks :)
We all love you CodeMonkey, just know it :D
Excellent explanation! Thank you for sharing!! My snapping worked using GetComponent.position instead of GetComponent().anchoredPosition...
Is there any way to compare if the Obj is not on ItemSlot would be transformed to its initial position? For example, if I drop the draggable obj in another position in the scene that is not the ITemSlot, I want the draggable obj set to its initial position.
Thank you very much for the tutorial
Awesome tutorial Code Monkey 🙇🏻♂👏
Thanks for it 🤝
I'm glad you liked it! Thanks!
Thank you ! You save my day !!!!
I have 2 questions:
1.I followed your Simple inventory tutorial and successfully applied it to my game, i can successfully clone the itemSlotTemplate but when i attempt to clone the itemDropTemplate/dropHandler you made in this video. I can't seem to instantiate it like what i did with itemSlotTemplate. How did you do it?
2.When I use the DragHandler function, the item accurate follows my mouse vertically but when i drag it horizontally the item is being left behind?
THANK you , you ask we when this video is helpful....! Is more than helpful...!!!
As always good stuff... might mess around with this one and tailor it toward more dragging from the inventory and placing traps within a radius of the player and if it's not colliding with anything.
Much better than my current way, click on the item (this case a mine) an it places at your current position.
Very cool stuff thou man.
in case any other UI noobs out there run into the same issue...
my console wasn't showing any click event debug messages-- the problem was i tried to make my own canvas by making an Empty and adding a Canvas component to it -- which is not the right way to go about it. : )
To solve this, go to the hierarchy and right click > UI > Canvas. This will generate a good Canvas with a graphic raycaster, and an Event System, both of which are needed for these scripts to work as shown!
Thanks so much. ;)
You can also add a solo Event System from right click > UI > Event System if yours is missing for some reason.
(When you copy paste a canvas from a different scene for example :))
Very cool, thank you!
Very clean guide. The only thing it misses is ability to work with the new input system.
Great! Helps a lot :)
Thanks, very clear
Super Thank you!!
ok then so now, how can I use this to instanciate an object in the map? and to store it in back to inventory? for example with the mouse
May the gaming gods bless you. I was having issues with items not dragging at same speed, it was the scale factor.
Hi! Great tutorial!
How can I make sure that the right object can only be dropped into the right box when I have multiple objects and boxes? It should be possible to change the correct box for each item in the inspector.
Amazing video!! Everything worked out well !! Can you please tell how can I make multiple objects to fill in multiple slots. When I tried it, it didn't work !! Is there any way to do this multiple times in a scene ?
This is maybe the best tutorial I've ever come across. It feels like the guy is an actual expert, rather than just a hobbies who decided to try putting up a few videos. I learnt a tonne, including how to use the EventSystem properly. (I've been adding colliders that I don't really need.) Really good work.
Thanks! I'm glad you found it helpful!
I have a bit of a problem that when dragging and dropping the item "code itemslot" I don't get an object when dragged in. Help me please.
Excellent tutorial.
thanks it works!
Any way to implement this when the pointer is not over the drop object but the item you are dragging is? Like any part of the dragged item is over the drop zone (but the pointer itself is not) ... I feel like some hover function would work here or perhaps a bounds check?
Great tutorial !
Hi, I want to add and drag and drop object only between the tilemap's tile. Can you suggest to me how can I achieve that with an example?
Hi, great tutorial, is it possible to this vuforia for augmented reality app ? Thank you in advance
Hey very cool video!! Is their a way to restrict the drag and drop to one axis, so that you can move the item along the x but not the y axis for example?
hey man, awesome video, but i got a question i'm using this method on an android device but the OnDrop is not being called... but everything is fine in the editor, so do you have a suggestion ?
Hi Codemonkey I have a problem,
I have done everything exactly as in your video but my item goes too far over the mouse, even tho i have the: rectTransform.anchoredPosition += eventdata.delta / canvas.scaleFactor;
No errors and it works, but only this little bit doesnt(i also have debug.log done and it triggers the event)
Thank you!!!
You save my day
That is Great.. but if i have two objects how and tried to drag it is becoming behind.. how to make the draged object always on top. thanks
does this work for touch controls like on ipads or is it just on computer clicks?
How do you use this on multiple item slots instead of just 1?
Months ago i wanted to implement this system, but i had problem with scrollable ui. Basically if you wanted to scroll, you had to drag ui vetrically and drag in others directions, when u wanted to drag object out. But this was much time consuming, so i implemented buy button instead. :D
Thanks for outlining the basics! This is super helpful. I'm trying to add onto this stating "If image 1 is dropped onto image 2, show image 3. Else, show message" but it seems to be a little out of my technical expertise. Any tips help!
감사합니다 덕분에 유니티 개발이 재밌어졌어요
Hold would you implement a "Long Press" feature to this? Would you use a Coroutine? I tried to add one under the OnBeginDrag function but got errors...
Any help would be awesome.
Thank you so much for the amazing tutorial!
Great tutorial!
Just a quick editor bug that I discovered. If the editor is not focused (i.e. you tabbed out and back in) the scale factor of the canvas is incorrect.
In my specific case, I have my editor set to play in Unfocused mode which caused this particular error. If you focus the editor by clicking anywhere, then drag the object, it will work.
(edit): As an aside, this video helped me setup my UI and its customization to exactly how I wanted. So quick and easy! Thank you again!!!
thank you man!
Everything works but whether or not OnDrop triggers is really inconsistent. Does the object utilizing OnDrop need to be under your mouse, or under the origin of the object being dropped?
thanx so much
I have a inventory system where each slot object has a background image and a child item image. When I drag the item image of a slot over others slot that are rendered before the source slot in the hierarchy the image just go behind the background image of those slots. Should I just make a seperate canvas for each item image or is there a better way to solve this
Cool But :) 9:28 will work only if item & ItemSlot have Pivot set to Middle & Center?
Do all these interfaces work with touch too? Or just the mouse?
How to know when an item is dragged out of the itemSlot?
And also if we drop another item, the existing item must replace...
When I drop the item it takes the reference from the canvas not from the slot, what should I do? I'm using a panel to store the slots.
Hey Code Monkey, I really like the way you structure your videos - you take subject matters of all kinds even some really complex ideas and break them down into practical procedures that anyone can follow. I mean that in the best way possible and I wish more people would make tutorials like the way you make them.
Having said that, I hope you don't mind me dropping a request on a subject matter. With ECS coming up, I've been slowly pushing myself towards higher-performance code.
But one of the things I think ECS does not fix is - animation/material rendering overhead when you use mechanim/skinned mesh renderers. Even without any code attached to some of my models, I can only have a couple hundred at most before my frames start massively dropping away. Do you think you can explore some of this and share some methods to optimize animation/material rendering?
I've dug through lots of videos/blogs, while most of them do what they promise to do - they each work only under a very specific set of conditions. They become incompatible if you use shader graphs, multiple materials on a model, incohesive with mechanim (blended animations, multiple layers, state trees) - and so on so forth. If you have any ideas about this, I would really love to know - thanks in advance!
The new DOTS Third Person Shooter should be coming out at the same time as 2019.3 and I believe it contains a fully DOTS based animation system. So looking at how they did that will probably help.
There's also the first DOTS demo they showed, the thousands of minions fighting on a bridge, I believe they were using skinned meshes and the project is available somewhere but can't remember where.
Hello, for example, if we have more than one different object and we drag and drop on only one area, how can we do this? I want to drag and drop more than one object to a certain area so that they do not overlap.
hey man i know its been a while since the video and i dunno if u still check the comments but i can get the OnDrop() to work . I have the block raycasts = false like u did and while googling after that everybody seems to get it working . do u have a clue what could cause this ? (i also went on and made a canvasGroup for each of the children of the dragable obj and then set the block raycasts = false to those as well and still nothing)