New Input System and UI

Now it’s time to take a look at how the new UI system works in regards to some UI elements that we can work with. First off, let’s see how simple it is to implement a joystick into our game. First, let’s build a joystick into the corner of our play area:

Once we have placed the On-Screen stick, we can already play around with a joystick on the screen:

Within our input manager, we will want to add in the ability to move the stick around:

Within our event system, we will want to click the option to replace with InputSystem:

Next up, we can go into our scripts and create the logic to have our object move based on the movement of our joystick:

What we have done in our script is created a move variable that will take the value of the movement of our joystick. We then translate it towards the movement of the object along the x and y axis. Now, let’s test it out within our game:

Now that we have a working joystick that will move the player around, let’s take a look at building a progress bar that charges up as we hold down space, then once it is released, it will decrease it’s charge.
What we will do with our input actions is simply a button press:

As we are working with it being something that works as a hold, but there is no end time, working as a regular button press is the best method to go with. From here, we can take a look at how we will go about scripting this progress bar to charge:

As we want it to charge while the space bar is held down, we will want to use a Coroutine. This allows the value of the slider bar to increase and decrease in our while loops, depending on the situation. If we wanted our power bar to always be powering down, unless it reaches 0, we will want to create a && portion of the decrease in the slider value. As for how long we want our bar to charge up, and power down for, we can divide the value for however long we wish it to last for. If we wanted it to last for 5 seconds, then we divide by 5 and so on. Now, with all of this put in place, let’s see if our progress bar charges up as we desire:

Now, just to create the visual of showing the % charge the bar is at, let’s see how we can go about adding in that text. After we have added in the text and create a variable to attach it to in the script, we can simply create a quick method in update that will have our charge value displayed:

In order to have it shown as a rounded percentage, we will want to use Mathf.round, which rounds the value to the nearest integer. As the value is between 0 and 1, we just need to multiply it by 100, and it gives us a proper percentage to work with:

There we have it, we have managed to create a functioning joystick along with being able to produce a progress bar with the new input actions system Unity has put in place, in a much easier way.