Joystick on uGUI

Unity Engine
1

Hey Everyone,

I am wondering how should I go about making a joystick for uGUI I only need the joystick to move on the X-Axis. Has anyone attempted this yet?

2

What do you mean about “making a joystick”? uGUI already has joystick support for selecting buttons, using the “EventSystem” GameObject

3

Are you talking about an onscreen joystick for mobile?

4

Hi, we have some examples coming with on screen joysticks but they are not finished yet. We will have something soon for you.

3 Likes
5

Awesome! Very excited about the new uGUI system! :smile:

6

I am using a slider as a x axis joystick and it works great. Set the min to -1 the max to 1 and add an event trigger, I think it is called, use on drag set your movement variable or call movement script and use on pointer up event to call your release function.

1 Like
7

I think I might just do that for the time being :smile:

8

Hope, You’ll like it. It was written for Unity3d 4.6.0b20

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

[RequireComponent(typeof(RectTransform))]
public class Joystick : MonoBehaviour, IPointerDownHandler, IDragHandler, IEndDragHandler
{
        public RectTransform joystick;
        public Vector2 autoReturnSpeed = new Vector2(4.0f, 4.0f);
        public float radius = 40.0f;

        public event Action<Joystick, Vector2> OnStartJoystickMovement;
        public event Action<Joystick, Vector2> OnJoystickMovement;
        public event Action<Joystick> OnEndJoystickMovement;

        private bool _returnJoystick;
        private RectTransform _touchZone;
        private Vector2 _resolutionCorrection;

        public Vector2 Coordinates
        {
                get
                {
                        if (joystick.localPosition.magnitude < radius)
                                return joystick.localPosition / radius;
                        return joystick.localPosition.normalized;
                }
        }

        void IPointerDownHandler.OnPointerDown(PointerEventData eventData)
        {
                _returnJoystick = false;
                var joystickOffset = GetJoystickOffset(eventData);
                joystick.localPosition = joystickOffset;
                if (OnStartJoystickMovement != null)
                        OnStartJoystickMovement(this, Coordinates);
        }

        void IDragHandler.OnDrag(PointerEventData eventData)
        {
                var joystickOffset = GetJoystickOffset(eventData);
                joystick.localPosition = joystickOffset;
                if (OnJoystickMovement != null)
                        OnJoystickMovement(this, Coordinates);
        }

        void IEndDragHandler.OnEndDrag(PointerEventData eventData)
        {
                _returnJoystick = true;
                if (OnEndJoystickMovement != null)
                        OnEndJoystickMovement(this);
        }

        private Vector2 GetJoystickOffset(PointerEventData eventData)
        {
                var eventDataPos = new Vector2(eventData.position.x * _resolutionCorrection.x, eventData.position.y * _resolutionCorrection.y);
                var joystickOffset3D = _touchZone.TransformPoint(eventDataPos) - _touchZone.position * 2;
                var joystickOffset = new Vector2(joystickOffset3D.x, joystickOffset3D.y);
                if (joystickOffset.magnitude > radius)
                        joystickOffset = joystickOffset.normalized * radius;
                joystick.localPosition = joystickOffset;
                return joystickOffset;
        }

        private void Start()
        {
                _returnJoystick = true;
                _touchZone = GetComponent<RectTransform>();
                _touchZone.pivot = Vector2.one * 0.5f;
                joystick.transform.parent = transform;
                _resolutionCorrection = Vector2.one;
                ReferenceResolution rRes;
                for (var i = transform; i != null; i = i.parent)
                {
                        if ((rRes = i.GetComponent<ReferenceResolution>()) != null)
                        {
                                var res = rRes.resolution;
                                _resolutionCorrection = new Vector2(res.x / Screen.width, res.y / Screen.height);
                                break;
                        }
                }
        }

        private void Update()
        {
                if (_returnJoystick && joystick.localPosition.magnitude > Mathf.Epsilon)
                        joystick.localPosition -= new Vector3(joystick.localPosition.x * autoReturnSpeed.x, joystick.localPosition.y * autoReturnSpeed.y, 0.0f) * Time.deltaTime;
        }
}
2 Likes
9

Ahah nice! I was about to write a script for joystick today! Looks like you save me some time! Thanks a lot. Will test it soon!

10

Finally, I just found that Unity has update their standard asset for unity 4.6. There s joystick in it. Unity Asset Store - The Best Assets for Game Making

11

Here is a product I made that supports constraints on the x or y axis, and can return the data as a vector 2 of -1 to 1 values or just like the default Input class does with its getAxis command.

12

I have an update for my joystick (Unity 4.6.1f1).

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

[RequireComponent(typeof(RectTransform))]
public class Joystick : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler
{
    public RectTransform handle;
    public Vector2 autoReturnSpeed = new Vector2(4.0f, 4.0f);
    public float radius = 40.0f;

    public event Action<Joystick, Vector2> OnStartJoystickMovement;
    public event Action<Joystick, Vector2> OnJoystickMovement;
    public event Action<Joystick> OnEndJoystickMovement;

    private bool _returnHandle;
    private RectTransform _canvas;

    public Vector2 Coordinates
    {
        get
        {
            if (handle.anchoredPosition.magnitude < radius)
                return handle.anchoredPosition / radius;
            return handle.anchoredPosition.normalized;
        }
    }

    void IPointerDownHandler.OnPointerDown(PointerEventData eventData)
    {
        _returnHandle = false;
        var handleOffset = GetJoystickOffset(eventData);
        handle.anchoredPosition = handleOffset;
        if (OnStartJoystickMovement != null)
            OnStartJoystickMovement(this, Coordinates);
    }

    void IDragHandler.OnDrag(PointerEventData eventData)
    {
        var handleOffset = GetJoystickOffset(eventData);
        handle.anchoredPosition = handleOffset;
        if (OnJoystickMovement != null)
            OnJoystickMovement(this, Coordinates);
    }

    void IPointerUpHandler.OnPointerUp(PointerEventData eventData)
    {
        _returnHandle = true;
        if (OnEndJoystickMovement != null)
            OnEndJoystickMovement(this);
    }

    private Vector2 GetJoystickOffset(PointerEventData eventData)
    {
        Vector3 globalHandle;
        if (RectTransformUtility.ScreenPointToWorldPointInRectangle(_canvas, eventData.position, eventData.pressEventCamera, out globalHandle))
            handle.position = globalHandle;
        var handleOffset = handle.anchoredPosition;
        if (handleOffset.magnitude > radius)
        {
            handleOffset = handleOffset.normalized * radius;
            handle.anchoredPosition = handleOffset;
        }
        return handleOffset;
    }

    private void Start()
    {
        _returnHandle = true;
        var touchZone = GetComponent<RectTransform>();
        touchZone.pivot = Vector2.one * 0.5f;
        handle.transform.SetParent(transform);
        var curTransform = transform;
        do
        {
            if (curTransform.GetComponent<Canvas>() != null)
            {
                _canvas = curTransform.GetComponent<RectTransform>();
                break;
            }
            curTransform = transform.parent;
        }
        while (curTransform != null);
    }

    private void Update()
    {
        if (_returnHandle)
            if (handle.anchoredPosition.magnitude > Mathf.Epsilon)
                handle.anchoredPosition -= new Vector2(handle.anchoredPosition.x * autoReturnSpeed.x, handle.anchoredPosition.y * autoReturnSpeed.y) * Time.deltaTime;
            else
                _returnHandle = false;
    }
}
2 Likes
13

Thanks Kender, You’re awesome sauce.

14

Updated the code above. Now it works great even when joystick is rotated. Also, now it handles cursor movement all over the canvas.

1 Like
15

Works well - thanks Kender.

16

Here is my brand-new joystick, that is more flexible. Round, square, vertical and horizontal options are supported now.
http://forum.unity3d.com/threads/more-ugui.352210/