Mobile Joystick with NEW Input System and Cinemachine - Unity Tutorial

today we'll be going over how to make a third person controller for mobile systems so you'll be able to look around the player by swiping up and down at the top half of the screen you'll also be able to move around by using the joystick and you also have this button to press to jump around so you can look around the player and when you start walking again it'll face to look in the camera direction and you can also test this in the unity editor right now i'm using the wasd keys and the jumping keys and i'm using the mouse to look around the player so that's one of the benefits of the input system is that you can easily change between devices to be able to test with barely any additional work so let's get started i'm using 2020.1 version for this tutorial it's the newest version that just came out there's a couple of things that i've done to prepare the first thing that i did was go to file build settings and i switched my platform to android and if you don't have the android installed just go to your unity hub screen and then installs and then go to the version that you're currently using you press these three buttons add modules and then you will be adding in the android build support the android sdk and ndk as well as the open jdk and it will automatically set those values in the unity editor so that when you build your game it will use these tools and if you're using ios you do the ios build support this will build it to xcode and from xcode you're going to export it to your iphone or ipad so right now you can see i have my lg g5 connected here make sure that your device has development mode running it can differ for each device i recommend looking online how to enable developer mode on your phone and you also have to connect your phone to your computer via a usb cable and make sure you give your computer access to your phone so when you plug in your phone for example on mine says allow this computer access to this phone i just click yes and then you'll be able to build stuff onto your phone another thing that i did was go to window package manager and in the new package manager you have to go to unity registry and it will show all the packages in the unity system so i'm using the new input system which just came out of preview and is now verified i downloaded it down here i just press install and after a while it tells you to restart the editor so you just click yes and it will restart the editor and another package that i installed was cinemachine which is the camera movement system that unity made and we'll be using that for our tutorial and lastly i'm using urp universal render pipeline which i just selected it when i started so when i clicked on new project i just selected urp right here and it comes with this default scene with the post process volume that's why it looks so nice and then i just added an empty game object for my player and then as a child i added in a capsule so we can actually have our player and there's a reason that i'm making the player an empty game object and the capsule have the mesh on it and i'll explain that later and then i just made a cube as a child of the capsule as a kind of like a little vr headset to so we can see where the character is facing all right so let's get started so i'm going to make a folder here right click create folder i'm just going to call it sprites and i'm going to be importing this white circle png and i'm going to use that as the joystick so in the texture type we want to go to sprite and then i'm just going to set the compression to none so it doesn't compress the quality and i'm going to click apply and so now you can see the white circle png and you can actually get this through the input system so if you go back to the package manager and go to input system they have under their samples they have a touch samples right here and it has four different projects inside of it using mobile touch system um but my moderator for my discord channel found out that when you import that samples it will change your physics collision so in here it will remove default collisions so i just want to make you aware that if you're using the samples make sure to enable your collision or else your collisions will not work all right so let's make a ui so we can have our joystick so let's right and let's create a canvas and for the new input system we want to go to our event system and we want to click this button here replace with input system ui input module so i can use the new input system then under canvas let's right click create ui image and i'm going to be using that white circle i just imported so just click that little button right here and click on the white circle and then we're going to want this to be on our left side at the bottom so we can click this anchor presets and it will anchor it to a certain part of the screen so when the screen size changes it'll keep its relative position so we want to anchor it to the bottom left and we also want to set the pivot to the bottom left because once we do that the starting position will be down here at zero zero so we can press shift and we're also going to want to press alt so right here it says set pivot for shift and set position for alt so then we click the bottom left and it will set it here and now you can see that since our pivot is at the bottom left we start at position 0 and 0 and it's at a good position and then let's just move it and then let's just move it by 50 to the x and then 50 to the y and then i'm going to go to the open emoji site which has really cool open source emojis and i'm going to download this white circle as a png i'm just going to drag it into our sprites and i'm going to make the same process so texture type sprite and then compression to none apply and then under our joystick which i'm going to rename joystick i'm going to make a new ui image and i'm going to put in the new sprite and for that joystick i put the max size to 64 so it made it a little bit more blurrier so it can blend in better with the other sprite and then in the right transform you just set the pivot to the middle and it's already there because it's a child of the bottom left so it'll move with the joystick and then this is the actual joystick that we'll be moving and let's set the scale to 0.5 and then 0.5 so we can make it a little bit smaller and then i'm just going to make another ui image and i'm going to put it to the bottom right so press shift and alt bottom right put the position to negative 50 for the x and 50 for the y and then for the source image let's put in that same button and i'm going to put the scale to 0.5 and 0.5 so i'm going to put the position y to 60 so it looks a little more aligned you can play around with the values so you see when we expand our game the buttons move according to the screen alright so let's actually get started with the movement so let's go to assets scripts and let's make a new input action so right click create go all the way down to input actions and let's call this player and i've made several videos on the input systems so if you're interested in learning more about how this works i'll put it in the description and let's make a new action map i'm just going to call this player main and then we want to have three actions we want to move around we want to jump and lastly we want to look around so rotate around the player by swiping so i'm going to put the action type to value so we can select the control type which is vector 2. and for jump we just want that button so that's fine and for look we want to have also a vector 2. so for our move let's expand it and we want to set our binding to a gamepad left stick and this is really interesting because the input system comes with a joystick that we're going to use and then with that joystick value you can override any other value that you're using so in this case we're going to override the joystick for the movement with the left stick of a gamepad and then you can actually use a gamepad with your iphone or your android device and it would work the same and we'll also add in a binding a 2d vector composite to use for our wasd keys so we can test it on our keyboard so we can listen on the path w we can press down listen s left listen a i'm just setting the wasd keys here path listen right so d w a s d for our jump we only need one binding which will be our space bar so we can actually type it in as well so you can press space bar here and we're going to override that with the input system and for our look we're going to put our look to the right stick of a gamepad just like you would do if you're playing an fps shooter you look you move with your left stick and you look around with your right stick and then we can just save that asset and we can click it and generate c sharp class apply so then we can use this script in our player controller but before we do that let's actually override those values so we can go to our joystick so we can click our image joystick and then we can add in a new component and we're going to add in an on-screen stick and so the input system comes with this on-screen stick where it has this movement range and a control path we can open it up to take a quick look at it so here they're adding in an on-screen stick component to the menu so you can put it on your component and then they implement a couple of interfaces here so this these are the ui interfaces so whenever you're clicking down you're clicking up and then whenever you're dragging something they have events for that which you can implement and they're implementing those functions right here the main thing they're doing is deriving from on-screen control and this is what allows them to override those input system values so for example here on onpoint or down first they get the position of where you're pointing down and they store that then on drag they're calculating the delta while you're draggings so they're taking your current position and subtracting from where you press down which they set up here on the on pointer down you can see it says out and pointer down here which means that they put in that value into that variable they're clamping that delta value they're adding it to the start position and then some more mass they send the value to controls this is the important part this is where we'll be overriding the gamepad controls by sending in the values from this script to the input action and same with on pointer up they stop the dragging motion and then some extra fields here and it's very similar with the button as well so we can now select a control path and we can go to gamepad and since this is our movement we can say our left stick so it will override the vector2 value for the left stick then for the other image which i'm just going to rename to jump i'm also going to rename the other joystick to move i'm going to add in an on-screen button and same thing we can do the control path in this case i'm just going to say space so we're going to override that space and you can also for the jump you can add in another binding if you wanted to use a gamepad so you can say gamepad you can choose any button you want you can say button south for the jumping so now when you attach a gamepad it will use those controls and then finally this is uh the tricky part we're gonna use the joystick to actually rotate around the player so let's add in a empty game object i'm gonna put it to the top of the canvas so it will not appear over the other two buttons and i'm going to rename it to look and then let's just add in an image we're going to set the top the anchor to the top so shift and then alt alright and then let's set the width and height so let's try 1000 and then let's go with 350. so this is the area that we'll be able to swipe to look around and for the image we don't actually need the image we just needed the rect transform so we can disable the image but i'm just going to click on the color and put the alpha all the way down to zero so it won't be appearing and then add in another on-screen stick and change the control path to gamepad right stick so we actually press play um we can actually move the joystick around nothing will happen because we have to program that we can also press the button and you see when we're moving around the top part that image is moving around with it but we won't be able to see that we're just getting those drag values for when we want to look around the player all right so let's implement that movement so right click create c-sharp script player controller and then we're going to make this easy for ourselves so let's go to our player let's add in a component and let's add in a character controller so unity already has a character controller for you to use it's physics free so it doesn't depend on physics they it implements its own physics and we can actually send values to it and it will move our character accordingly all right so i opened up that script i'm just going to delete these comments and let's activate our input system so private player player input then in our awake we can say player input equals new player we also have to have it on on enable playerinput.enable we have to enable our input action and we also have to say on disable so whenever the script is disabled we do player input.disable and so luckily unity has done a good amount of work for us so i'm going to link this down in the description under their documentation for charactercontroller.move they have a script that actually does what we want to do so we're just going to copy that script because that's what good programmers do because you don't want to rewrite stuff that already exists and is free to use unless you're doing it for learning purposes then that's another thing so right there we have everything we want let's delete the start and update and let's just paste that in there so for our start it's adding in a character controller so we don't want to add any character controller because we already added one in and then we have these variables that we're using here this one keeps track of the character controller attached to our game object the player velocity is going to be used to keep track of our current velocity grounded player will be used to you know check if our player is grounded which luckily the character controller does for you and then we have some variables here which i will just add in a serialized field to all of them so we can change those values in the inspector so we can mess around while we're playing the game and then if we want it to be faster we can do so all right so now we want to adapt this to move to use the new input system so the first thing we're saying is is the controller grounded we're just storing that in the grounded player value if the controller is grounded and the player velocity is less than zero then just set it to zero we don't wanna we don't wanna have a force going down on the player if it's already on the ground because if you do it'll look a little glitchy like as if it's trying to go through the floor but it won't quite go through the floor then here is where we want to change it it's getting the old input system so let's change that vector2 movement input equals then we can just say player input dot our action map which is player.main dot our action which is move dot read value and then let's read in our vector 2. and i misspelled movement here so i'm just gonna change that and let's remove this line here vector three move and we're gonna make our own new vector three which we're actually gonna change later but for now to test how this works we'll just be using the old way so movement input dot x zero for the y and then movement input dot y so we want the y to be zero because this is going to be our jumping and then we're going to be moving on the x and the z-axis because in unity we have the blue is the z-axis and the red is the x-axis so we want to move along these two axes and when we jump we want to move around in the green axis all right and then we just replace that value this is just setting the forward position to our movement so this will rotate the player in the way we're moving which we're not going to use later on but for now we'll just leave that and then here get button jump let's replace that player input dot our action map which is player main dot jump and then we can actually say dot triggered and this will be called whenever the button is triggered on the frame so if we press jump and it's grounded then we do a jump and they just used a physics equation for this it's a kinematic equation i believe and then they're just adding in the gravity times time dot delta time and then they're moving the player with our new player velocity that we calculated times time dot delta time so here they're moving it for the normal movement and then here they're moving it with the gravity and the jumping speed so this is dedicated for the y axis and this is dedicated for the x and z axis and then i actually forgot to do this but in awake for our player controller we actually have to set our controller since we don't do that so controller equals get component character controller so then it will have access to our character controller and i'm just going to copy these variables and put them to the top of the class so we can be a little bit more organized and then i added in the playercontroller to our player game object by just saying add component and then add in the player controller so we can press play now and we can actually move around and if you move the joystick it will move around as well so the reason it was moving up is because the collider is not centered so the character controller adds in its own collider so let's center that upwards 0.95 is a good value and then we can press play and you can see now it's grounded and we can move and when we press this button we jump awesome so now let's add in a camera follow with cinemachine so this is not a cinemachine video because that's a whole topic there's a lot of cinemachine cameras so this is just like the basics to get you started so up here we're going to want to go to cinemachine and create free look camera and the free look camera allows you to override its values so you can see here it has access controls y-axis and x-axis we're going to override those values and that will shift the camera in the direction that we want it to go in so first in a machine it creates a type of camera in this case it's free look and then it attaches a brain so if we go to our main camera it attaches a cinemachine brain which controls the main camera movement and rotation so we can leave those values as it is and we can go to our free look camera and these are the settings to change the main camera you can also change between cine machine cameras it's really cool system in this case we want to have the camera follow our player so let's drag in our player object into follow and then we also want to have the camera look at the player so we can also drag in the player to the look at field so now it's looking at that player not very good though so let's change the values a little bit so they match better so right here there's three rigs bottom ring middle rig top rig these are more advanced settings that we're not gonna need so let's just focus on the middle ring we can adjust the radius meaning the distance to the player so let's put it maybe to 7.5 and then let's put the height to 2.75 so you can see in our player we have this cinemachine camera it's an orbit camera it's orbiting around the player so if we go to the top we can press solo to preview our camera but we're getting an error and that's because it's currently using the old input system right here mouse y and mouse x so we can just remove those values and we'll be putting in those ourselves and then let's select the game window guides so it'll show you how the cinemachine is currently set up so basically this is the center of the camera it'll try to follow the character by positioning its center to follow the character and then it won't allow the character to go past these red bounds and then there's some extra lines here and those serve as dead zones the player will be allowed to move in the dead zone and the camera won't follow the player while it's in the dead zone but once the player moves out of the dead zone it'll continue to follow the player so in this case for our middle rig i'm just going to select an offset so i'm going to put the y offset to 1.75 so it looks a little more forward we can also change the screen y to change the screen y position i'm going to set it to 0.54 you can mess around with these values i'm not going to set any dead zone width or height and we can just test out how that's going to work out by pressing play so you see we're moving and the camera is following us very smoothly which is awesome and you can see the camera moves up when we jump all right so once you've messed around with those values let's actually do these look around so let's right click create c sharp script camera look going to delete these comments and then we want a reference to the cinemachine free look so at the top we're going to say using cinemachine i'm going to erase these two using statements since we don't need them and we can also say require component type of cinemachine free look and so you won't be able to add this script unless you have this already attached to a game object and if it doesn't have it attached it will add it for you so then we can say private cinemachine free look cinemachine so we're going to keep track of our cinemachine camera and then we also want to have a reference to our controls so private player player input and then i'm just going to copy from our other script our honest on disable and on enable as well as the awake function so this is just setting up the player input and i'm going to erase this controller since we don't need it and you don't actually have to do this you can make a input manager so you only have to instantiate this once and then in that input manager you can just read those values from the manager instead of having a bunch of these everywhere but for sakes of simplicity and time i will just instantiate it in each script so and are awake let's also do cinemachine equals get component cinema machine free look i'm going to zoom in so it's easier to read and then we can delete the start in our update we can read in the value so vector2delta playerinput.playermain.look.readvalue vector2 and i named it delta because it's basically giving us the delta between our on pointer down and our current position and then we can say cinemachine dot m x axis so we're changing the x axis value manually plus equals so we're adding to that value let's add in the delta x times a look speed that we're going to declare right now times time dot delta time and let's also do that copy that to the bottom and replace that with the y right here and then delta dot y we have to declare the look speed so we can say serialize field private float look speed and we can just set that to one for now so all we're doing here is we're changing the cinema machine values manually we're adding in our delta position that we're reading in with the input and we're timing it by look speed and times out delta time and i'm just doing this in advance i'm also going to multiply the x-axis value by 200 i found that to be a good value for mobile and you can change that value you can also mess around with the look speed variable and there's other variables here in the x-axis it also has a speed that you can set a max speed you can set the acceleration but i'm not going to mess with those values i'm just setting it in the script so in our cinema machine we can just add in the look so camera look and you can set in the look speed however you want and you can actually click play and we can actually look around the player now with our mouse and you can see that it follows this orbit and then when you look up it'll follow the orbit upwards so we can just drag up and you can see it follows that orbit and it's actually a lot less slower on mobile but since the mouse is so fast it looks fast pretty awesome so once you're done playing the game just set the character controller center to one so it's on the floor it was floating a little bit all right and then the last thing that we want to do is change our player controller script so that it moves in the direction of the camera so go back to player controller go back to update and then instead of this movement let's actually do something a little bit different so let's say private transform camera main and i'm going to store the transform for our main camera so camera main equals camera.main.transform so it doesn't have to search the scene each time you call camera.main in our move we can say with this nice neat little trick camera main dot forward so this is the forward position that the camera is pointing at which is going to be the same as the player times movement input dot y and why is it y well we're using the y as our z movement and since forward is in the z axis we have to multiply the movement input dot y by the forward vector and then you add in the camera main dot right times the movement input dot x so you take the forward vector of the camera you multiply it by your input and then you take the right vector of the camera and you multiply it with your input as well and this will cause it to move in the correct direction it'll even allow you to move diagonally since it's taken into account both the forward and the right vectors and then we can say our move dot y to zero since we don't want to move in the y direction with this statement all right so now we're testing it out so let's move around the player and then when we start to move the player starts rotating in that direction and we actually want to have the player rotation match the camera rotation when we start to move and that's pretty simple so we can say if movement input does not equal vector 2.0 so if we're moving and let's do this at the end of everything else then we rotate our player the issue is if we rotate the main player it will cause the camera to rotate along with it since it has the look at property of our player so that's why i put in the mesh as the child so we can actually rotate the mesh and not the parent object so let's say private transform child and then on start we can say child equals transform transform.getchild zero dot transform so we're getting the transform of our first child so this is the index zero so this is going to be the one at the top of our hierarchy which in this case is the capsule you can also assign it by dragging and dropping if you make it a serialized field but this is easier and then we can get our rotation angle that we want it to rotate in and we can do that with a quaternion so quaternions manage rotations in unity quaternion.euler so you can see here the euler method returns a rotation that rotates z degrees around the z-axis x degrees around the x-axis and y degrees around the y-axis applied in that order so we can input our angles that we want it to rotate it in and it will turn it into a quaternion for us and then we can just assign that to our mesh so let's put in a new vector3 and the only thing we want to rotate it is on its y because that's the axis that we want to rotate it in to look sideways so we can already store in the current rotation for the x and the z so child dot local euler angles dot x for now i'm just gonna put zero for the y i'm gonna change that right now child.local euler angles dot z and then for the y we can just get the euler angles of the camera so camera dot main dot local euler angles dot y so all we're doing is getting the current y rotation of the camera and we're going to apply that to our child and so then we can say child.rotation equals and then instead of just setting it directly which we can we can actually lerp to it so quaternion.l so it looks more smooth we say child.rotation since that's our current rotation so for the lerp we have to provide the starting point of the lerp which is our current rotation and then we provide in our new rotation which is the one we just calculated and then finally we add in the float t which is kind of like the speed at which it lurks in this case we could just do time dot delta time and then we can times it by a rotation speed which we're going to say up here let me just copy in this gravity value and change it to rotation speed and then i'm just going to set it to 4. you can play around with these values of course i forgot to remove the this part here where it changes the forward direction of the player we don't want that because that will mess with our rotation quite a lot and one thing i forgot which is why it's a little strange it's in the canvas scaler i had to put the scale with screen size and let's put in the 1920x1080 for our reference resolution and this will make it so that it scales accordingly and then we can set in how much we want it to match so in this case i just want it to match on both sides equally 0.5 so as you can see the match determines if the scaling is using the width as height or height as reference or a mix in this case 0.5 means both of them equally and then another thing that i just forgot to mention was that you can also adjust the spline curvature for the camera so right here in the cinema machine you can adjust that spline curvature to make it a little bit bigger or a little bit smaller and so we click play we can look up we can look down sideways we can move with the joystick and we can jump lastly you can just adjust the ui so it can look a little bit bigger because right now it's looking a little bit small so you can just put the scale to two and two for the joystick as well as the jump you can just put the jump to one by one all right and then you can just say file build settings player settings here under the player settings it allows you to choose the orientation that you can rotate your game so i don't want it to be in portrait so i can just deselect those two portraits you can set your product name here so that's the name of the app um your company name and then you can add in an icon there's a couple of other settings here as well one of them that you'll need to take note of if you're going to upload to google play store is the api level they require a certain api level and you're going to have to select that for the minimum one and you're also going to have to select a package name so you put in com and then your company name and then the name of your application so we can just say build and run once you select your device here and make sure the scene is included here build and run i've made a builds folder here and you just name it whatever you want and save and then it will build it onto your phone now when you export it to mobile you can look up and down look sideways and then the joystick works correctly and when you move it it starts moving forward into the camera direction you can also press the button to jump you might want to make these buttons a little bigger you can also mess around with the camera speed the camera spline and the camera radius adjusting those values will allow for a smoother transition there's a bunch of other values such as damping and you can just play around with those so thanks so much for watching i hope you enjoyed this video i spent quite some time getting this to work and it's still a little bit tricky especially with cinemachine but i'd like to thank my patrons for their continued support they really helped me and if you're interested the link is in the description to my patreon i have access to source code there as well as early access to videos and exclusive devlogs for an indie game i'm making so once again thanks for watching please like the video if you enjoyed the content and subscribe to get notified on new videos and see you next time

Channel: samyam

Views: 37,012

Keywords: mobile touch tutorial, unity joystick, joystick unity c#, unity 3d joystick movement, unity joystick script, unity joystick tutorial, joystick input unity, unity mobile input, joystick controller tutorial unity, unity3d mobile input, unity new input system mobile, unity input system mobile, input system joystick, new input system joystick, unity third person mobile, unity input system cinemachine, cinemachine input, cinemachine input system, input system 3rd person controller

Id: YV5KOZHsIz4

Length: 34min 29sec (2069 seconds)

Published: Wed Jul 29 2020

Reddit Comments

[u/mounirab]

cool stuff ! sub earned !

[u/BruceBallad]

Awesome

Edit: okay, I found my new favourite Unity channel on YouTube. They made me want to use the New input system.