Hello everyone! In this tutorial, we will add a
joystick to this mobile space shooter game. As you can see, I can move the spaceship by moving this
virtual joystick. By the way, if you want to learn how to make mobile games for Android and iOS, I
have a great new course. So check the link in the description. Back to the joystick implementation.
We will use a new input system. First, we need to go to Package Manager. Make sure you select
Unity Registry. Then search for the Input System. Select it and click on the Install
button. I have already done that. Then right-click on the Project
window: create -> Input Action. I will call it Controls. Click on the "Edit
asset" button. This will open a new tab. Click on the "plus" button
to create a new Action Map. This Action Map will be for the player, so call
it "Player." Then we have Actions. Actions can be for example: Shooting, Movement, and so on.
Every Action has one or more bindings. Bindings are like triggers, we determine what button we
need to press to activate the Action. I will just delete this Action to show you the process. To
create a new Action, click on this "plus" button. This Action will be for movement, so call it
Move. You can see Action Properties here. We need to change the Action Type, for the joystick,
we don't need a Button, we need to use Value. Also, we need to set the control
type to Any value, or use Vector2. Then select the binding and open Path.
Open Gamepad and select Left Stick. Now when we are done, it's important to
save the asset. If you make some changes, remember to save it. Then select the player.
We need to add a Player Input component. Then drag in the asset Controls that we made.
Now, let's create the UI for the joystick. We need one Image, I call it
"LeftStick." Go to the Scene view. Select the image. I will just zoom in a little
bit. If you want to have a joystick in the bottom left corner, then we need to change Anchor
Preset and pivot point to the bottom left corner. Hold Shift and Alt and choose the bottom left
corner. We can change the position a bit. Then let's add the On-Screen Stick component. For the Control Path choose the same path as we
did in our Controls, and that is the Left Stick. Let's test this. You can see that the Image is
behaving like a joystick, but nothing happens. The player is not moving. Before we deal
with that, let's adjust the joystick a bit. Move it more to the corner,
then let's change the image. See the link in the description
for more virtual joystick images. We can also increase the scale a bit. This
looks better. Notice there is the Movement Range variable. It determines how far the joystick will
move from its center. Let's increase it to 100. This is much better. Also, to make UI compatible
and scalable for all devices, we need to select Canvas. Then change Scale Mode to "Scale With
Screen Size." Then set Reference Resolution. Let's match width and height
equally, so set this to 0.5. All we have to do now is to connect
the joystick with player movement. Let's select the player. I have the
PlayerControls script, let's open it. You can ignore the variables and functions you
see. I use them for something else in the mobile course. To make the joystick work, first, we
need to create one "InputActionReference." Back in Unity, expand the Controls asset. You
can see Action Move. Drag it in the empty field. Go back to the script. We will
need one float variable "speed." Then in Update, let's use Vector2 for
the direction. We will get the direction values from "InputActionReference." So,
use "moveActionToUSe.action.readvalue." Sticks on gamepads have Vector2 values.
That means that we read value Vector2. To actually move the player,
use "transform.Translate." We multiply the moveDirection vector with the
"speed" variable and then multiply everything with "Time.deltaTime" for smooth movement.
That is all we need to code. Back in Unity, don't forget to set the speed. Let's try
it. Now you can see, as I move the joystick, the player moves. Nice. That is all for
this tutorial and see you in the next one.
