UGUI 虚拟摇杆的实现

建2张 image,大小自己看着办:

第一步:将上一次拖拽实现的代码全部复制过来.将脚本放在较小的正方形 image

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class Rocker : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler{

    public float radius = 100f;
    private RectTransform selfTransform;


    void Start(){

    }



    public void OnBeginDrag(PointerEventData eventData){

    }



    public void OnDrag(PointerEventData eventData){
        Vector3 pos;
RectTransformUtility.ScreenPointToWorldPointInRectangle(selfTransform,eventData.position,eventData.pressEventCamera,out pos);
        selfTransform.position = pos;



    public void OnEndDrag(PointerEventData eventData){


    }
}

我们来试一试效果

很明显,我们需要将图片设定范围,已经松开之后,小图片应该回到原点.
我们先让它回原点:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class Rocker : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler{

    public float radius = 100f;
    private RectTransform selfTransform;
    private Vector2 origin_position;
    void Start(){

        selfTransform = GetComponent<RectTransform>();
        //记住原点
        origin_position = selfTransform.anchoredPosition;
    }


    public void OnBeginDrag(PointerEventData eventData){

    }


    public void OnDrag(PointerEventData eventData){

        Vector3 pos;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(selfTransform,eventData.position,eventData.pressEventCamera,out pos);
        selfTransform.position = pos;


    }
    public void OnEndDrag(PointerEventData eventData){
        //拖拽结束,回到原点
        selfTransform.anchoredPosition = origin_position;

    }
}

添加了4句话,再来看看效果:

下步限定它的范围:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class Rocker : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler{

    public float radius = 100f;
    private RectTransform selfTransform;
    private Vector2 origin_position;
    void Start(){


        selfTransform = GetComponent<RectTransform>();
        //记住原点
        origin_position = selfTransform.anchoredPosition;
    }

    public void OnBeginDrag(PointerEventData eventData){
    }


    public void OnDrag(PointerEventData eventData){

        Vector3 pos;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(selfTransform,eventData.position,eventData.pressEventCamera,out pos);
        selfTransform.position = pos;
        Vector2 touchAxis = selfTransform.anchoredPosition - origin_position;
        if(touchAxis.magnitude >= radius)
        {
            touchAxis = touchAxis.normalized * radius;
            selfTransform.anchoredPosition = touchAxis;
        }

    }
    public void OnEndDrag(PointerEventData eventData){
        //拖拽结束,回到原点
        selfTransform.anchoredPosition = origin_position;
    }
}

再次添加了4句话,看看效果:

我们添加个物体来移动看看,代码需修改一下,为了方便我直接使用静态变量:

using UnityEngine.UI;
using UnityEngine.EventSystems;
public class Rocker : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler{

    public float radius = 100f;
    private RectTransform selfTransform;
    private Vector2 origin_position;
    public static Vector2 touchAxis;
    public static bool is_ready_move = false;
    void Start(){


        selfTransform = GetComponent<RectTransform>();
        //记住原点
        origin_position = selfTransform.anchoredPosition;
    }

    public void OnBeginDrag(PointerEventData eventData){
        is_ready_move = true;
    }


    public void OnDrag(PointerEventData eventData){

        Vector3 pos;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(selfTransform,eventData.position,eventData.pressEventCamera,out pos);
        selfTransform.position = pos;
        touchAxis = selfTransform.anchoredPosition - origin_position;
        if(touchAxis.magnitude >= radius)
        {
             touchAxis = touchAxis.normalized * radius;
            selfTransform.anchoredPosition = touchAxis;
        }

    }
    public void OnEndDrag(PointerEventData eventData){
        //拖拽结束,回到原点
        selfTransform.anchoredPosition = origin_position;
        is_ready_move = false;
    }
}

然后挂在物体上的代码:

public class Unit : MonoBehaviour {

    public float speed =20f;
    void Start () {

    }

    // Update is called once per frame
    void Update () {

        if (Rocker.is_ready_move)
        {
            transform.Translate(new Vector3(Rocker.touchAxis.normalized.x,0,Rocker.touchAxis.normalized.y)*Time.deltaTime*speed);

        }

    }
}

看看效果

我们发现,鼠标点击的情况下,移动到中间,物体还在移动,这里相信你们自己就可以搞定了.