UE4 Tutorial - Mouse Drag Objects - Manipulate, Grab Unreal Engine 4 Tutorial

hi everyone I'm gonna show you how to implement dragging the objects with mouse cursor so if I go into the play mode here then you can see I can move around and then if I push the G key then I can start dragging objects so these are either physics simulating objects like this one and this one with the skeleton the the mannequin or non simulating physics objects like this one and I have a quick fun demo here with these gears okay so first we're gonna see a quick overview of this and then we're gonna go into the step-by-step so here on the Left I have everything that concerns the pawn movement and the activator of the grab mode and on the right I have once we start grabbing an object it's where we play this and then each frame it's gonna execute the part on in the bottom here on the bottom so let's see when we start grabbing an object what happens so when the left mouse is pressed then we get the coordinates of where we clicked on the screen here and then we line trace forward then we check if the object is movable then we've remembered the distance to the object and then the component that we're dragging and then we go into seeing if the component is simulating physics if it's not remember its relative grab location we'll see about this and if it is then we're checking if it's a skeletal mesh and then we're using yes we're using a physics handle like here I forgot to mention it and then we'll remember in the grab location like before but it's just a little bit different alright so this was the activation then we if we release the mouse button then we just release the component from the physics handle and then we set this to null now in every tick if we are in grab mode so if we've actually grabbed an object we're gonna see if it's valid and then if it's a simulated physics or not we're gonna go for the nonce humility physics object this method we're actually getting the mouse coordinates and then calculating the position where the object should be placed and here for the simulated physics one we just move there the physics handle we set the target location and I would draw a line so there we know where our targeted position is to the actual one this is gonna make sense only for the physics objects okay so that's kind of it for the general for the overview okay so let's put this here so we'll go into the step by step now so I'm gonna create a new one so blueprint class we inherit from the pawn and we'll say now's grab on like this open up this so first okay so this we have a player start here so it's gonna spawn the the pawn there and in order to say which point is gonna utilize we're going to the game mode so I have mine here and then we just tell it which one class to use so select here grab mouse grab one class it's fun save then we go into the mouse grab one class here and sorry about it goes to the other monitor okay so here we will only need the event ik this one and first we need to show the mouse pointer so when we go into so the movement is just gonna stay in place we're not gonna move it I'm gonna show you afterwards this one so in order to go into the grab mode will push the G key like this then when we press it we want to get the player controller so the player controller set if we see them out Mouse or not so we show mouse cursor we get the states of the show show mouse cursor we I say not this inverts this and then we set it again so so here set mouse cursor set show mouse cursor this one so you grab from press so it's gonna be a switch so we're not gonna keep GE pressed when if each time we switch okay so we said this like this so now I'm press G it should show the mouse and we prefer press again then it should so now I can't move if I press G you can see it mouse press G again it disappears okay so this was quite simple to do now when we click with the left mouse button so mouse that's actually left mouse button this one now here if when we press and hold down we want to grab the objects and when we release it we want to release the object okay so you grab from here and say we'll check if we're in grab mode so we'll have to remember let's create a variable grab mode so we have to remember if we're in grab mode because when we're not then we're gonna zero out the variables right so here I'll get this and we'll do a branch actually two branches like this and we'll plug in the grab mode like that okay so here I'll have two okay so this is more the important part part so I'm gonna have two line trace for the for the object right so okay here I'm going to click on the screen it's gonna lie trace forward and we're gonna hit the object right so here we're gonna get player controller because it's this the player control that controls the mouse so there is a function convert Mouse location to world space this is the key of implementing this so this is Anna we're going to give us the world location of the mouse click so it's going to take the camera and compute where we click the mouse but this is only if we look if we will have a camera here so this click would be somewhere over here right so it's going to be right at the edge of the camera so with this one we're gonna do a line trace by channel okay so I'm looking forward like this and when we click or we're line tracing forward to the object and now we're getting that object so the start location of the trace is gonna be the location the world location where we click that gives that is given by this node right so you can put that in and the end location so we're line tracing from here to the object like this forward so we take this location and we add it we had a distance of trace and now we'll go here in the direction it's going to be the direction that we get from here so now take this and well multiply it with a float this is gonna be the length of the line trace you can put whatever but let's put by the way you can add a literal so if you want to add let's put a thousand here like that like 10 meters something so if you have a value that is you can connect to other stuff like I can connect this here you can search for little and then well it's not gonna be here but here so you can do other stuff with it but we're not going to use it here but just a note so this is the length one vector for the direction of the trace and we'll multiply that with the length of the trace so that it's going to give us a vector with the right length but we have to put it here to start from here so then we're gonna have to add this like this to add to the location of our I'll click right so this is gonna be in the end of the line trace so I think we can test this out so let's check Tariq home tastes complex because we may need it so see draw the bug type for duration let's set it to 5 seconds so let's see now if we if you push G let me click mmm something doesn't work mmm let's check this let's see what's happen happens yeah we haven't put the grab mode yeah so yeah we have to set the grab mode right here that's here so you take the grand mode set it we're actually gonna toggle it so get it again and then see I'm not like this and then plug it here and now you have it toggle right okay switch time with the G key is gonna toggle this so it's gonna start with the false right so if we play again and then we push G and then click then you can see it does line trace we can't see exactly where we'll enter is because it's in the the exact same direction right okay so once we get this done then we have a result here so if we break this result then we get the component this is the component that we hit so we don't use an actor because there might be different components into one actor so we have to treat them separately now if we firstly it's there's gonna be a lot of checks here because if not then we might have different stuff so first we want to check that we actually hit something so we put a branch here if we don't we just don't do anything and now we want to check if this component right here is movable so there's a thing called mobility get mobility this one so this one we can we'll check if it's equal like this and here we'll use again literal sorry about that so literal mobility I think yes right so if we as you can see there was just one value here like like a byte value but if we put a literal in then we can select something so if the mobility of this one is moveable then we can work with it if not then it's going to give us errors right so we branch again here and then we plug this in and now it should be good now we can go ahead and here we can so I'm thinking we might have to copy some stuff and I'll explain that later and copy some stuff from the other point that I've implemented and I'll explain them later so I've copied these right ok so these are for the mobility and I'll explain them at the end because I want to so let's yeah so you can move around now because of the stuff that I just put in okay so if I push the G key and I click and I G again push me again and I can see the the the line trace right so as you can see it stops at the objects that's good okay so let's go back now okay so here let's just try and let's see if we've have so we're checking the physics if the component is generating physics now what I'll do is actually split this at the rear of nails like here will break again because I don't want to I don't want to have too many lines from here so we can we can carry this or heat result over and the breaking it again if you click this by the way if you click this then it's gonna put things neatly like this so you will only have the exits the outputs that you are using right so you can put again from the component actually let's do some other stuff let's remember the component so let's create a variable so let's say grabbed component like this and we call this a primitive well gonna make it a primitive type right so we'll just set it here set so there's nothing to do on the force right here because it's not if it's not movable we're not doing anything so take this hip component good now we have it now can use this variable instead okay so let's put this back collapse that and here we'll just check let's put a branch and we'll check if this component is simulative physics like this now if it is then put a route here alright okay so you have a branch here for this the part that is simulating physics and the other one that doesn't I'm gonna tell you at later why this is there's a thing that I can't I haven't solved yet but I'll tell you about it later so first let's grab the physics simulating objects so for that we use we're going to create physics handle you could use a physics constraint for this if you look into my other tutorial I have another tutorial on how to grab things using the like the cross here right so when you grab things they are actually locked to your screen so different from this one so if you want to use a physics constraint you can you can use stuff from there I'm using the physics handle here because just easier so what we're gonna do is we're gonna take the physics handle and we're gonna say attach oh sorry it's not attached its grab component a location now okay so here here we have to calculate some stuff so the actually we don't if I remember correctly yes so the grab location is actually where we hit with the line trace so if you hit here with the line trace we have a we have a location in the world space that we just pop in here so the physics handle will is going to grab the object from this location so it's it's like a end of an anchor then we will move it it's gonna hang from here okay so this grab location is actually if we look here the hip result that's why at all just gonna we're gonna break the hip result again here so we don't have too many lines so we have the location here so it says location of the hit in world space so that's why we're going to use so pop it in here and then the component we already have it remembered here is the grab component so we'll plug this in and for now it should work but let's well let's try it like this so push the key G key and I don't grab this one because this is not simulating physics I'm gonna grab this one and we'll it doesn't work of course because we've only grabbed it so we're gonna have to implement the event ik right so this actually works but it doesn't move because we're gonna have to update the location of the physics handle each frame right so let's see here in the event ik so we'll check if we're in gram mode right so if we're not we're not doing anything and then I'll check if the component well we don't need to check if it's valid or not because we've actually checked it here so then we'll have to check if its ability physics let's see because I'll show you why later we need this because we have different method of grabbing here right okay so I'll take the grapple component and say it's simulating physics and I'll put this here so we'll take this and we'll treat this case okay so now when we look somewhere we're gonna have to take the same location on the screen and then add the distance that we had here so the plan is this one we're gonna move the object in the same plane as our camera so actually perpendicular to the direction which you were looking so we're gonna actually move it like this so in a plane which is perpendicular to the direction of the camera right so we need the distance so when we click somewhere we have the coordinates and the direction but we need the distance so that distant it's gonna be the original distance of the object or we can calculate it differently but that's what we'll take here so for that we're gonna have to go back in here and then we have to remember this right so let's put this here so after we check the object then we look at the hit result and we actually have it here the distance from the tray start to the location in the world space so let's add a variable and we'll say distance to actually original distance to object and this is gonna be a simple sloped like that so set it here and then we'll take it from our hit result the distance so free collapse this if you see we've actually just introduced this okay so now we can we remember this outside of that so we have this already right and here in even tick now we're gonna have to do what we done here this one we can copy it right so with this one when we look on the screen we get when we look at an object put the mouse over it I have the location in the world space and it's gonna give us the direction and the distance or have it here right so we'll kind of do the same thing like this but instead of this we have the distance that we remember it so you can actually copy the whole thing like this so here we'll pop the distance so again from the world space from the screen we kind of line trace we calculate the the position where the the grabbed location should actually be right so this is where the grab location should be not worthy as the center of the object should be and I'm gonna elaborate that further afterwards right so now we have a physics handle and we want to update it so it's called set target location like this you know we simply put this in so that should do it okay so the anchor that we put from here we're just gonna move it somewhere over here and then because it's the physics can handle acts with forces who's gonna pull this part of the object to the end location so I think we can try it like this of course it's not gonna work it's only going to work on the physics objects yeah so it already works so that's like really the minimal stuff so now you can well yeah of course we cannot yeah we cannot let it go because we have to treat this here so when we're gonna release the left mouse button then we have to set the grid grab component to sorry to set it oh sorry to know like this and then we're gonna have to release it so with the physics handle I'm gonna say release component so that should be it for the release I should work this is again and if I release it okay so that words I could pull on the the gears also so you can see it works already well okay yeah so we've got some stuff here that's because we haven't done other things yeah so let's implement the grab for the non physics simulating objects like this one here so I've left this here so we check if it's simulating physics and if it's not we're gonna go this way so we're gonna have to remember the the grab location of the where we actually grab the object because when we grab it we're gonna have to set this well you know what let's just grab I was just update here so we have the same branch here if it's simulating physics let's move this to the right like this so if it's not simulating physics let's just set its location right so we'll take the come grab component and we'll say set world location this is it's a very simple calculation but it's gonna actually we're gonna make it more precise afterwards so we're you the same thing that we calculated here so they just put on the left here so we can use it um yeah just put it like this and I will use it here right so we'll see what happens when we grab this object let's see so I push G then I click and then I can move it now what you can see is actually that that when I'm when I move the object first when I click it snaps to the middle and that's because when we set the here the the location we set it to the middle of the object right so when we click the first like here we're gonna have to remember this point into the with the relation to the center of the objects then we when we go somewhere and release it then we're gonna have the this point here already in the world space and we'll have to calculate this one right so like the grab point here we're gonna have to pass into the relative coordinates of the objects of the object of the component and then we when we release it we're gonna have to take it back no actually we're gonna have to transform the the destination point back to the center and then set the center right so when we go back here instead of this this one here we're gonna have a calculated version of that one right so let's see how we can remember this so we're gonna have to remember the grab location in the contain the coordinates of the Grad component so we'll say relative grab location and we'll put this a vector okay so we're gonna have to set this here right so what do we say is two so this is the location relative to the center of the the trace location the hit location to the relative to the center of the object so this normally ish what we can do is take the transform the object and apply an inverse transform this one but it doesn't quite really work as I want it to so what we'll do is take the hit component and then get its location a world location and then we're gonna create a transform for this actually it's gonna it's gonna it's gonna create a transform on its own so the the location where the hit happened is this one so we're gonna take it and we'll say inverse transform location right and then we'll connect this here so this is gonna transform the location into it and a transform actually so now come over here so let's go over this again let's put like this cuz it's more about something like this I don't know wow let's say that's good okay so let's go over this again so we have the hit location this one which is in the world space and then we have the location of the as I think we'll do like this so we can understand better okay I think that should be okay okay so the world location of the object is this one it's to the origin of the world so like X Y Z right so it's like a could be like a hundred one hundred and a hundred and we make this that a transform here what that will mean is that the transform would be considered like having an object if we applied this transform from here to an object it's like it would add like the object it's at zero zero zero and it will just add those coordinates in and then it will bring it here right so if we take any object and we applied this transform it will bring the object here at this position okay so if the direct transform means that we add this the inverse transform means that we get this back to zero right so did so if we invert that we get this object back to zero so taking the the world location of the heat from here this one here and if we imagine that this one that the cube has like transform like 100 100 and 100 on each X X Y Z and the hit location had 200 200 200 and then if we if we apply the inverse transform that the the hit location will actually be calculated in relation to the center of the object so it will just subtract from the other one now it will be like 100 100 900 but it's just going sidered it's the same like if you put 300 for the hit location it's gonna be 200 right the result so in short we're taking the world location of the heat and we're expressing that in the relative position from the center of the object that we hit so that's what we have here relative grab location okay so now if if we understand it then it's going to be really simple so what we do here in the in the in the event ik we're just gonna do the other way around so we have the world location where we want the grab location to be so this location would be here and then we want to subtract from that actually transform it back and get the world location of the destination location of the work the object right so for that we're gonna consider we're gonna transform this let's see will will transform so this is the world location where we want the grab location to be so this will transform this using the relative grab location right so we'll say inverse transform location like this one so we'll take the the world location from here let's just cut this and from here we'll just connect this one so that means that from our like coordinates here in the new location we have these coordinates we make a transfer from that and then we zero is zero in on this the new center of the object and that's and this is gonna be in the world coordinates right because it's a world coordinates and we apply the relative inverse transform to that and we get the world coordinates the new world coordinates for the object so yeah it's more it's more complicated but I think I think we're okay let's go here and we put G and I grab this now as you can see and just works right so when we grab the object we actually grab it from the location that we where we hit the object all right and not from the centre okay so that's good I'll just ignore this for now okay so this is good we have this done and this one and now we have to we have to see how we can do about the skeletal meshes because we free if we grab this skeletal mesh you see it doesn't grab it from exactly from where we want it like from here doesn't grab it from the leg grab it from the centre that's because when we grab here skeletal mesh is considered one single component but it actually has a lot of bones right so when we grab it we actually grab it from one we should grab it from a certain bone like like the hand here and so we'll have to give it that information so if we go back here into the left mouse button right we have the split for the non physics objects and for the physics objects and so here we're gonna have two as you can see there is an input for a bone name so we're gonna have to give it that okay that bone name is actually here when we hit it actually gives us the bony but we're gonna have to remember that so because back here yeah it's good here and then let's see if it's if it's a skeletal mesh I'll check that cast actually cast two skeletal mesh sorry about that it's actually just two skeletal mesh component I'll just take this one well you know what actually use the variable cast little mesh component like this okay now if we are not if it's not a skeletal mesh well actually both will go in here and we'll see how we can make this different from for each case right so the bone name we're actually gonna remember it because we're gonna suit some stuff with it in in the event ik here you see for the other one we before I showed you that there is a line that we draw so we're gonna need that so we can draw that line okay so let's see here bone name I'll create a variable bone name like this and we'll put that to a name it's not a string by the way so let's just set it here and only when the cost works we're gonna remember this right so the bone name we'll take it from here and we're just pop it in here and we can collapse that and then we have the variable and just put it in here like this so now it should already work right I should already work and if I remember correctly right now if I grab its foot like from here as you can see it already works and now it doesn't pull him correctly that's because the foot because of the physics implementation so because it's the pole force is relative to the mass of the object so since the foot it has really low mass then it's not gotta affect the other words anyway but yeah so it actually works yeah so actually made it work for all of them now let's see I have before I had also I was drawing a line from the grab location to the actual component we're gonna implement that and let's see what problems we have here let's see what what it says here so it says X is non tried to grab component well why is that grab component yeah so we we do actually have to check here I actually have to check if the grab component is is valid like this actually like this yeah that's why we have D so it's not valid so we could be in grab mode but not have grabbed actually an object so now it should work without giving arrows yeah let's try again yeah no errors okay cool so now that we fix that what we want to do is trace a line from the grab location to the actual object so this is gonna be kind of the elongation of the physics handle by the way if you want to set this up then you can click on the physics handle and then set this here to whatever you want if stiffness damping all of this and yeah just play around with this and see what what do you wanna be chief right okay so now we won't trace the line from where we grabbed it to where it actually is so this the we're actually gonna need the relative grab location because it's gonna be grabbed from let's say the shoulder right here and then when we go here really fast then our physics handle will be here but it's gonna be the object will be here until it actually arrives to that location because it's not instantaneous like this one like the non physics object where we set the actual location here we just set the target right so we take some time till it gets there so we're gonna have to remember this location and do the same thing kind of what we did for them on physics objects and then draw a line from here to here right so for that we're just gonna remember this like here but I like this one we can actually use for this case just the the transform of the object so for that I would say get transform world transform actually yes and so we have the world location in order to pass it in to the coordinates of the component self then we're going to take the transform of the component we're gonna invert that and apply it to the world okay location here and we can actually do that just got this here and we'll say inverse transform location right so that's it's gonna transform it's gonna apply the world transform of the component inversely so that means it's gonna subtract so this what we have here is actually the relative grab location that will be done for this object so we're gonna set it again here like this sorry we actually move this sorry about that whoa okay so we'll do this right now let's yeah so now we have the relative grab location if we go into the event take here then we're gonna have to calculate draw the bug line so from here draw debug line like this it's very cool because we can it doesn't show in-game and it shouldn't because we can use collapse that okay we can actually use a mesh for this but just really this is really quickly and you can actually see stuff farewell because when if we go back here and push key and then as you can see it lags behind the the cursor and you don't know exactly where you you grab it from so this is gonna be useful okay so lines start this is doesn't actually matter the order because it's asymmetrical so let's say from the line start we're gonna go with the destination so we're gonna take this right the destination or grab location actually right and the line end is gonna be and the relative grab location we're gonna calculate it inversely so now from this we're gonna say so this is the relative location to the object and was gonna we're gonna have to take it to a world location so take the grab component or get the world transform like this and then I'll say transform location and then we'll link this here let's try it out so if I grab this doesn't work that's because we have to give it the duration here one only and I know sorry the duration is good because it's gonna be one frame right let's put the zero here I think because it's one frame like this I actually need to give it the distance let's say five thickness sorry about that okay let's see this again yeah so you can see it's a black black line right so as you can see exactly from our rail grab it grab it from the corner here and you can see it actually grabs the cube from the corner right okay now last thing we want to fix is we grab a skeletal mesh as you can see when I go grab it from here is from the center of the the component that's good works fine but when I grab it from the end like this it's actually skewed really and it's it's really weird and that is because when we grab the component here we are using we we actually grabbing the the bone and we're using the transform of the component and this is not good because and when it calculates back then then it it just calculates back to the position of the whole component but the the bone is actually moved in the meantime so we are grabbing it from the correct location because we don't actually change it the physics handle remains anchored to the same location relative location actually to the bone but when we draw the line we draw it in the wrong place all right so let's take him I can fix this so here let's go back so here when we cast two skeletal mesh component then we have a skeletal mesh here so we're gonna have to let see here we're gonna have to remember I think we're gonna have to remember if it's a skeletal mesh yes okay so let's create skeletal mesh boolean here like this so this we're gonna use to create we're gonna have to recalculate this but we're gonna need a flip-flop or a boolean to remember if it's skeletal mesh or not so for that I'll go here and we'll say I will actually set this right so set by default it's going to be false but they make a pile false right so if it's a skeletal mesh if they the cast works then we're gonna set this and to true like that okay and now that we have this we can go here and from the component there is a certain method gets orchid transform this one so this will give us even if it's named get socket transform is actually if you look in the documentation it's either a socket or a bone right so instead of this we're gonna give it this so the same thing will go for an in the inverse transform location right but we're gonna have to switch from here so let's put it the bone name like this okay cool oh yeah so the transformed space is going to be world there are some other stuff but this world is what it's interesting for us so if we're gonna put a select here and the choice is going to be from if if a skeletal mesh is true right gonna put this in here so if it's true we're gonna take the transform of the bone if it's false then we're going to get the transform of the e of the component itself right so since we have actually casted it here we can use this directly right it's no problem it's not gonna give us an error because we know it's actually cast correctly and this doesn't actually need the skeletal mesh you just need a scene component so yeah apparently works okay so if we plug this here that should work now if you take this we take the same thing and we copy it over to the to the here to the calculation of the line trace a line debug line right I'll just say this so the target is gonna be the component bone name same from here select mesh so we not gonna have to recalculate it again because we have it already right and then here from the falsehood they keep this one and wait sorry this is not correct this is actually that's actually like this we know that I made a mistake so this is like this and the location it's correct so this is why because if I don't keep things proper and then we're gonna get problems right so we'll transform the same location the relative location either to a bone or to the component itself right so let's put this to say [Music] I've trade again same component looks cool and now if we grab the mannequin again from the foot like this then you can see clearly that it grabs it from where it actually should be right so it actually grabs it from the bone itself okay so that's good this one works this one works so if everything works now the last thing that I want that I said I would show you is the okay so what we actually coded is here alright so I said I will show you the pawn location and direction update so this is normally you would do however you want them to do do them right but when you have the when you activate the mode like when I press G as you can see I can move around now if I press G then I I don't move I don't move the item look at stuff I just moved the the mouse right I could I can move with the the location but I I cannot look around because I have to select objects right so here normally should have these like input axis if you have a project like a default project you have these already set up right so if you take these and you just branch out like from I'm not going to create them again because they're very simple right so you branch out depending on the grab mode so if you turn if there is no grab mode the on then you don't if the grab mode is activated then you don't do anything if it's not activated and you just input the U and the pitch for the control and this is going to make the player look around right and the other one for moving it's also simple like this and you just just have a look at it I'm not gonna recreate it again right so this is to update the movement so it's the input axis and then you add how much you want to move around and then you add the actor world offset okay so that's it so I hope this was useful and yeah I'll see you in the next one bye

Channel: Lusiogenic

Views: 24,015

Keywords: Unreal Engine 4, UE4, tutorial, how to, game development, unreal engine

Id: XVND_jo-kNo

Length: 64min 36sec (3876 seconds)

Published: Wed Jan 15 2020