Unity Touch Screen Steering Wheel Tutorial



I found a forum thread about Unity Touch Screen Steering Wheel, which you can see the link at the bottom of this post; there are two versions of script, I used the C# version here.

First of all, on your Unity project, create a script named SteeringWheel. Then paste this script inside it:

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using UnityEngine.Events;
using System.Collections;
 
public class SteeringWheel : MonoBehaviour
{
    public Graphic UI_Element;
 
    RectTransform rectT;
    Vector2 centerPoint;
 
    public float maximumSteeringAngle = 200f;
    public float wheelReleasedSpeed = 200f;
 
    float wheelAngle = 0f;
    float wheelPrevAngle = 0f;
 
    bool wheelBeingHeld = false;
 
    public float GetClampedValue()
    {
        // returns a value in range [-1,1] similar to GetAxis("Horizontal")
        return wheelAngle / maximumSteeringAngle;
    }
 
    public float GetAngle()
    {
        // returns the wheel angle itself without clamp operation
        return wheelAngle;
    }
 
    void Start()
    {
        rectT = UI_Element.rectTransform;
        InitEventsSystem();
    }
 
    void Update()
    {
        // If the wheel is released, reset the rotation
        // to initial (zero) rotation by wheelReleasedSpeed degrees per second
        if( !wheelBeingHeld && !Mathf.Approximately( 0f, wheelAngle ) )
        {
            float deltaAngle = wheelReleasedSpeed * Time.deltaTime;
            if( Mathf.Abs( deltaAngle ) > Mathf.Abs( wheelAngle ) )
                wheelAngle = 0f;
            else if( wheelAngle > 0f )
                wheelAngle -= deltaAngle;
            else
                wheelAngle += deltaAngle;
        }
 
        // Rotate the wheel image
        rectT.localEulerAngles = Vector3.back * wheelAngle;
		
		//Debug.Log("Steering Value: " + GetClampedValue());
    }
 
    void InitEventsSystem()
    {
        // Warning: Be ready to see some extremely boring code here :-/
        // You are warned!
        EventTrigger events = UI_Element.gameObject.GetComponent<EventTrigger>();
 
        if( events == null )
            events = UI_Element.gameObject.AddComponent<EventTrigger>();
 
        if( events.triggers == null )
            events.triggers = new System.Collections.Generic.List<EventTrigger.Entry>();
 
        EventTrigger.Entry entry = new EventTrigger.Entry();
        EventTrigger.TriggerEvent callback = new EventTrigger.TriggerEvent();
        UnityAction<BaseEventData> functionCall = new UnityAction<BaseEventData>( PressEvent );
        callback.AddListener( functionCall );
        entry.eventID = EventTriggerType.PointerDown;
        entry.callback = callback;
 
        events.triggers.Add( entry );
 
        entry = new EventTrigger.Entry();
        callback = new EventTrigger.TriggerEvent();
        functionCall = new UnityAction<BaseEventData>( DragEvent );
        callback.AddListener( functionCall );
        entry.eventID = EventTriggerType.Drag;
        entry.callback = callback;
 
        events.triggers.Add( entry );
 
        entry = new EventTrigger.Entry();
        callback = new EventTrigger.TriggerEvent();
        functionCall = new UnityAction<BaseEventData>( ReleaseEvent );//
        callback.AddListener( functionCall );
        entry.eventID = EventTriggerType.PointerUp;
        entry.callback = callback;
 
        events.triggers.Add( entry );
    }
 
    public void PressEvent( BaseEventData eventData )
    {
        // Executed when mouse/finger starts touching the steering wheel
        Vector2 pointerPos = ( (PointerEventData) eventData ).position;
 
        wheelBeingHeld = true;
        centerPoint = RectTransformUtility.WorldToScreenPoint( ( (PointerEventData) eventData ).pressEventCamera, rectT.position );
        wheelPrevAngle = Vector2.Angle( Vector2.up, pointerPos - centerPoint );
    }
 
    public void DragEvent( BaseEventData eventData )
    {
        // Executed when mouse/finger is dragged over the steering wheel
        Vector2 pointerPos = ( (PointerEventData) eventData ).position;
 
        float wheelNewAngle = Vector2.Angle( Vector2.up, pointerPos - centerPoint );
        // Do nothing if the pointer is too close to the center of the wheel
        if( Vector2.Distance( pointerPos, centerPoint ) > 20f )
        {
            if( pointerPos.x > centerPoint.x )
                wheelAngle += wheelNewAngle - wheelPrevAngle;
            else
                wheelAngle -= wheelNewAngle - wheelPrevAngle;
        }
        // Make sure wheel angle never exceeds maximumSteeringAngle
        wheelAngle = Mathf.Clamp( wheelAngle, -maximumSteeringAngle, maximumSteeringAngle );
        wheelPrevAngle = wheelNewAngle;
    }
 
    public void ReleaseEvent( BaseEventData eventData )
    {
        // Executed when mouse/finger stops touching the steering wheel
        // Performs one last DragEvent, just in case
        DragEvent( eventData );
 
        wheelBeingHeld = false;
    }
}

NOTE: Whenever you see &amp;&amp; replace it with &&, for example on line 44.

Then make an empty object on your scene, attach the script to it. Next create an image UI element on your canvas. Click the empty object with script attached, locate the UI_Element slot, drag and drop your UI image to that slot.

Hit play button, you will be able to rotate the wheel by clicking and dragging it with your mouse.

To get the value of steering wheel rotation for further use, call this method: GetClampedValue();

To test it, go to 58, uncomment the line, you will see the output on Unity console while running it.

Obviously you will need to place your steering wheel image as a sprite for that dummy image we did make.

Watch how I did it:

Original link containing this script is here, you can see the JavaScript version too: https://forum.unity.com/threads/touchscreen-steering-wheel-rotation-example-mouse-supported.196741/

loading...

Leave a Reply

Your email address will not be published.