How To Create A Top Down Drag Camera Movement System In Unreal Engine (PC and Mobile)

hey guys and welcome back to another unrelentioned 4 and 5 tutorial so in today's video what could be going over is how to create a top-down camera movement system as you can see on screen now so essentially what we're going to do is to play can drag their mouse or their finger across the screen to be able to move the camera as you can see here so this is typical of city builders or any kind of top-down game like that where you want to just drag the camera so this is going to work for both PC so we can use our Mouse and this will also work for mobile so you can use your finger as well if you wanted either one you want to set up this system will work perfectly for both as we've got both in mind when setting it up this is what we're going over and creating today so what I'm going to do is just go into an empty project and then we'll start working on this so you can see I'm just in the empty blank third person template project here the first thing I want to do is I want to go to edit and project settings I'm going to create an input action for this event so go down to input we'll create an action mapping and I'm simply just going to name this one drag camera you can aim this whatever you want but drag camera works for me and I'm going to select the key value of left Mouse button and we're going to add another one and have this be Touch One so now it's going to work for both PC and for mobile obviously use whichever input actions you want but these ones make the most sense then we're going to close this and what we want to do is we want to create a new player so obviously we don't want an actual player we want to just be a camera so what I'm going to do is let's just right click and create a new folder called top down in here I'm going to right click create a blueprint class and I'm going to create a pawn I'm going to name this one BP underscore camera controller as that makes the most sense for me then we're going to open that up straight away in here it's actually very simple so what I want to do first is again obviously we don't want a character itself we just want a camera so we're going to add a components adding in a camera and all I'm going to do is set this to have a rotation of 45 degrees or minus 45 degrees on the Y so it's going to be looking down at a nice angle like so we'll compile save that minimize it and then I'm just going to grab my player start and just move it up into the air a little bit like so now you probably want to do a bit of messing about with this to find the perfect height but let's say looking down 45 degree angle I think that's going to be right for me maybe a little bit higher but I think something like that is going to be perfectly fine then we'll go back into our blueprint here and go straight over to the event graph what we want to do here is we can delete event active begin overlap and come off of event begin play here we want to right click get player controller and all we want to do here this is mainly just for testing but if you are doing it on a PC you're definitely going to want to do the first part of this as well so at the return value we want to set show mouse cursor I want to take that so it's true that's obviously we want to drag so we want to actually see where the mouse is then we also want to drag out of this and set enable touch events connect that in there ticking that so it's true as well like so and that just means we can use our Mouse as a touch vent so we don't have to connect a phone in and do all that we can just use our Mouse instead so that will then work perfectly for us and then the final stuff we need to do is we just need to actually do the code for controlling and moving the camera so we'll move event tick down as we are going to use that but not straight away first we want to right click and get the action mapping we created so I named mine drag camera so we have that there like so then all we want to do here is just get a reference where the player's Mouse currently is so to do that we need a variable so you're going to hit the plus variable here and I'm going to name this one previous touch location that name makes the most sense for me but you can name this previous you can name this first whatever it is but I'm calling it previous because we're also going to get a new one later on we want to set this variable type to be a vector 2D so we have Vector 2D here like so then I'm going to hold down Alt and drag this in to set it setting it off of pressed like so then we're going to right click get player controller out of the return value of this we're going to get input touch state with the finger index being touch one or whatever it is that you've set up before then we're going to do is location X and location y want to be the X and Y of our previous touch location so very simply what we can do is drag out of location X and make Vector 2D with the X going to X Y going to Y and the return value going into previous touch location like so that's all we need to do for that part is as simple as that now if you want to be doing on PC you're going to have to do it a little bit of a different way so what you can do instead is right click and get mouse position on viewport right click the return value and split structure Spin and you have the X and Y there or as you can see this is already effect 2D so you can just connect that to there and then plug this straight into here like so so it is a little bit easier but it's just also a different way of doing it so I hope that makes sense that's how you do it on PC this is how you do it on mobile then we want to come down back to our event tick event the first thing we're going to do here is we want to see if we are currently holding down our input so I'm going to copy and paste get play controller get input touch State and make Vector 2D here copy and paste them down here and again what you're going to want to do for PC is instead of get input touch State you're going to want is input key down and then again the get mouse position on viewport again so it's slightly different but those are the ways to do it and then we're going to hold down B left click to get a branch connecting it into event tick there with the condition being is currently pressed from our get input touch State or the Boolean return value from is input key down if you're doing on PC then we want to create another new variable naming this one new touch location so we had previous now we've got new and we're going to set that off of true of the branch with the new touch location being the return value from on make Vector 2D there I'm just going to double click these lines to get some root nodes just keep them looking nice and organized like so so when we first press down our input we're going to be getting the location and then whenever we are holding it we're going to be setting the new location so we can find out the difference between the previous and the new so we can move the camera accordingly so how do we actually move the camera well to do that we want to drag out this and add actor World offset because we are just moving the camera this player the blueprint that we're currently in is a camera but we now need to find the location to do that we just need to do a little bit of maths so we're going to get the new touch location and get the previous touch location like so then we're going to do new touch location minus so get subtract minus the previous touch location like so I mean the right click the return value and split the structure pin so now we have new touch location minus previous touch location and we have access to the X and Y values now what I'm going to do here you might want to change for your own personal needs but I'll show you how to do that and how to find out what you want to change it to so what I'm going to do is out of X is get a multiply and we want to multiply it by minus one this is just going to invert it as for me I found that the values were inverted so I just inverted them again to get them right for me and then we're going to right click and make Vector like so with the return value of this multiply going into y so this isn't going into X it's going into y and then the Y from the subtract is going to go into X of the make Vector now again that might seem a little bit backwards to you that is just because of how I want the camera movement to be set up but once again you can customize this for your own needs which I'll show you in a second Zed we're going to leave as zero this return value will go into the Delta location of the add actor World offset like so then all we need to do is just set the previous touch location to be the new touch location so we're now updating the previous touch location to be the one we just had and also we have a new one now so we need to update the old one to be what currently was the new one but it's now the old one hopefully that makes sense that probably didn't sound like it made too much sense but hopefully it does and hopefully you understand what I mean so if we compile and save that that should now be everything done so let's minimize this and what we need to do is just obviously change over our current character to be the new character so we're going to our world settings we go to our game mode override and just set the default Pawn class to be BP player controller or camera control I think I could actually there we go and let's just hit play now you can see we're up in the sky we have our mouse cursor and if we to drag nothing is actually happening at the moment so let's have a look at why that is so what I found is it actually isn't registering the touch one finger index so what I can do is I have to minimize this slightly and I have to try and drag you'll notice this is firing off but this one isn't so it's not coming off of true of the branch which means is currently pressed is false full finger index touch one so let's have a look at why that is happening I have just remembered why actually there is a project setting we do need to enable for this to work so very sorry about that I did forget but we'll go back and do that now so we can do is we can simply just search for touch and now we have use Mouse for touch we'll take that and now this should work so we hit play We Should now see we can drag our Mouse like this so we have these options here that's just don't worry about that that's just the debuff mode but we can see that what we can do is drag our Mouse and it's going to be working perfect like this so notice for me as I drag this way it goes left this way goes right this way it goes backwards this way goes forwards that's because of how I've set it up if we go back in here and let's say x goes into X Y goes into y we'll see what difference this makes and why I've got it set up the way I have so now if you were to drag it like this up goes left down goes right right goes backwards left goes forwards that doesn't make sense so that is why I have inverted it the way I have and also let's say x goes into Z instead of into Y what we'll see is it's going to go up and down when we do that as well so you can have that if you wanted to but I don't I want it to just be the way I had it set up initially which is like this so trial and Eric just gets it the way you want and also if we were to not invert this so let's just multiply it by one instead of minus one you'll see that it's going to be going like this instead which you might prefer that but I found that that's not typically how it does control it how it does work but again if you did want it that way you can set it up like that just get the perfect values for you but for me these are the perfect values so I think that'll be it for this video if you've done everything we've wanted to do what we've done is as you can see on screen right now we've set up a mouse camera drag system in which we can drag the mouse across the screen which will also work for finger inputs as well to then be able to move the camera in a top-down system like this and I've shown you how to customize it to change how this all works too so thanks so much for watching this video I hope you enjoyed it and I hope you found it helpful and if you did please do make sure to like And subscribe down below so thanks so much for watching and I'll see you in the next one [Music] oh [Music] foreign

Channel: Matt Aspland

Views: 10,340

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, blender, unity, games design, ue5, unreal engine 5, unreal engine 5 tutorial, ue5 tutorial, top down, camera, movement, system, drag, mobile, pc, finger, swipe

Id: s7lopptq5gg

Length: 11min 43sec (703 seconds)

Published: Fri Apr 07 2023