Unity Tutorial - Drag & Drop Tutorial #3 [gGUI]

hey folks quality in here and welcome to another unity UI drag and drop tutorial in this video we're going to be duplicating what I did in my little practice area over here which is the ability to choose exactly where in a list you're going to drop something it's a little trickier than what we've done so far but not really that tricky we go ahead and reopen the the last project over here um I have lost it in my list I'm so not prepared do to do there we go here here Sarge working my other monitor yes open there we go so currently we have it set up we can drag but it doesn't give you that little cool placeholder effect and no matter where I drop it it always adds it to the end of the list so we want to change things so that we can move it somewhere in the middle and have it show up there so there's going to be a little bit more involved in this one um but I think the reward is going to be very very worthwhile so how is this all going to work well basically when we start to drag our object what the first thing we do is we remove ourselves from our parent right so we are in the hand if we look at the list on the right over here see the hand I'm going to grab card card one over here which is the blue one as soon as I start to drag it it will remove itself from the hand parent and it will just be parented directly to canvas I think it'll be at the end of the list sort of down here right there you can see the card is no longer parented if I drop it back in here I'll reparent at the hand but by default it always shows up the end the list over here and it's this order that chooses how things are sorted in a grid if I take this card in the inspector and I move it up to right there it'll now be back in that second position for example and move it up to the first position as well there we go but if I just drop it on hand itself it shows up at the end so how are we going to do some of this well first things first let's use a little placeholder so when I pull the card out I don't want the the list to rearrange itself instantly I want it to have a little gap where that card was how we did that well it's actually not too hard what we're going to do is we are going to create a dummy sort of placeholder object okay I'm actually I know I want to keep track of it so let's go ahead and create a some sort of Oh what am I going to call this I guess just going to be game object game object and the placeholder placeholder we don't have to set it to null but I'll make it explicit placeholder starts off as no when we begin a drag we're going to create a new object so placeholder equals new game object we're creating one completely from scratch this is the same as saying create empty game object then what we're going to do is we're going to take this placeholder placeholder transform dot set parent we're going to set it to this dot transform parent I'm going to set it to our old parent now this by default we'll put it at the end of the list we're going to look into that real soon it puts it it'll put it there we also want to make sure that it basically behaves like the like the unity UI system right so we're going to want to say a placeholder well the placeholder should have a rect transform I mean let me think about this for just a second the placeholder should have a rect transform and what we want to do is we want to set the height and width of it to match my thing completely there we go I hope that makes some sense so in our placeholder we have to do a little bit of work but we're going to be okay actually I guess what we all we need to do is add a layout element right the reason in the grid our cards stay the size that they are is because they have a layout element with the width and height so all we want to do in our placeholder that we are now have now parented to our hand we're going to want to say um layout element Y oh we need to make sure to include the unity UI system in here there we go so now we should have access to the class called layout element there we are and we do we'll call it le and placeholder dot add component layout element alright so by doing this the placeholder now has a layout element added to it and we've grabbed a copy of it add component always returns the new component so we've added a layout element to our placeholder and we've grabbed a copy of it then we're simply going to go dot preferred width is equal to say this dot getcomponent layout element dot preferred with we're just going to copy oops parentheses stuff preferred with going to duplicate this and do the same thing for height like so and then we've got to do the same thing for flexible width is not flexible flexible height turned off as well all right if we do this this will add the placeholder element to our list let's just use this as is and see exactly what happens make sure there's no errors okay and hit play I'm going to grab the blue thing and then I'm going to just drop it in here oh I'm a bit of a goof it's because I have I have every time I start a new video I make a duplicate of the folder I'm editing the wrong one let me just copy this whole thing close all of this oops this is particularly bad open the correct draggable script I was I was editing the wrong file paste there we go and in bigan alright now play it should work my apologies there we go and I'm going to drop it back down here and we can see we created a new game object it's right here it's got everything set it's taking up all the space that a card would although obviously it's invisible the same thing will happen here I'm going to pull out the green card you can see already there's a new object over here that's why everything's sort of shuffle shuffle Dover if I just drop it anywhere in here we can quite clearly see every time I start drag it creates one of these placeholder objects okay alright that's not bad couple of things obviously when we stop our drag clearly we're going to want to destroy that placeholder destroy placeholder there we go so now it won't clutter up things with an unlimited amount of placeholder so again when I grab this actually I'll grab the yellow one because what's nice is the placeholder will be exactly at the end of list it'll be where the yellow card is so none of these will move there we go because there's a placeholder there but now when I release this it'll destroy the placeholder and everything is good so here it'll shuffle a little bit there's an invisible placeholder over there if I let go okay that's pretty good but we don't want the placeholder to always be at the end of the list we want it to be where we grab the card out of so how do we do that really really easy the placeholder dot transform has something called set sibling index this number is the order of the the siblings within a parent so if we set the sibling index to be the same as my whoops this not transform a dot yet sibling index it should be exactly where my card was let me pull out the blue card BAM look at that and then if I drop it he'll clean itself up my Black Lotus is still going to the end but my placeholder is showing up where I grabbed the card out of same thing actually works up top here because they're the same script there you go I like that that's pretty good okay we're getting there what's the next step well the next step is when we drop the object what if it goes back to where the placeholder is all right so the placeholder is here instead of when I drop it instead of showing up at the end of the list what if it just puts it back to where it was obviously it's not going to apply here necessarily let's try that how would that work well let's look when we end drag we put our parent we set our parent back to the hand well let's say we copy this set parent here so we're not set parent set sibling index after we've repented ourselves I'd say this don't transform not set sibling index to wherever a placeholder dot transform not get sibling indexes this should put us back right to where our placeholder was let's try it all right so if I pull out the Black Lotus and if I make sure to drop myself on the hand this Black Lotus should actually go back right over there and it does because it's putting itself wherever the placeholder was sitting yeah all right now the next trick is when I take this Black Lotus and I move it over here wouldn't it be nice if the placeholder and the and the green card moved so if the green card was now here and the placeholder was here so that if I drop this blue card I would end up there can we do that sure of course we can easy when this is during our drag while we're dragging around let's keep making adjustments to where the placeholder should be so where should the placeholder be well here's what we're going to do we're going to loop through all the children of this parent over here and we're going to check if the card that we're dragging around if the car that we're dragging down is further to the left of the leftmost card let's say right so this pink card if I take this blue card and I drag it to the left of the pink card then the placeholder should then move over does that make sense I think it's relatively clear so how do we check that well each one of these objects has an X and a y-coordinate it's only the X that we care about here if the x-coordinate of the card and dragging is less than the x-coordinate of a card and a parent then my placeholder should be to the left of that make sense I think it will let's do a loop for int I equals 0 I is less than now what are we looking at well it's going to be this parent to return to that we're working on so this parent that we're returning to has a child count so we're going to loop through every single child once starting from the leftmost 1 the the 0th child the 0th child is on the left so if my X is less than the x of parent to return to dot get child I this is a transformed opposition not X if my x position is less than the position of this child then what we're going to do is we're gonna take our placeholder and we're going to set its sibling oops placeholder transform not set sibling index we're going to set it to I which is going to make us make the placeholder B here and then we're just going to stop we're starting from the left if we are again in the example here if we've dragged this black Lotus and we're to the left of this red one and we've moved the placeholder there we can stop we don't have to keep looking well obviously we're going to be to the left of everything so that's why we start with the leftmost one as soon as we find one that we are to the left of then that's good enough so we move the placeholder and then we just we just stop we just stop this loop with maybe a break this break will stop this loop let's see what that looks like it might be working Rab this is almost there it's a little twitchy ER than I thought but right here we are to the left of that red card in fact as soon as our middle point because of the way that our anchors are soon as our middle point goes to left that red card it works that's good now it's not quite working in that direction it's working here but not here why is that well if we think about it logically or it is working it's just not working the way we'd think right so as soon as I move to the left of the red card my placeholder goes there but what happens when I move slightly to the right well what's happening is the placeholder itself is one of the children of this array right so what I'm moving but when I move to the right first thing that happens is we check that that first object which is the placeholder this placeholder am I to the left of that placeholder card well I no longer am as soon as I move to the right I'm no longer it's left to the placeholder card and then it checks the next card which is pink one am i to the left of the pink card and says yes so it puts the placeholder where that pink card was it's not actually what we're looking for we sort of want to ignore the placeholder in there's this list there's probably another way to logic it up but what I'm going to say is is what how do I want to say this how do I want to work this well actually I want to make a couple of adjustments because one of the things I believe I know we still can put it here right because it's not anywhere we sort of want to move it like one further to the left but only if the sibling is there okay here's what I'm saying I'm trying to figure out the best way to describe this I always say if you don't if you can't explain something in a sentence because you don't truly understand it so I'm making sure that I've got it clear in my head and I and the feeling is I'm sure there's some waited for me to do this a little bit cleaner but I don't have it we're going to create a placeholder just to be super explicit this is going to be the new sibling index placeholder the value I don't know it's going to default to I don't know whatever it currently is right placeholder dot transform get sibling index will have a default to whatever it is now so instead of sending it directly we're going to set new simply sibling index to be I if our placeholder is actually already too left of this new sibling index we're going to just bring the new sibling index down by one just basically we're sort of ignoring the placeholder in the list then after we're done doing this whole loop we're going to make sure at this point to set placeholder transform dot set sibling index to the new sibling index so that should improve one of the behaviors they're still going to be one thing sort of off so now I move to the left of the red it's there but now it doesn't instantly jerk the red back it doesn't jerk it back until I'm in here there we go that's feeling exactly the way it should work however it will not go here and the reason for it is because the placeholder is sort of always going to be our left that's why I'm like I'm sure there's another way to arrange this maybe I should be going from right to left or something anyway what does this all mean well when I'm here I'm obviously not to the left of everything so if we check the loop we loop through everything and at no point are we to the to the left of everything so instead of defaulting to whatever we were before what we can just default to is the the parent to return to dot child count or something we're going to assume that we want to end up on the rightmost spot and then we're going to check to see if we should actually just be to left everything if we do this we now have the placeholder going exactly where we imagined it might want to and we can draw our card wherever you want that works pretty good now what this won't do you'll notice I've only been dragging around in the hand at this point the reason is if I were to drag this to the tabletop it wouldn't quite behave the way we want and the reason is the placeholder stays in that initial list and then if I drop it here like okay now there's placeholders here because the placeholder only gets assigned to the parent of that of our initial drop right we probably want to move that placeholder to whatever the array that we're actually hovering over right so we probably want to have that move to down here instead I think that would make the most sense now it's still sort of working with the drop just because it's using whatever index like if I grab here and I move it here it's going to be dropping in the zeroth spot right because the placeholder child index is 0 so even if I go up here it's still gonna be dropping the zeroth spot so it sort of works and if I go here it's going to be dropping in the one spot which actually does put it between these two cards but if I actually go here I have it right here this blue card is going to end up between the two white ones even though logically it doesn't really make sense so what we want to do is our placeholder when we mouse over when we enter a new drop zone we want to move the placeholder to the new drop zone and hey we can do that that's not gonna be so bad in our drop zone we have a function that responds when a pointer enters it so when our pointer enters a drop zone what if we take this placeholder and move it in fact this parent to return - we're changing the parent to return - once we drop we don't have to do that instead of waiting until we drop what if we just change the parent every time we go into it there's a bit of an issue with that the issue with that is we could enter a zone which does make sense to update the parent to return to you when we enter the zone right it's like okay well we'll enter it from here and then yes this is the drop zone and then we go back down here and like yeah sure we'll enter down here that works fine but what happens when I drag it out here well it'll just remember the last zone I was in which in this case would be the tabletop which doesn't make sense if I'm dragging it out of my hand and I go here to this sort of invalid location or off to the edge of the screen and then I release it I actually want to bounce back to my hand not here so what I think we need is a placeholder so we got the parent to return to but what we can have is something like what if we have some just call it placeholder parent all right let's make the placeholder public as well we don't necessarily need to do that hold on so in a drop zone instead of changing the parent to return to let's only change the parent to return to if we actually drop some more legal but in on pointer enter we want to set not parent to return cue but the placeholder parent we're going to set placeholder parent to this transform and when we exit a legal zone let's set the placeholder parent back to what well I guess - parent - return - that might be the most logical we should only do it okay we're going to set the placeholder parent if we leave a drop zone where I set the placeholder parent back to the parent to return to which by default normally will be wherever we started from but let's only do that if the placeholder parent is equal to us just because we don't any had a weirdness where we're sort of leaving the zone we're technically supposed to be in another one if placeholder parent is equal to this not transform then we're set it back to parent to return otherwise someone else is already sort of stolen the placeholder parents so we're just going to ignore it all right and then in draggable when we do the on drag here instead of using parent to return to we're going to use placeholder parent so it's going to be placeholder parent placeholder pair because we're just moving the placeholder placeholder parent there and there and that should work and we want to make sure this defaults to this I can still see a couple of error cases but mostly this is going to work out the way we want I think let's find out sure there's no errors we can hit play start oh when we're doing the on enter a pointer drag is know if pointer drag equals null then get out right away same thing on the exit we don't want to do anything if the pointer drag if nothing is being dragged we don't have any work to do okay no errors good grab the Black Lotus mostly staying where it should be and to like a little bit of weird thing as soon as I picked it up oh no it's not behaving quite right oh it's moving to the left too quickly wasn't doing that before was it I don't think it should be doing that let's all the parent place on the parent if I do a parent to return to search over here it doesn't show up anywhere in here what am i doing that I'm not happy with it's less than that new sibling index is this if it's less than that bring it down yeah that's not right or is it now it feels like it's going too fast I know we'll make an adjustment again there's there's some sort of flaw in my thinking about that that loop that doesn't make it quite as sex as it could be let's not worry about it but if I move it up here oh I don't think the placeholder is actually being repented I think the parent changes on pointer enter yeah Oh in our on drag we're going to make sure that our if placeholder dot parent about transform dot parent not equals the thing that's supposed to be the placeholder parent then make sure to set it the set parent placeholder parent there we go so now if I grab that black Lotus and pull it up here there we go so that seemed to behave that moves a little too fast the one on the left is fine well this one is I don't know I often make an adjustment somewhere along there it's mostly okay but it seems just not quite the behavior that I want oh that's why it's because I was checking I did one extra copy and paste placeholders sibling index there we go so was working right before so much better that's exactly what I want there we go feels very intuitive feels exactly the way we're looking for so again all this code will be available from my website which should be linked down below squeal 18 comm slash I know unity underscore tutorials or something like that you can go and download everything there please feel free to leave comments with questions I will try to do my best to answer them you can also email me or reach me on twitter at quility nor quill akeem my email is quill Akina quilling team common twitter is at quill 18 and yeah and again as usual if you do appreciate these um these tutorials oh here's another thinness worth noting for outside of a droppable zone you can see it just returns to my original position which is great which is exactly what we're looking to do if we're outside of the original drop zone of any sort of legal drop zone it'll just put it back in my hand but if I'm in the legal droplet will do that gorgeous okay yes and yeah if you do enjoy this stuff on the page where you can download things there's also a bit of a of a tipping or donation system there really appreciate the support so I can keep you know keep my my unity license going and keep making these videos which don't get viewed quite as much of a normal gaming stuff by the way on youtube.com slash quill 18 is where I usually do Let's Plays of video games so those get a lot more views but I do enjoy making these program tutorials a lot so if you do like them if you want to support the channel please go ahead and do that might do a subbable at some point but at the current time of making the video I don't have anything of that sort so anyway hope this is a cool tutorial I hope especially in the last video where I talked about how you would apply this to a role-playing game I hope you found that useful and relevant and that you will use this to make awesome awesome video games for me to play see you next time folks bye bye

Channel: quill18creates

Views: 95,822

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, Blender (Software), ui, gui, ugui, drag, drop

Id: AM7wBz9azyU

Length: 26min 47sec (1607 seconds)

Published: Sun Mar 22 2015