Unity Tutorial - Drag & Drop Tutorial #1 [RPGs, Card Games, uGUI]

hey you folks squeaking here and welcome to a brand-new unity tutorial today we're going to be looking at the user interface system in unity and specifically we're going to look at implementing a drag-and-drop system I'm sure many of you may have looked into doing some sort of drag-and-drop interface and realize there's not really a built-in solution for that into unity and you might have thought that was a bit odd but the reason for that is there's not really a one-size-fits-all drag-and-drop behavior that applies to every game in in general for example this is a the Unity user interface like sample project that you can grab that includes a few different demos including drag and drop and here is a interpretation of what drag-and-drop could work like so in this this the the demo put out by unity itself you've got three icons over here you've got to drop areas if you click and drag on one of these icons it grabs a copy of the icon here and gives you the ability to drop it on to an area you can see Mouse's over it glows when I drop it just replaces that that picture there's no sort of grabbing back out of there and you can just keep replacing the images all day long and I mean that is that is drag-and-drop and I guess it's a demo it also showcases some cool sort of the fact that these these surfaces are tilted you know it's it's angling the icon you know so it's a pretty good pretty interesting demo of that but that's not what a lot of people necessarily may think of for drag and drop at least not for your game but there's all kinds of different interpretations in a role-playing game so it's something like Diablo you might imagine this to be your inventory and this could be something like your weapon slots you might be taking a sword from out of your inventory and putting it there in which case you'd imagine it as physically moving the object from point A to point B something like hearthstone which I have over here it's a card game that's put up by Blizzard it involves some dragging and dropping although there's multiple different interpretations that here we've got our hand over here I can grab one of these minions like a shield bear I can I can pull it around I'm sort of physically moving it and then I can put it on the table and I can choose where I'm going to put it in my row of minions now minions work this way but spells don't necessarily do that I want this spell when you grab it if I'm assuming I'm remembering correctly it's been a while since I've played a lot of hearthstone if I were a spell card that maybe did you know to damage something if I were to drag it out I wouldn't be physically dragging the cart instead I would be dragging a line like an arrow to my target and so that's an example of a different interpretation of what drag-and-drop can look like in within the same game for example you get some different behaviors and yeah so what we're going to do is we're going to implement something that's not unlike this sort of card game like hearthstone or Magic the Gathering type of card game with the caveat that as we go along I'm also going to tell you everything you need to know to also make like an RPG style drag and drop system in fact the thing we're going to end up making is going to look if I can pull up my other project here I don't just bring it over this way we've got card test asset scene open this let it reload close that just takes a moment MA to do actually really surprised it's taking so long it's not a very complicated project there we go computer you can do it I have faith they are sit play so this is a demo we're basically going to end up doing we may not do this card drawing mechanic we've got some cards unlike in hearthstone I can actually reorder my cards and my little demo here and then I can drop things onto the table like that you can see here I can put it there or I can put it back down here it's got the placeholder with my interpretation I've got here these are still draggable so I can keep you know moving them around if I want heck I can even pick them up into my hand if I want which is my current implementation here but there we go so this is sort of drag and drop we can do and again while this is not an RPG inventory implementation it should be very easy for you to imagine that this is our inventory and then instead of one giant dropping area here where things can be ordered and added to instead we'd have a series of individual little drop areas each one of which can only have one thing so for example if I'm currently wielding like an axe here and I grab my sword card and this is supposed to be a weapon thing instead of you know allowing me to have both instead by mousing over and dropping what it does the old one would then go back into my inventory and replace it that way we'll also talk about the concept of filtering for example the idea that you can't put boots in your sword hand for example and how we might want to do that but yeah so this is the the demo we're going to do should be relatively straightforward I think and let's go ahead and get ourselves started okay so we're ready to set up our new project but before I do I want to address the fact that I am running this in unity 5 I believe if you're still running on unity 4.6 everything I do in here should work and should be exactly the same if anything for any reason doesn't work out quite well make sure you're running the exact same version that I am I will also note that I'm running the professional version the paid version of unity however everything we do here should work perfectly fine in the free version there's no reason that it shouldn't as usual keep track of where you've actually saved your project so that you can find it later if you want to copy in some images or anything like that you can name your project whatever you want I've gone ahead and named it unity a drag and drop tutorial doesn't matter if you setup your project defaults for 3d or 2d the only thing this does is affect how your your images get imported by default whether they're set up as textures or sprites which is fine you can still change them it also changes how your default scene editor view is set up but again that's an easy - one button to click in there so I'll leave it on 3 for the sake of argument we're going to go ahead and create the project I'm super excited for letting there 32 I don't know when you're watching this video but at this time we're about a month away from the next 11 dare okay and so here's the scene this is usually the way I like to keep things set up and we're going to talk about a few UI basics of a few concepts to get started but this is not going to be just a purely UI centric tutorial we're mostly going to focus on drag and drop and not going to details about absolutely everything so to get started we are going to need a canvas every UI in your canned in your unity project exists within a canvas I will note that there's lots of ways to do drag and drop you can do drag and drop stuff with 3d objects and all kinds of things we are specifically using the Unity GUI drag and drop type of thing for this particular tutorial so we're going to go and create the canvas we can use either this game menu here or we can create from here it doesn't make a difference which one we use we're going to then go UI and we're going to create a canvas now it's worth noting if you create any other UI element a canvas and an event system automatically get added to the game but we'll go ahead and put in a canvas to start off with thing to note about the canvas this is automatically saw nice to be the same size as your view over here note that that tends to mean that it's quite big if I go ahead and create say a cube all right we got a cube in here so the cube by default is it's got a scale of 1 1 1 but I think it's effectively 2 units in every direction so it's like 1 unit from the center of the cube to each edge for example right so that's a basically 2 by 2 by 2 box however my canvas if I double-click on it in my hierarchy I'll see well zoom out so far I can't even see the cube anymore that's because the canvas the width and height of it is exactly equal to the width and height of your actual game view if I go ahead and so note that our height is 512 right now if I go ahead and make this bigger like this and it doesn't update in real time for whatever reason you have to sort of click here or just toggle on and off you can see my height was 512 now it's 612 or I can shrink it way down again click just to cause refresh it's now 183 right now I have it locked to a 16 by 9 aspect ratio but it can also go free aspect which is the default actually and every time we do this you can see that the size of the canvas actually changed and you can see it in the editor but I bring it way down to be skinny like this you can see it actually did become very skinny and if I bring it very tall you can see that if I make it really narrow you can see this so the canvas adjusts itself in real time the reason it's doing that is because by default the canvas is on the screen space overlay mode which means it's mapped to the size of the screen another option which seems almost completely identical is the screen space camera mode which will basically do the same thing with a few caveats we're not getting into those and then there's world space which is quite a bit different and it's where it exists in the actual world itself we do this now we have the option of doing all kinds of weird rotation and stuff and it's good for maybe having a pop-up that hovers over a character in the game we're going to talk about those a little bit more later on but mostly we're going to be working with the screen space overlay we're also going to make an adjustment to the canvas scalar later on but for now we're going to leave everything as is get rid of the cube we have no interest in having that cube in there but what we do want to do is we want to make um we want to make a card we're gonna be dragged around things that look like playing cards again sort of a hearthstone Magic the Gathering is kind of thing so on the canvas over here I'm going to right-click on it and say UI and add in an image you could also in the hierarchy go ahead as long as your canvas is selected I think you can go create UI image worth noting panel and image are effectively exactly the same thing they just are set up with slightly different defaults as to their anchoring for our purposes it'll make more sense to just use an image so now at this point we can see a few things again our this canvas sort of exists in 3d space but here it's completely flat and two-dimensional it's really worth noting if we took our camera over here and we moved it we're going to move the camera we're going to rotate the camera around I'm in the background of sort of changing you can see the sky and everything everything is changing but the UI is untouched and that's because again the canvas is in screen space overlay mode if I went to world space then all of a sudden we would lose track of things I don't even know if we'd be possible for us to actually find the object not unless we adjusted things pretty dramatically because of where the placement is if it's in world space then the object actually exists in the physical world and you have to make sure that you're actually pointing at it correctly so if I take this camera there we go and move it back now the camera is either looking at the canvas or it isn't right and its position actually matters quite a bit but as soon as we go back to our canvas simply being an overlay on the screen it's painted directly on the screen that's what we're going to use mostly but again we'll talk about the other one a little bit more later on it's also worth noting here that in the scene view it's not very convenient to work on your UI in 3d mode like this so I'm going to go ahead and hit the 2d toggle button right up over here and this is basically if you setup a 2d project this is exactly the sort of interface you'd be used to but you can always toggle back and forth between the two so now that we've got in this mode my scene editor looks pretty reasonable next to my view down here so this image here we're going to rename it to say card obviously it doesn't look like much of a card right now and make a couple little tweaks first of all the source image I mean it's a little targeting icon we're going to use the UI sprite source image which just gives us little rounded corners which is going to be in my opinion a little bit better and we'll change the height to something like I don't know if we change it something like 200 let's increase the width until it looks kind of reasonable for a car maybe something like this tell you what we'll call this um we'll call this one 25 okay 200 pixels tall by 125 wide that looks kind of card like let's go ahead and add a little bit more decoration to this card we don't need it but let's make it look a little bit more like what you might expect from say I match the gather and clearing card so I'll add another image inside of the card I'm going to color this one to be black and this is sort of going to represent where the the actual picture of the card might be let's go ahead and just make it a little bit wider let's call it 110 by 110 we'll keep it square and then I'm just going to move it upwards a little bit I'm just using the rect transform over here so that's a little bit easier to position we're gonna add in some text this is going to be card title so we're calling this I don't know call it the Black Lotus there we go one of the coolest magic card there is now I can't keep positioning this manually but the other thing I can do is I can use the the little anchor preset tool over here which is very handy especially if you hold alt or shift or both to force the object to go where I want it to go maybe I want it to stick to the top and be stretched from left to right there we go like that and then I can change them maybe the bottom part over here just make sure it'll never overlap things and oh I called it Black Lotus here that's not what I want I want this to be something like card title and in here Black Lotus there we are that's relatively fine to what let's tweak this a little bit more let's um there we go and then bring it up a little bit further there I think that's relatively decent and then we need a little box maybe for description UI text I'm going to go ahead and holding alt and shift I'm going to stick it to the bottom I'm going to make sure to embed we're going to say so this is going to be the description card description it's none of this is important it's just you know looks better this is a super powerful awesome card that makes you win and then we can adjust the font one of the cool things you can do is turn on best-fit mode and then you give it a range font sizes from like six to forty it'll automatically scale the font to fit that appropriately depending on how much is in there so whoo right is big this is smaller if I kept typing then it would keep shrinking like a neat little trick maybe not appropriate for this sometimes you just want a fixed font size and you'll work things clearly just a card title or the the card image is a little bit too big but you know what we're gonna call that one good enough so now we have this card and we're going to want to be able to drag this card around actually what I'm gonna do because it's just gonna annoy me none of this is important but it's kind of driving me bonkers there we go that it was being clipped just a bit same thing with the the card description none of this matters why am I even doing this because I have to all right there there's our card so we want to make this car to be draggable so there's no there's nothing you can just necessarily turn on to make a card draggable it will need a script because again what does dragging and dropping me and it depends on the game so we are going to need a script I'm going to create a new C sharp script and I'm gonna call it Dragon Ball okay so we're gonna put this on any object that's supposed to be dragged well in case the card should be draggable okay so it's going to have some sort of functions that do things but it's also going to need to receive messages from the user interface system to find out that like hey the user is trying to drag because that concept is in the game if I click and drag like unity already knows if you click on something if you're pressing down it's got events for that events that's an important word and if you're holding it down and you pull your mouse to the side that will initiate something called a drag and again events exist for this too what you could do so there's as in everything with all programming especially unity or including unity there's multiple ways of doing it what we could do on our object we can put in something called an event trigger we can add a new event type and we can say look at this drag right drag drop well that's that's it we want an event when a drag has started we want to do something about that and what you can do is you can add something that listens for this event drag in some sort of object so maybe the card itself and then call a script on on one of the or call function on one of the scripts so every time a dragster we'd call one we'd add a new event type for drop we'd register the card here and call a different function that that can work however I find this to be a little bit tedious also I tend to forget I'll create a new object that's supposed to be drag and drop a ball and I might put the draggable script on there but maybe I'll forget to wire up all the triggers for example so rather than use this I'm going to do it in scripting and I actually want to remove this component so we're not going to use the event trigger component we just got the basic card with the you know the image on it and the draggable script and in the script we are going to tell unity that we want to that we want to listen to that event I'm going to go ahead and just save the scene here boom I'm just going to call it this what I usually do makes it nice and stand out over here and I just call a default scene that way I can keep hit and ctrl s to save if we're going to double-click on draggable to open it up hopefully I didn't have any old scripts open in monodevelop over here doo-doo-doo there we go all right so here is our script let me go ahead and ambiguous it's a little easier to read so by default there's a start and an update function we don't think we're going to need either one of these so what we want is yet we want to know when we start dragging it again what we could do is if we had a public void on drag function like this for example we could call it from that event trigger system however there's a slightly different way of doing it if we are if we register ourselves to use unity engine dot event system we include this then there's a couple of interfaces that we can say that we are that we will implement on this particular object so what do I mean by that well let me get my reference open on the other side so I don't lie to you about some of the text unfortunate I don't like things that you have to memorize and this is sort of one that you kind of sort of have to and it's a concept that might be a little bit weird if you're not used to certain types of object-oriented programming but draggable here is it's descending is inheriting from monobehaviour it is a monobehaviour so specific type of mounting behavior draggable but we can also bring in some new functions so instead of specifying hey you know lloyd on drag and then wiring it up through the through the inspector what we can do is we can registers and say this implements the interface of i begin drag handler you need to include the event systems in here otherwise unity won't know what the heck this is but this is a function this interface makes a promise to the system it says I promise that if you send me a certain set of functions if you try to call a certain set of functions that function will exist on here if I just say this this promise here and I then go back over here we will get an error in our console draggable does not implement interface member da-da-da-da-da there's a function here called on begin drag that is expected if I'm promising to implement the the interface begin drag handler I'm promising that there will be a function called on begin drag okay but that's fine we want to know when we start dragging so let's go ahead and say all right so there's a pump function called on begin drag and it requires based on this it needs to accept the pointer event data okay pointer event data and we'll call it I don't data doesn't really matter what we really call it here or maybe you can tell you what event data that's probably a little bit better okay so now we're promising that there's a function called this not error should now go away unless there's it's supposed to return something hang on let's right-click on I begin drag handler check the declaration void on begin drag that I spell it wrong no everything is fine it's not supposed to be public is it I bet you it is because it's an interface there it is public interface yeah alright so it has to be a public function good to know let's go ahead and put in a debug log on begin drag and we're going to verify that we're actually getting this message so we're going to hit play so I don't want to maximize anymore now if I just click on the Black Lotus nothing happens but if I click and hold and then move to the side still nothing is happening why is that it should be on begin drag handler let's go ahead and Plymouth the rest here I drag handler because we also want we don't want to know just when we begin to drag we want to know while things are being dragged and we'll also want to know when things stop being dragged so we need an on end drag handler so these are all public void on drag with the same parameters here just make an empty function and another one when we got on end drag with the same things and we'll go ahead and put in a debug log on all of these still oh that's interesting how come the on begin drag wasn't triggering before oh okay it's only draggable it only responds to any of these apparently see I was trying to break it down into baby steps and unfortunately made things more confusing than it should have been it's only draggable with this we don't need anything else I could actually get rid of everything else right all you need if you respond to the on drag handler then that is enough for the system to be like okay this is something that's draggable and start firing events but then if you also respond to the start and end drag then it will fire additional events at the very start of the drag and the very end of the drag but apparently less if I remove the drag handler I don't think either one of the other two will fire that's interesting look at that huh if you don't respond to drag itself it doesn't respond to the start and end of it I mean I guess that makes sense I just I mean you almost always use these together or at the very least you'll use just the drag handler I guess there's no ever there's never going to be a reason you would only use the beginning end and not care about the middle all right so we're clearly getting events now that's the important part right we now know when the system says this card has started to be dragged and is being dragged and as soon as you let go you get an on end drag it's good okay so now what do you do with these events with these information well your on drag can be as simple well again here it comes down to what it mean to be dragged let's assume we want to physically move the card at this point how would we do that well it's actually not that hard all we need to do is use the transform of this object position all we want to do is set the position event data has a position in it it's the position of where the mouse is and where all these events are happening so oops we got to stop and play so now if I click and I drag I'm actually moving things around note that by default because my anchor point on my card is in the middle the way that this is implemented it's always going to drag sort of the middle of the card there so if I click on the top and then start the drag it'll do a little bit of a hop you can avoid this if in your on begin drag you take note of what the position is and what the difference between the current position and the mouse position is and then keep that as a sort of an offset and then keep that in there then you can sort of drag from the top corner if you want to do that sort of thing we're not going to bother here because we're going to try to keep the script as simple as possible but now we can drag an object around and when we let go well we're no longer moving it so it just stops there okay that's great but obviously is only a very small part of the battle we want to be able to drop it in specific places maybe again in my little demo there we are doing basically almost like a card game right where we've got a hand here and then we've got a droppable place there you can't just put it anywhere on the screen we want to have it drop into specific spots same thing with sort of an inventory type system so let's go and look at how to make sort of drop zones in the next video thank you very much for watching folks and I'll see you next time

Channel: quill18creates

Views: 377,762

Keywords: Unity (game Engine), Game Engine (Software Genre), programming, tutorial, first, person, shooter, first person shooter, fps, howto, how to, beginner, guide, unity, unity 3d, unity 4, physics, blender, 2d, 3d, quill18, quill, multiplayer

Id: bMuYUOIAdnc

Length: 24min 41sec (1481 seconds)

Published: Sun Mar 22 2015

Reddit Comments

[u/Saxi]

This is a really good series.

[u/nazihatinchimp]

Wish I had scene this before I made my own with OnGUI.

[u/quill18]

Typo in the title -- it should really say "uGUI"