[Unity] How to Configure The Virtual Joystick and Move Object

Last Updated on 2021-10-25 by Clay

In the last year, I tried to use Unity to make a 2D bird's-eye view sooting game. At that time, I tried to download virtual joystick package in the Unity store, but the move effect was not satisfactory. I recently studied the production of mobile games, and find making the virtual joystick by myself is unexpectedly easy.

For the convenience of demo, the virtual joystick does not use any image and uses Unity's built-in assets, so it may be a bit crude.

Virtual Joystick

Step 1: Create the Canvas and Image object

Click right button to create Canvas and Image object from UI options.

And place them to be the following architecture:

Set the anchor point of JoystickContainer Image to the lower left corner. This step is very important, otherwise the joystick operation will fail later. If you want to know, the pivot of this object I set x=0.5 and y=0.5.

Step 2: (Optional) Add color for object

You can skip this step.

I just want everyone to know which is the joystick and which is the player's object.

Step 3: Write the script

Joystick.cs (Attach to Image-JoystickContainer object)

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;


public class Joystick : MonoBehaviour, IDragHandler, IPointerUpHandler, IPointerDownHandler
{
    // Init
    private Image jsContainer;
    private Image joystick;
    public Vector3 InputDirection = Vector3.zero;

    void Start()
    {
        // Get the Component we attach this script (JoystickContainer)
        jsContainer = GetComponent<Image>();

        // Get the only one child component (Joystick)
        joystick = transform.GetChild(0).GetComponent<Image>();
    }

    public void OnDrag(PointerEventData ped)
    {
        Vector2 position = Vector2.zero;

        // Get InputDirection
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            jsContainer.rectTransform,
            ped.position,
            ped.pressEventCamera,
            out position
        );

        float x = (position.x / jsContainer.rectTransform.sizeDelta.x);
        float y = (position.y / jsContainer.rectTransform.sizeDelta.y);

        InputDirection = new Vector3(x, y, 0);
        InputDirection = (InputDirection.magnitude > 1) ? InputDirection.normalized : InputDirection;

        // Define the area in which joystick can move around
        joystick.rectTransform.anchoredPosition = new Vector3(
            InputDirection.x * jsContainer.rectTransform.sizeDelta.x / 3,
            InputDirection.y * jsContainer.rectTransform.sizeDelta.y / 3
        );
    }

    public void OnPointerDown(PointerEventData ped)
    {
        OnDrag(ped);
    }

    public void OnPointerUp(PointerEventData ped)
    {
        // If mouse release, the InputDirection variable have to return to Vector3(0.0, 0.0, 0.0);
        InputDirection = Vector3.zero;
        joystick.rectTransform.anchoredPosition = Vector3.zero;
    }
}

Player.cs (Attach to Image-Player)

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;

public class Player : MonoBehaviour
{
    // Init
    public float moveSpeed = 1f;
    public Joystick jsMovement;
    public Vector3 direction;

    private float xMin, xMax, yMin, yMax;
    

    void Update()
    {
        // InputDirection can be used as per the need of your project
        direction = jsMovement.InputDirection;

        // If we drag the Joystick
        if (direction.magnitude != 0)
        {
            transform.position += direction * moveSpeed;
            transform.position = new Vector3(
                Mathf.Clamp(transform.position.x, xMin, xMax),
                Mathf.Clamp(transform.position.y, yMin, yMax),
                0f
            );
        }
    }

    void Start()
    {
        // Initialization of boundaries
        xMax = Screen.width - 50;
        xMin = 50;
        yMax = Screen.height - 50;
        yMin = 50;
    }
}

Step 4: Attach the Image-JoystickContainer object to the jsMovement field of the Image-Player object

Step 5: Play!

The above is the introduction of how to make a virtual joystick by yourself in Unity.

Have fun!

[Unity] How to Configure The Virtual Joystick and Move Object

Virtual Joystick