Unity3D关于NGUI和UGUI做简易的虚拟摇杆

虚拟摇杆主要是开发移动端的游戏用的，市面上这样的游戏有很多，大家也都见过或者玩过了，在这给大家介绍两种不同的简易方法制作虚拟摇杆。

一、NGUI做虚拟摇杆

1.首先

将NGUII插件导入Unity中，如图：

         （图1）

链接：https://pan.baidu.com/s/1YhnN5ixxn58HUThoukdTZA  密码：eelw

2.导入NGUI插件后

                                                      （图2）

      （图3）

点击NGUI添加一个Sprite命名为JoyStick并为其添加一个Box Collider（注意：添加Box Collider时要选中该物体并在Scene窗口中点击右键添加，添加的Box Collider是作为触发器使用，所以不要忘记勾选Is  Trigger）如图：

            （图4）

之后再在JoyStick下方创建一个子物体（Sprite）命名为CenterPos，如上图3所示

3.以上工作完成以后

给JoyStick物体上添加一个脚本（名字自起），脚本内容如下：

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

public class Move : MonoBehaviour {
    //确定是否按压到屏幕
    public bool IsPress;
    //虚拟摇杆的边缘限制框
    public GameObject JoyStick;
    //虚拟摇杆
    public GameObject CenterPos;
    //触碰的ID值
    public int TouchId;
    public Camera uicamera;
    //虚拟摇杆的边缘限制框Sprite的半径
    public float SpriteWidth;
    private void Awake()
    {
        SpriteWidth = this.gameObject.GetComponent<UISprite>().width/2;
    }
    //NGUI中UIEventTrigger脚本中自带的方法
    void OnPress(bool ispress)
    {
        IsPress = ispress;
       //初始触碰的ID
        TouchId = UICamera.currentTouchID;
       
    }
	
	// Update is called once per frame
	void Update () {

        if (IsPress)
        {
            //1.得到触碰的位置
            Vector2 mousePos = UICamera.GetTouch(TouchId, false).pos;
            //2.虚拟按键的初始位置
            Vector2 JoyStick = new Vector2(uicamera.WorldToScreenPoint(this.transform.position).x, 
                                           uicamera.WorldToScreenPoint(this.transform.position).y);
            //3.触碰点到虚拟按键中心点的距离
            float dis = Vector3.Distance(mousePos, JoyStick);
            //4.如果触碰点到虚拟按键位置的距离>SpriteWidth
            if (dis>SpriteWidth)
            {
                //则虚拟摇杆的相对坐标最大为SpriteWidth
                CenterPos.transform.localPosition = (mousePos - JoyStick).normalized*SpriteWidth;
            }
            else
            {
                //相对的  虚拟摇杆的相对坐标为 触碰点到虚拟按键中心点的相对向量
                CenterPos.transform.localPosition = mousePos - JoyStick;
            }
            //如果想控制玩家的移动加上下面这句代码，这里的Cube代表玩家，玩家的移动速度根据自己的情况调节
            GameObject.Find("Cube").transform.position += new Vector3((mousePos - JoyStick).normalized.x, 0, 
                                                                      (mousePos - JoyStick).normalized.y)*Time.deltaTime*10f;

        }
        else
        {
            //触碰事件一旦结束，虚拟摇杆的位置回归原位置
            CenterPos.transform.localPosition = Vector2.zero;
        }

	}
}

这里对于刚入门的朋友有必要说一下脚本中的normalized（归一化）即：当归一化后，返回向量的长度为1，当归一化后，向量保持同样的方向。

这里的所有对象用Public定义是为了在unity中更清楚的观察对象的变化，大家可以根据自己的喜好定义。NGUI的摇杆制作到这里就结束了。

二、UGUI简易摇杆制作

UGUI的场景搭建和NGUI 的大致相同，区别在于UGUI只需要直接搭建场景，不多说，直接上图：

场景搭建完后需要在Project中导入一个脚本

链接：https://pan.baidu.com/s/19KClAdF-xRbhBvlPA825oQ 密码：vhe7

之后在给JoyStick物体上添加一个脚本（名字自起），脚本内容如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class JoyStickTest : MonoBehaviour {
    public GameObject centerObj;//定义出小圆盘
    public float range;//范围
	// Use this for initialization
	void Start () {
        centerObj = transform.Find("CenterObj").gameObject;//赋值
        UIEventTrigger.Get(this.gameObject).onPointerDown = BtnEvent;//.调用uiEventTrigger.get方法
	}
    public void BtnEvent(PointerEventData data)
    {
        StartCoroutine("Move");//调用协程Move
    }
    IEnumerator Move()
    {
        while (Input.GetMouseButton(0))//按下鼠标左键
        {
            Vector3 mousePos = new Vector3(Input.mousePosition.x,Input.mousePosition.y,0);//鼠标的位置
            Vector3 offset = mousePos - this.transform.position;//偏移量
            //给小圆盘坐标赋值
            if (offset.magnitude>range)
            {
                offset = offset.normalized * range;
            }
            //此处为给玩家赋值，控制玩家移动。
            GameObject.Find("Player").transform.position += new Vector3(offset.normalized.x, 0, offset.normalized.y) * Time.deltaTime * 5;

            centerObj.transform.position = this.transform.position+offset;

            yield return null;
        }
        //小圆盘相对坐标归零
        centerObj.transform.localPosition = Vector2.zero;


    }

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

此脚本运用了协程控制，不理解的可以查询协程的使用，在此就不多解释了。

到此UGUI的虚拟摇杆制作就完成了。