Touch Movement Joystick Using the New Input System | Unity Tutorial

in this video i'm going to show you how to set up a floating joystick on mobile and use it to control the player's movement using the new input system specifically we're going to use a nav mesh agent to move around but this can very easily be modified to support a character controller or rigid body as well hey chris here from mom academy here to help you you talking to me yes you make your game dev dreams become a reality by enabling player movement on mobile something that a lot of games need especially first and third person games need is the ability to move the player handling player movement is not always the easiest task luckily for us the new input system has a pretty nice api to manage touch input controls so as always whenever we're talking about the new input system you're going to need to make sure that you import it through the package manager and have toggled over your project to use the new input system for active input handling usually with the new input system whenever you're going to set it up you attach that player input to some game object in your scene configure the player actions the input the different kinds of input types that you're going to accept like keyboard mouse joystick whatever we're not going to do any of that in this video instead we're going to operate with the enhanced touch support api the enhanced touch support is designed to track touch inputs on two different dimensions one is per finger and one is per touch and the touch is what we're going to use today each touch is a single finger that has at least two maybe three different events one is touch began one is touch move and one is touch ended with that you can probably see where this is gonna go is whenever we first receive that touch we're going to enable our joystick and use that as the starting point for where we will track that finger whenever we receive the move events we'll move the knob along with that finger and also apply some force or some movement to that player object based on how far we've moved from that initial touch position then finally on end whenever we pick up the finger that's when we're going to go ahead and hide that joystick game object and stop doing all movement now if you want to use what's not a floating joystick so one that's just fixed on the screen in one spot all the time you can follow a really similar pattern you just have to check to make sure that the first touch is within the range of that joystick in its anchored position and then use the anchor position of the joystick not the first start position of that first touch that'll make a little bit more sense i think once we get into how we're implementing the touch and movement events let's go ahead and jump into the unity editor and start creating that joystick that we'll use in our code we're going to create our own very simple one today by first using an image that's our base image i'm going to set the sprite to be this circle border 06 that's included in the repository and if i zoom in on it you can see that it's just a circle with a faded interior edge the sprite you use here can really define how good your game looks so make sure to pick one that looks nice a couple of key points is that this is positioned with the bottom left anchor this is very important for the code that we're going to use in a little bit i've also attached a floating joystick to this game object that has a knob public reference on it you'll see that i have that linked to be this knob outline that's the interior knob that is again very importantly positioned with the anchors at center middle the outer knob is set to b60 with this blue color and the inner one is set to stretch and then just have a padding of five on the side so we get this nice kind of border around that outline of blue and then the white interior one this is because i just didn't make a sprite that was 60 pixels that would look nice here so i used the same circle and made two different images it's not really important how that's made i'll disable this game object because in the code we're going to enable it only when the user has touched the screen on the left half of the screen one thing that's also really important is how we have the canvas set up i would recommend you have a distinct unique canvas for your touch inputs that's canvas scaler is set to constant pixel size if you use any of the different scaling modes besides constant pixel size most likely the map that we're going to use will not be accurate and you'll have the joystick able to go off screen because of that you may need to dynamically readjust the size of your joystick that we're going to implement in a little bit based on the actual screen size versus your target if we look at our scene i have a camera that's going to follow this player around as they move with touch input controls i have this box in and i'm going to use a nav mesh agent to move this but really you can use a character controller or rigid body again just for today the navmesh agent is a really simple one for us to use and i use a lot of navmesh agents so this is very comfortable for me to write it like whenever we talk about the code we'll talk about maybe some different ways that you could apply it forces to a rigid body or move a character controller in the same way that we're moving this agent let me also quickly note that the player touch movement script is already attached to the player since we're using the new input system something very important that we do so we can test this in the editor is we need to go to window analysis input debugger that opens up this input debug panel under the options you're going to want to turn on simulate touch input from mouse or pen if you don't do this every time you want to test your changes you have to deploy it to a phone which is very slow so simulating the touch input from mouse or pen is very useful let's open up visual studio and start implementing some touch controls with the new input system in our player touch movement script the first thing we need to know about is the joystick because we want this to control the visibility of that joystick at least that's how we're going to implement it today to do that i'm going to add a reference to the joystick and also the joystick size so it's easy for me to configure on the player touch movement you could put this into the floating joystick class which would probably be better separation concerns but today we're doing it all in the player touch movement we're also going to add a reference to our private navmesh agent player and then i'm going to define some private variables we're going to reuse and define a private finger movement finger and a private vector 2 movement amount it's important to have this movement finger because we're going to have different events raised by the touch input system and we're going to do different things based on if the user has already touched a particular part of the screen the movement amount is just going to define how do we move our nav mesh agent on the nav mesh if you're using a rigid body or character controller you may consider making this a vector 3 instead because you will have like jumping potentially as an option at the top i'm going to do something a little bit weird i'm going to provide an alias for the unity engine input system enhanced touch by doing using etouch equals unityengine.inputsystem.enhancedtouch this is because unity has a conflict with the class touch we have that available on unityengine.touch and we have it also on unity engine input system enhanced touch dot touch if we don't provide this alias then we have to fully qualify the path of the name space that we want to use if we're going to use touch on enable we're going to do enhanced touch movement support dot enable this is a requirement from this touch input system that before you use it you enable it then there are three callbacks that we're interested in on the touch class one is on finger down one's on finger up and one's on finger move i'm gonna auto generate these handlers and then we're going to rename them as we start implementing them but before we do that let's handle the disable where we're going to do the inverse of this if we don't do this next step on disable you're going to end up with a bunch of extra callbacks and enhanced touch support will stay enabled which we don't want all we're doing here is the inverse of what we did on enable we will remove all these handlers and then disable the touch input as you can see here when we get a finger down or finger up or finger move we're going to get an event raised and we're going to do something based on that so let's implement them in the order that they would happen which is first on finger down first thing i'm going to do is rename this to be handle finger down and the argument to be touched finger the first thing whenever we get a finger down event we're going to check if the movement finger is null if the movement finger is not null then we are already processing and we are already tracking that finger with this joystick that means we do not want to start trying to do that again with a new finger we want them to be able to do whatever they were doing maybe they're touching on the ui maybe the rotating camera whatever the second piece of this is we're going to check the movement finger is null and that the touched finger screen position is on the left half of the screen that's touch finger dot screen position dot x is less than or equal to screen.width divided by two this is the most common support is your left finger is the one that's doing moving and the right one is doing something else if both of these are true what we're going to do is assign the movement finger to be this touch finger we're going to set the movement amount to be zero we're going to enable the joystick we're going to set the joystick size to be the joystick size and then we're going to set the anchored position to be wherever we just touched you might be tempted to just set the joystick position exactly wherever they touched i find this to not be a good solution because if you touch really far on the left side of the screen really high on the screen or really low on the screen then your joystick movement is limited so instead what we can do is clamp the start position to be within the screen bounds so what we'll do is define a private vector 2 clamp start position that accepts the vector to start position and we'll check if startposition.x is less than joystick size.x divided by two then we're going to set it to be exactly that joystick size dot x divided by two if the start position.y exactly the same is less than the joystick size dot y divided by two then we'll said to be that else if the start position y is greater than the screen height minus the size y divided by two and we're said to be the height minus joystick size y divided by 2. all we're doing there is clamping so if we touch at the top of the screen the joystick comes down at least the height of the joystick so that way our player can still move in a full circle around the joystick the same on the x if we go too far over we want to push over the joystick so it stays fully on screen so the user has full access to the full joystick size next let's take a look at what we do when the finger is moving i'm going to again rename this and rename the parameter the first thing we want to do is check if this finger that's moving is the movement finger if it is then we're going to define where the knob should move on that joystick and then we'll set the movement amount we'll define a vector 2 knob position that we're going to set the knob position to be at we're going to find a max movement to be the joystick size divided by 2 i'm choosing the x value but i'm generally assuming it's going to be a square so x or y here should be the same because we don't want the knob to go outside the joystick i'll define a touch current touch to be the movement finger dot current touch just to make a little bit more convenient to reference then we're going to check the distance between the current touch screen position and the joystick anchored position is greater than the max movement because remember the anchored position of the joystick is where we're pretending like the user touched because we may have moved it from where they actually touched so i'm going to do is assign the knob position to be the direction towards the current touch from the joystick anchored position that way this knob is constrained inside the joystick still in any other case we're going to do just not position equals current touch dot screen position minus joystick direct transform.anchored position and then at the end here we're going to do joystick.nob dot anchored position equals the knob position and set the movement amount to be the knob position divided by the max movement what that does is gives us a movement amount from negative one to one on the x and y because we've clamped the movement never be more than the max movement where if we're up fully right and fully up we'll be at one one and fully down fully left will be negative one negative one now let's handle the final case of when we lose the finger i'll rename this be handles finger and the argument be lost finger and we'll check if the lost finger is our movement finger then we're going to set the movement finger to be null that way next time we press it we'll assign it to be that finger again we'll set the joystick knob anchored position to be vector 2 0 so again back of the center and we're going to set the joystick game object back to inactive so that way we don't see it anymore because we've lifted up our finger and the movement amount to go back to vector 2 0. so far we've done a lot of stuff but we haven't actually moved our player at the very bottom of the script i'll add update what we're going to do is define a vector3 scaled movement equal to player speed times time dot delta time times a vector 3 where we're remapping the x and the y to be on the x and the z because we're only moving on x and z with the nav mesh the y is up here's where you would also add some y variable to handle gravity for the character controller or the rigid body i'm going to make my player always look at where they're going we're not going to get into the camera controls in this video i want to focus on the movement piece in this video because there's a ton of different use cases that have a ton of different ways that you would handle the camera rotation so we're just going to not get into that here we're going to use cinemachine to just follow the player and look at the player all the time and then our player is going to look in the direction we're going how we handle the player looking we'll talk about in a little bit the most important line out of all of this is player dot move with the scaled movement so we've taken the player speed which is nav mesh agent speed multiplied by the time that delta times are moving a scaled amount and then also we're multiplying that by a vector three based on the movement amount on the x and the y or the x and the z in world space where the x and the z come from the percentage of maximum that we've moved the joystick so if we move the joystick knob all the way to the right we'll have x being one which would be the maximum speed that we move that player in that direction we're going to take a look at how we hook this up in the inspector and demo it in just a second i want to give a huge shout out to all of my patreon supporters every one of you is helping this channel grow reach more people and have valued more people and that means more people are making their game development dreams become a reality if you want to show your support you can go to patreon.com academy get your name up here on the screen and get a voice shout out starting at the awesome tier at the phenomenal tier level there's andrew bowen and at the awesome tier there's gerald anderson autumn k matt parkin ivan paul berry and rulin thank you all for your support i am so grateful back in the unity editor with the player selected we can see that the player touch movement needs some stuff hooked up for the joystick i'm going to drag that disabled joystick from the touch canvas and the player i'm going to drag the navmesh agent because we've already enabled virtual touch with the mouse there's nothing else we need to hook up if i click play remember the touch joystick will only appear on the left half of the screen when i touch i click on the right side nothing happens remember there's three phases that we go through here one is where we left click that puts down a touch if i move left we'll see i start moving left if i start moving right the agent starts moving and looking right again up we turn to look that way and the knob never leaves fully the circle but it does kind of get on that border so if you don't like this look where it kind of looks a little bit outside of the joystick you can update the math a little bit to be the joystick size minus half of the knob size and if i move this where it's almost back to the middle i do virtually no movement here and the farther out i go the faster my agent moves even though i'm using transform look at we can see that the player moves pretty smoothly and rotates pretty smoothly the only jitter happens when i first touch down and start looking a direction i promised i'd talk at least a little bit about how do we handle the player looking around this is a little bit more complicated because it's really dependent on how you want your game to be how you want the controls to work there are a bunch of different options here so one that i currently have implemented if you were to download valma survival today is if you swipe left and right on the screen it will turn in my case it's turning the entire camera but maybe you also use that to just turn the player and rotate the player based on how far we've swiped left or right another option is you can just implement exactly what we did today with the joystick have another joystick to rotate the player where they'll start looking at the direction of the joystick another one would be you have kind of a free camera rotation where you can swipe up down left and right and that'll move the camera up down left and right around the player as well all of these are viable options for your game it's really about how do you want the game to feel and how should the player be able to interact with that camera maybe you don't even need the ability to rotate the camera because you're going to have maybe you have like an auto aiming player so that's controlled by something else entirely and you only have the one joystick to move around so that's a really it gets into a lot more complicated topic to talk about because there's so many different ways to manage that rotation of the player what i hope you got out of this video was how do you implement touch input controls using the enhanced touch support api from the new input system to gather that raw input data from the player you can then take this and build upon it if you want to do some kind of input smoothing so that way maybe you have some damping to it or ignore some jitter because usually when you touch on the phone you're not keeping your finger perfectly still there's usually a little kind of jitter there you can ignore that or just keep it raw if you did get value out of this video please consider liking and subscribing to help the channel grow reach more people and add value to more people there's new videos posted every tutorial tuesday and i'll see you next week

Channel: LlamAcademy

Views: 30,604

Keywords: Unity, Tutorial, How to, How to unity, unity how to, llamacademy, llama academy, touch, input, joystick, touch joystick, movement, player, player movement, mobile, mobile controls, controls, control, new input system, system, input system, enhancedtouch, enhanced touch support, enhanced touch, unity mobile input, unity floating joystick, floating, float, floating joystick, mobile movement joystick, gamedev, game development

Id: MKnLPA5hnPA

Length: 16min 34sec (994 seconds)

Published: Tue Aug 23 2022