Easy Joystick for Mobile with Input System in Unity

today i'm going to show you how to easily add joysticks to your game using the new input system and this works on mobile as well so first you need the new input system which you can go to window package manager unity registry and then you scroll all the way down until you see input system and you can just click install here make sure that you have version 1.0 or above i'm using 1.1 the new preview version if you want the preview version just go to advanced project settings in the settings up here and then enable preview packages so once you have your scene set up all you have to do to add a joystick is right click ui and then add an image and i'm just going to call this move joystick so this is the joystick to move and in the canvas i'm going to make sure to set the canvas scaler to scale with screen size with the resolution of 1920x1080 so this makes sure that our ui elements scale as our screen increases or decreases size then in your joystick object here i'm just going to select this here and pivot it to the bottom left so to pivot it click shift and if you also want to set the position click alt so shift and alt and then click the bottom left and now i'm just going to increase the size 2 by 2 the scale here under the rect transform and in the scene i'm just going to move it a little to the side and up so this is your joystick and really all you need to do is add in an on-screen stick component so this comes with the input system and if you already click play you can actually move around this as if it were a joystick if you'd like to increase the range that it can move around in you can set this movement range to a higher value let's say a hundred and now you see that we can move it around much more but how do we actually pipe these values to control so right here under control path you can select a path that you want to pipe the on-screen stick values to in this case i usually go with gamepad so gamepad and there's two sticks the left stick or the right stick usually you move with the left stick so i'm going to select left stick and so what this is doing is basically as you're moving the joystick which is a vector 2 delta so it's measuring the change in position it's overriding the left stick gamepad values so in your code wherever you're reading the left stick gamepad values it'll basically be actually these joystick values and i'm just going to make another joystick for the look so i'm going to click the move joystick ctrl d f2 look joystick f2 just changes the name and then i'm going to select this thing to pivot and set the position so set the pivot shift alt and click the bottom right and just adjust it as you see fit you can make it match the other one roughly and now make sure to update the control path so here i'm going to put gamepad and right stick so now that we have these control paths set we actually need to have these values in an input action and so for that you can just go to your scripts folder or wherever you want and right click and create a new input action just gonna call this player controls tutorial and so for our action map we can just do player this is our set of controls our actions are the actual controls so we have a move action and we also can add one up here at action and we have a look action for the move action set the action type to either pass through or value value is more of you have one main control and this one is if you want to accept any type of control input and for the control type just select vector 2. now here you expand it under no binding you can click here then gamepad and then left stick so this is actually what we'll be reading in our code the joystick will pipe the values to the left stick and then in the code we will read this move action same with the look action type value control type vector2 binding and then just select right stick under the gamepad and you can just save your asset and now once you have your asset you can include it in your code either by generating a new c-sharp class and creating an instance of this class or using the player input component but i'm not going to go over that in this video because that's more of making a character controller which i have tons of videos on if you're interested but to show you how i did it i have my player with a player input component which i've dragged in my player controls which is very similar to the one i just made except with jump included and then in my player controller script which if you're interested it's the character controller.move script from the documentation which i'll link in the description all i'm doing here is reading those values so i'm getting a reference to that player input component right here get component and then here i'm just saying playerinput.actions and here in this case it's the move action that i'm putting in to move and for the look i have a cinemachine free look camera which in the input provider which i also have another video on i'm just inputting my look action which has the right stick gamepad so this all depends on your use case i'm just showing a general way of how i used it and i have a more in-depth video on using joystick with third-person controller if you're interested and so this should work now i'm just going to show you how to get the actual joystick so right-click and create a new folder if you don't already have one called sprites kenny has some awesome game assets on screen controls that are free so we can just download those you can also donate or become their patreon so once you've unzipped the files that you've downloaded there's vectors here so you can change how it looks in a vector-based editor such as inkscape but we want sprites and i like the shaded light ones but there's also shaded dark which look really cool as well and i'm just going to select shaded light this first one here and drag it into the unity assets then i'm going to click it and we're going to select the texture type to sprite 2d and the format instead of automatic i found rgba 32-bit to work better the a is for transparency and we want all those bits to get the full color so just click apply then under the canvas we can select the move and look joystick and drag in our new image and voila we have a joystick so once we press play you see that since i've linked this joystick to the left stick and i'm using that to move now i move and this one is for looking around with the cinema machine camera and i don't really like the movement range to be so high so i'm just going to set it back to 50. and if you want to build this to your phone it works completely fine i have a video on how to build to your phone so i'm just on the android here you can build and run and make sure to just add your scene here and voila now i can move around with this joystick and with this one i can move around so yeah i hope you enjoyed this video and you found it useful if you did make sure to like and subscribe eighty percent of people who watch my videos are not subscribed so let's try to get that number down and i'd like to thank all of my patrons thank you so much for all of your support it's really appreciated these videos are made possible by their help so thank you and so with that i want to thank my new patrons in the enthusiastic tier i want to thank anisi carlos and solo legends thank you so much for your support it's really appreciated and if you're interested the link is in the description i offer source code early access and an exclusive discord chat and if you aren't already in the chat make sure to join we have memes you can post questions or just chat so thank you so much for watching and see you next time

Channel: samyam

Views: 134,411

Keywords: unity joystick, joystick, unity joystick 2d, joystick controller, mobile joystick, unity mobile joystick, unity on screen stick, on screen stick, unity new input system stick, joystick tutorial, how to create joystick, unity joystick tutorial, touch joystick, touch joystick unity, joystick unity, joystick input unity, mobile joystick tutorial unity, unity mobile joystick tutorial, how to add a joystick in unity, simple joystick tutorial unity, easy joystick unity

Id: zd75Jq37R60

Length: 7min 41sec (461 seconds)

Published: Wed Apr 28 2021