Unity 2021 Adding Mobile Joystick Touch Controls

in this video we will explore how you can create a mobile joystick input for your game to have it playable on mobile devices hi i'm peter and welcome to sunny valley studio tutorials in my project right now i have a character that can move using my keyboard arrows i can jump using spacebar and use control to attack and that's what i want to map to a mobile input before we start if you want to learn more about visual aspects of working with unity and our shaders and visual effects check out jetelli youtube channel the link will be in the description to add the mobile input for my game i will use kna assets on screen controls the link will be in the description of this video okay this is my project i have imported the assets and i will be using those flat darks icons first of all i want to start by creating a canvas now i have my player and my player prefab has its own ui because it's ui it's only concerning this player so i'll use this prefab to create here my canvas so i will open my player right click ui add a canvas and i will call it mobile input canvas okay we need to take into consideration how we are going to scale all those elements what we can choose is constant pixel size or the two remaining scale with screen size or constant physical size now i would consider consider constant physical size as well as the scale with screen size here is the example of constant physical size for the 2k screen but if we select a lower resolution the controls will be too big now if i swap it in my settings to be scaled with screen size this might be perfectly fine but for a bigger resolution this might those controls might be very small but i will go with this option so we're going to set the canvas scaler to be scaled with screen size and i will set 1920 by 1080 to be the resolution that i aim for when we have this let's add it to our mobile input canvas right click ui and select a panel so this will be our panel that will represent our joystick we are going to open direct transform settings in the inspector for this panel i'm going to select this anchor preset i'm going to hold shift and alt to set the pivot and the position to be the bottom left corner now i will set the width and height to be 300 by 300 and in our scene view we should see our panel now i will want to offset it a bit since i have already some ui here now of course for the mobile version of your game you might want to modify the existing ui so what i will do is i will simply move it away from the existing ui so let's set the position on x to be 200 in the inspector and position y to be 30 for example and we are going to close direct transform and open our image i want to set the color to be full alpha so that i can see the image and i will select the background source to be from my flat dark folder it will be flat dark 0 6. okay and we should see our circle our image that will represent our joystick of course this will be the background of our joystick now we will need to also have the inner part that will actually move let's rename the panel to be joystick panel and we are going to add right click and we are going to select ui image and this will be our joystick inner part so this will be what moves now again i will select direct transform first and i will select the uncarved preset hold alt and shift and i will set it to be in the center of this joystick panel now for the image i will select flat dark 0 0 and you should see that in our scene view we have this image of our joystick i will go to the inspector and set the width to be 175 and height to be 175 and this will be our joystick that we are going to use now to use our joystick we will need to have a custom script so let's go to a folder for example i will go to my extra assets right click create a c-sharp script i will call it mobile joystick and let's open this script up great now what i will do is paste some variables to our script so instead of update and start we are going to have a private rex transform reference joystick transform now since our ui uses the rect transform instead of the transform we want to simply save direct transform reference since if we access transform it will be the default transform and i want to have rex transform reference saved here next we are going to have a serious field private flowed drug threshold now this will be the threshold which will tell me if i want to accept this input to be passed down to my character to move in this direction or not i will clamp my inputs to be 0 to 1 or from -1 to 1 just like the default input does it so that we know that if the value is greater than 0.6 this means that the user wants to move in this direction next we are going to have a drag movement distance now this will be the distance that our joystick moves around on our screen and we are going to have a serious field private into drag offset distance this will be used to convert the distance between where we have when we is the center of our joystick and where our user touched the screen it will be much more clear when we start creating the methods that use those values and last thing that we will have is public event action vector 2 on move this will be a delegate so i will use it to inform other scripts that actually we have some input to use for to move our player first of all i will create an awake method that will get the joystick transform it will be equal to rex transform uh so that we are going to up cast the transform to be direct transform so we are going to use it later on in the calculations one thing that we are going to need is to know when our player is dragging our ui joystick so we are going to use idrac handler from the unity engine event system library and this will allow us to get information about the event of our ui element being dragged we are going to also use onpointer up to know when our user has let go of the joystick so we can reset our position of the joystick as well as stop the movement of our player so at the top we are going to add using unity engine dot event system and this will allow us to add here after mono behave work a comma and let's type i pointer up handler this is one of the interfaces and we are going to add i drag handler now those interfaces are contracts that require us to implement a specific method to our mobile joystick class so right click click actions and implement interface and on the i drag handler the same quick actions implement interface and this will add to our script public void on drag and public void on pointer up and now this argument contains all the information about the pointer like it's positioned so basically it is all the information that my we might need to do something in our own dragon on pointer up event now if we go to unity we will see that our joystick is in position x 0 and y 0 so this is our default position if we change the position on x we can see that it moves around if we do the same on y or on both of those we are going to have again this kind of movement which we want to use to inform our player that we are actually using this joystick now if we let go of our joystick we want to go back to this position and that is why we have this referenced our joystick transform because in our own pointer up we will have two things joystick transform and chord position so this is the uh position x and position y that i have shown you in the inspector we are going to simply set it to be vector to zero so the joystick is back in its original position and we are going to call on movement question mark dot invoke vector to zero so that we are going to send to a movement script that we are using for our character or whatever we have that we do not want to move again so this will inform my character movement script that i want to stop the movement now what happens in on drugs so when we are dragging our component our ui element well if we go back to our unity basically what we are going to do is drag this element in different directions and right now we can get the position of our pointer so of our touch from our touchscreen of of our mouse but the issue is that we are working with our input in the screen space so the screen space is what we see on our device and the zero zero is at the bottom left corner and the uh top right corner is the width and height of our screen so this will be the resolution now whatever this value is if we get the reference to this position here and get the reference to our uh position where our currently the pointer is so when we are clicking so basically we can compare the center position of this joystick and the position when the joystick currently is to calculate the direction in which we want to move now this seems simple enough but actually the calculations can be rather complex so we are going to calculate the position where we have clicked and calculated in reference to the center position of this object so we are going to assume that we are working with this coordinate system where the 0 0 is the center of this joystick and when we click we are going to get the distance or the offset from the 0 0 to this point and this will be much easier for us to calculate the direction in which we want to drag our joystick and in which we want to move our player so on drag we are going to have a bit of code we are going to have a vector to offset and as i have mentioned we are going to calculate the reference of the position where we have clicked so this is event data position which contains the screen position where we have clicked our mouse or where we are currently touching our finger on the screen and we are going to use rig transform screen point to local point in rectangle now this is a pretty confusing name so what it does is calculates the local position inside our joystick transform using this even data position so we're using the input position where we are clicking and this outputs this offset you can check out more about erect transform utility from the documentation here is our screen point to lock our point and all it does is helps us to calculate the coordinate in the local space of the rex transform that we pass here so just to verify what we have done let's debug dot log here our offset and let's save the script let's go back to unity great i will add our new script to mobile joystick script to our joystick the image of our joystick so if i now press play we are going to see that if i click on our in our game and drag our mouse up holding our joystick we are going to have those x 7.6 and y 331 if i drag to the right we are going to have other values like on the x axis we are going to have 600 and so on so this should work correctly we have the offset from the center point of our joystick in the direction that we are dragging our mouse now those are pretty big values and i know that my joystick panel only has width and height of 300 so if i want to ensure that my joystick doesn't move further than this in this direction i will want to divide this value by for example 100 or 150 so if i divide it by 150 and make sure that my joystick moves from 0 to 1 depending on this value so from 0 to 300 we are going to only move the joystick this much and it will stop moving so basically in our script this is the drag offset distance value so this will limit the movement range of our joystick so we are going to use this to divide our offset by this value and if you want to get the value from 0 to 1 as again as i have said to know how far should we move our joystick so what we are going to do is calculate offset equals vector to clump magnitude we are going to clamp the offset vector using our drag offset distance so the magnitude so the length of the vector can't be greater than hundred we are going to divide it by 100 to normalize it to be in range from minus one to one and this is exactly what we get if we get our input.getaxis so let's save it let's see how we have this value is right now okay let me press play in unity and we are going to see now that uh if we drag our joystick we are going to get those values between minus one and one and those should be correctly set one minus one minus one and one in all of those directions now second thing that i want to mention is if we drag in the diagonal direction we're going to have the zero seven zero seven because of we are clamping the magnitude so basically what i want to do is i want to set the threshold so when we are dragging up and the second value is 0.5 so this is less than 0.6 i want to only accept the vector up as the input and we are i'm going to discard the y value this is only because of how my game works so this is in turn the uh private float drag threshold this will be the value that will limit which value do i take for my character movement okay but first what we can already do is we can se move our joystick so not only we can debug.log this value we are going to use it we are going to set joysticktransform.com position equals offset times the drag movement distance so this is the value 30. let's save it and let's see how it works i'm going to stop the game and play it again okay i'm back in unity i have pressed play again and now our joystick should be moving together with our pointer now if we let go there will be one issue that it doesn't move back to its place okay and the problem is that the the eye pointer up handler only will work if we have also the i pointer down handler and we need to add this let's quick actions and implement the interface it will add to our script the on pointer down method but i have nothing to add here because we are not going to use this method but now if we save it and go back to unity and press play again we will see that our joystick will get reset to its original position as you can see i have added the debug log on pointer up again i'm going to go back to our script and last thing that i want to do is calculate the movement input i will create vector 2 input vector and i will calculate movement input from this offset i'll right click on this method quick actions and generate it call on move question mark dot invoke and i will pass the input vector again as i have already mentioned i will have the code that limits when we register the input depending on the drug drug threshold so if the value is greater than 0.6 i will accept it as valid x and y so float x equals math abs so absolute value of offset x if this is greater than drag threshold we are going to keep this value else you are going to set it to zero and we are going to calculate the same way the y value and i'm going to return it and this is how i will inform my agent that i want it to move i'm going to call this on move question mark dot invoke input vector okay i will need to have another script so i will right click create a c sharp script and i will call it my player mobile input and let's open this script up great now in my game i have defined a i agent input interface that if i implement gives me all the methods that my player input needs to pass to an agent so that it can perform some tasks and i need to now assign this movement vector to get the reference to or to get informed by by our mobile joystick method that we have that we want to move so what i will do is i will add here a method or actually a field and a method so we are going to have a serious field private mobile joystick joystick and we are going to assign it through the inspector and we are going to call private void start and on start we are going to assign our joystick on move event a method from this script so we can set our movement vector and call our own movement action event so i will right click quick actions and generate this you might have something different in your code but basically to make my character move all i need to do is set my movement vector to be this input vector and i'm going to i need to add here private set so that i can set it and i'm going to call on movement question mark dot invoke movement vector i will save this great now my player already has the player input that uses the keyboard and mouse input i'll remove this and i will drag here my player mobile input and i will assign the joystick now if i press play my character should be moving using our joystick now i will try using this on my connected android device using the unity remote and as you can see now i can run using my joystick now if you want to assign some functionality to a button all you need to do is select your canvas select ui add a button and i will select one of the other sprites from my icons let's select for example this one i'll assign it to the button image let me expand it okay here is our button okay let's select this b set native size and i will select this button i will place it anchor it in the bottom right corner of my screen i will set its size to be 150 and 150 and i will set the position to be minus 50 and position on y to be 50 here is by button and now we can use the button on click event to assign some functionality to it now in my player mobile script i have added two methods jump pressed and jump released since i am taking into account how long the player holds the jump button and when they release this button and i have appropriate event actions here so i need to have two events on my button not only the click but all also the event when i let go of the button okay back in unity what we could do is use this button on click event if we have only one event but instead we can even remove this component altogether and add what is called event trigger an event trigger allows us to add any event that we want to listen to so i'm going to add pointer down and i'm going to add pointer up and i want to add both of those a listener i will assign our player and i'm i will choose a mobile input on player pointer down i want to call jump pressed and on pointer up i want to select jump released and now if i press play i should be able to press this button and be able to jump so i'll if i switch to my phone i can now traverse my game and look out for the enemies because i have no weapon or no way to use my weapon but now all the input should work fine great i hope it gave you some idea how you can implement the mobile input ui for your game if you want to learn more about this 2d platformer game check out my unity 2d platformer video course about learning how to use design patterns in your code thanks a lot for watching see you in the next video

Channel: Sunny Valley Studio

Views: 20,979

Keywords: Unity 2021 Adding Mobile Joystick Touch Controls, touch controls unity, mobile joystick unity, unity joystick ui, unity mobile input, unity platformer mobile input, unity game touch controls, unity touch controls tutorial, unity touch input tutorial, unity mobile touch tutorial, unity touch input system, mobile touch controls unity, mobile input system, touch controls, unity c# touch controls, gamedev, indiedev, game development, indie game development, sunnyvalleystudio

Id: UCJXgwSnXuU

Length: 22min 30sec (1350 seconds)

Published: Thu Nov 04 2021