{"id":451,"date":"2017-05-27T08:00:00","date_gmt":"2017-05-27T07:00:00","guid":{"rendered":"https:\/\/pagan-gerbil.net\/?p=451"},"modified":"2017-05-27T08:00:00","modified_gmt":"2017-05-27T07:00:00","slug":"drag-and-drop-in-unity-part-one","status":"publish","type":"post","link":"https:\/\/www.pagan-gerbil.net\/?p=451","title":{"rendered":"Drag and Drop in Unity Part One"},"content":{"rendered":"

I\u2019m starting to experiment with Unity<\/a> for a hobby project involving a card game.<\/p>\n

In almost any card game, there are certain areas of the table for a collection of cards. Whether this is the vertical stack in Solitaire, the lands in Magic: The Gathering or a hidden hand of cards that aren\u2019t \u2018on\u2019 the table, there are different areas that contain groups of cards. These cards will usually need to move between the card containers, so I figured the first thing to do would be to implement dragging and dropping. After watching a few video tutorials (the most useful was this one<\/a>), I was ready to try some things out.<\/p>\n

I started with a 2D game in Unity \u2013 card games are famously 2-dimensional. To this, I added a Panel and named it \u201cContainer\u201d. Then I added a Panel inside the Container and named it \u201cItem\u201d. I made the Containers a little bigger than the Items so it was easier to see them, and duplicated this until there were 4.<\/p>\n

\"\"<\/p>\n

I added a Grid Layout component to all of the \u201cContainer\u201d objects and set the Child Alignment to \u2018Middle Center\u2019, then added a Constraint of \u2018Fixed Row Count\u2019 and the Constraint Count to 1 so that each container would only ever have one row of items.<\/p>\n

Each \u201cItem\u201d needed a script \u2013 named DragHandler \u2013 to handle the dragging behaviour. The script describes how the object should behave when being dragged around, including how to begin dragging it in the first place. To do this it needs to reference the UnityEngine.EventSystems namespace, and implement the three interfaces IBeginDragHandler, IDragHandler and IEndDragHandler.<\/p>\n

First of all, it needs some properties and fields set up.<\/p>\n

public static GameObject ItemBeingDragged;\nprivate Vector2 _startPosition;\nprivate Transform _startParent;<\/pre>\n
This is almost verbatim from the tutorial video, and I will probably be refactoring that static GameObject field at some point in the future (it ought to be a property if it\u2019s public).<\/p>\n
public void OnBeginDrag(PointerEventData eventData)\n{     ItemBeingDragged = gameObject;     _startPosition = transform.position;     _startParent = transform.parent;     GetComponent<CanvasGroup>().blocksRaycasts = false;\n}<\/pre>\n
OnBeginDrag starts the process off by setting the ItemBeingDragged to the current GameObject, saving the start position (so it can be returned later if the drop is unsuccessful) and saving the original parent (same reason). Finally it finds the CanvasGroup component and stops blocking raycasts so that events can be fired through the item being dragged (this will be needed to drop it).<\/p>\n
public void OnDrag(PointerEventData eventData)\n{     transform.position = Input.mousePosition;\n}<\/pre>\n
OnDrag just makes the dragged item follow the mouse cursor until it is dropped.<\/p>\n
public void OnEndDrag(PointerEventData eventData)\n{     ItemBeingDragged = null;     if (_startParent == transform.parent)     {         transform.position = _startPosition;     }     GetComponent<CanvasGroup>().blocksRaycasts = true; \n}<\/pre>\n
Finally, when the drag is over, the ItemBeingDragged is forgotten (set to null), and if the parent item at the end is the same as the beginning it is returned to it\u2019s starting position. Finally, raycast blocking is restored so it can pick up further events.<\/p>\n
The Container objects need a script too, which will also need to reference UnityEngine.EventSystems and implement an interface. This time, IDropHandler so we can drop items there.<\/p>\n
public void OnDrop(PointerEventData eventData)\n{     DragHandler.ItemBeingDragged.transform.SetParent(transform);\n}<\/pre>\n
This is a simple script. It references the static ItemBeingDragged property from the DragHandler script, and sets its parent to whatever the drop target is.<\/p>\n
With all this set up, I can drag Item panels from one Container to another. Or move a card from one location to another, eventually.<\/p>\n","protected":false},"excerpt":{"rendered":"
I\u2019m starting to experiment with Unity for a hobby project involving a card game. In almost any card game, there are certain areas of the table for a collection of cards. Whether this is the vertical stack in Solitaire, the lands in Magic: The Gathering or a hidden hand of cards that aren\u2019t \u2018on\u2019 the … <\/p>\n
Continue reading “Drag and Drop in Unity Part One”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[194,195,62,196],"series":[],"_links":{"self":[{"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=\/wp\/v2\/posts\/451"}],"collection":[{"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=451"}],"version-history":[{"count":0,"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=\/wp\/v2\/posts\/451\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=451"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.pagan-gerbil.net\/index.php?rest_route=%2Fwp%2Fv2%2Fseries&post=451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}