使用UGUI制作自己的虚拟摇杆

作者原话：
最近因为项目需要决定尝试自己来实现一个虚拟摇杆，所以在今天的文章中我们的目标是使用uGUI来制作一个可以在移动平台稳定运行的虚拟摇杆(请不要问我为什么不使用NGUI来实现，你说我做个虚拟摇杆有必要在项目里导入那么多的资源嘛23333)。


原帖地址见末尾
虚拟摇杆这种输入方式相信大家在手机游戏平台上已经相当的熟悉了，首先我们来简单了解下虚拟摇杆的设计原理。
虚拟摇杆有一张固定的2D贴图(背景层)和一张可拖动的2D贴图(控制层)构成，
默认情况下控制层在背景层的中心，我们称这个位置为初始位置，当移动控制层后移动层的位置会发生变化，


此时控制层的当前位置和初始位置两点间可以计算出一个2D向量，通过这个向量我们就可以判断虚拟摇杆的移动方向。在经典的八方向摇杆导航中摇杆中可移动方向被分成了上、左上、右上、下、左下、右下、左、右共8个方向。
我们知道根据三角函数可以非常容易地计算出这个2D向量的角度并由此判定摇杆是在向着这8个方向中的哪一个方向移动。
在今天的文章中，我们不需要考虑这8个方向，因为我们可以向任何一个方向进行移动。
  好了，首先在场景中创建两个Image组件和一个空的游戏体，然后将这两个Image组件拖拽到这个空的游戏体下使它们称为其子节点。这里需要注意的是这两个Image的层级关系。现在我们来编写脚本，这个脚本将被添加到控制层物体上：

1. /*
   
2. * uGUI虚拟摇杆
   
3. * 作者：秦元培
   
4. * 博客：[url]http://qinyuanpei.com[/url]
   
5. * 时间：2015年10月24日
   
6. */
   
7. 
   
8. using UnityEngine;
   
9. using System.Collections;
   
10. using UnityEngine.UI;
    
11. using UnityEngine.EventSystems;
    
12. 
    
13. public class JoyStick : MonoBehaviour,IPointerDownHandler, IPointerUpHandler, IDragHandler
    
14. {
    
15. 
    
16.     /// <summary>
    
17.     /// 摇杆最大半径
    
18.     /// 以像素为单位
    
19.     /// </summary>
    
20.     public float JoyStickRadius = 50;
    
21. 
    
22.     /// <summary>
    
23.     /// 摇杆重置所诉
    
24.     /// </summary>
    
25.     public float JoyStickResetSpeed = 5.0f;
    
26. 
    
27.     /// <summary>
    
28.     /// 当前物体的Transform组件
    
29.     /// </summary>
    
30.     private RectTransform selfTransform;
    
31. 
    
32.     /// <summary>
    
33.     /// 是否触摸了虚拟摇杆
    
34.     /// </summary>
    
35.     private bool isTouched = false;
    
36. 
    
37.     /// <summary>
    
38.     /// 虚拟摇杆的默认位置
    
39.     /// </summary>
    
40.     private Vector2 originPosition;
    
41. 
    
42.     /// <summary>
    
43.     /// 虚拟摇杆的移动方向
    
44.     /// </summary>
    
45.     private Vector2 touchedAxis;
    
46.     public Vector2 TouchedAxis
    
47.     {
    
48.         get
    
49.         {
    
50.             if(touchedAxis.magnitude < JoyStickRadius)
    
51.                 return touchedAxis.normalized / JoyStickRadius;
    
52.             return touchedAxis.normalized;
    
53.         }
    
54.     }
    
55. 
    
56.     /// <summary>
    
57.     /// 定义触摸开始事件委托
    
58.     /// </summary>
    
59.     public delegate void JoyStickTouchBegin(Vector2 vec);
    
60. 
    
61.     /// <summary>
    
62.     /// 定义触摸过程事件委托
    
63.     /// </summary>
    
64.     /// <param name="vec">虚拟摇杆的移动方向</param>
    
65.     public delegate void JoyStickTouchMove(Vector2 vec);
    
66. 
    
67.     /// <summary>
    
68.     /// 定义触摸结束事件委托
    
69.     /// </summary>
    
70.     public delegate void JoyStickTouchEnd();
    
71. 
    
72.     /// <summary>
    
73.     /// 注册触摸开始事件
    
74.     /// </summary>
    
75.     public event JoyStickTouchBegin OnJoyStickTouchBegin;
    
76. 
    
77.     /// <summary>
    
78.     /// 注册触摸过程事件
    
79.     /// </summary>
    
80.     public event JoyStickTouchMove OnJoyStickTouchMove;
    
81. 
    
82.     /// <summary>
    
83.     /// 注册触摸结束事件
    
84.     /// </summary>
    
85.     public event JoyStickTouchEnd OnJoyStickTouchEnd;
    
86. 
    
87.     void Start ()
    
88.     {
    
89.         //初始化虚拟摇杆的默认方向
    
90.         selfTransform = this.GetComponent<RectTransform>();
    
91.         originPosition = selfTransform.anchoredPosition;
    
92.     }
    
93. 
    
94. 
    
95.     public void OnPointerDown(PointerEventData eventData)
    
96.     {
    
97.         isTouched = true;
    
98.         touchedAxis = GetJoyStickAxis(eventData);
    
99.         if(this.OnJoyStickTouchBegin != null)
    
100.             this.OnJoyStickTouchBegin(TouchedAxis);
     
101.     }
     
102. 
     
103.     public void OnPointerUp(PointerEventData eventData)
     
104.     {
     
105.         isTouched = false;
     
106.         selfTransform.anchoredPosition = originPosition;
     
107.         touchedAxis = Vector2.zero;
     
108.         if(this.OnJoyStickTouchEnd != null)
     
109.             this.OnJoyStickTouchEnd();
     
110.     }
     
111. 
     
112.     public void OnDrag(PointerEventData eventData)
     
113.     {
     
114.         touchedAxis = GetJoyStickAxis(eventData);
     
115.         if(this.OnJoyStickTouchMove != null)
     
116.             this.OnJoyStickTouchMove(TouchedAxis);
     
117.     }
     
118. 
     
119. 
     
120.     void Update()
     
121.     {
     
122.         //当虚拟摇杆移动到最大半径时摇杆无法拖动
     
123.         //为了确保被控制物体可以继续移动
     
124.         //在这里手动触发OnJoyStickTouchMove事件
     
125.         if(isTouched && touchedAxis.magnitude>=JoyStickRadius)
     
126.         {
     
127.             if(this.OnJoyStickTouchMove != null)
     
128.                 this.OnJoyStickTouchMove(TouchedAxis);
     
129.         }
     
130. 
     
131.         //松开虚拟摇杆后让虚拟摇杆回到默认位置
     
132.         if(selfTransform.anchoredPosition.magnitude > originPosition.magnitude)
     
133.             selfTransform.anchoredPosition -= TouchedAxis * Time.deltaTime * JoyStickResetSpeed;
     
134.     }
     
135. 
     
136.     /// <summary>
     
137.     /// 返回虚拟摇杆的偏移量
     
138.     /// </summary>
     
139.     /// <returns>The joy stick axis.</returns>
     
140.     /// <param name="eventData">Event data.</param>
     
141.     private Vector2 GetJoyStickAxis(PointerEventData eventData)
     
142.     {
     
143.         //获取手指位置的世界坐标
     
144.         Vector3 worldPosition;
     
145.         if (RectTransformUtility.ScreenPointToWorldPointInRectangle (selfTransform,
     
146.                  eventData.position, eventData.pressEventCamera, out worldPosition))
     
147.             selfTransform.position = worldPosition;
     
148.         //获取摇杆的偏移量
     
149.         Vector2 touchAxis = selfTransform.anchoredPosition-originPosition;
     
150.         //摇杆偏移量限制
     
151.         if(touchAxis.magnitude >= JoyStickRadius)
     
152.         {
     
153.             touchAxis = touchAxis.normalized * JoyStickRadius;
     
154.             selfTransform.anchoredPosition = touchAxis;
     
155.         }
     
156.         return touchAxis;
     
157.     }
     
158. 
     
159. 
     
160. }

点击此处复制文本

在这段脚本中，我们实现了OnPointerDown、OnPointerUp和OnDrag三个uGUI事件接口，
然后注册了相关的事件委托，这里借鉴了EasyTouch的设计，可以使得虚拟摇杆的逻辑和角色控制逻辑相互分离。

这里的核心方法是GetJoyStickAxis()方法，
通过这个方法我们可以获得一个Vector2类型的值，它表示的是未标准化过的虚拟摇杆的偏移量。

这里的RectTransformUtility.ScreenPointToWorldPointInRectangle()方法表示将一个屏幕坐标转化为对应RectTransform的世界坐标，

RectTransform的anchoredPosition属性表示的是当前元素在场景中的屏幕坐标。

我们知道屏幕坐标是以像素为单位的，因此这里使用屏幕坐标可以计算出虚拟摇杆在水平方向和垂直方向上移动了多少个像素，
我们以此来作为虚拟摇杆的偏移量衡量指标。


TouchedAxis是经过标准化以后的偏移量，我们将把这个值传递到事件委托中以提供给外部来调用。
好了，要说的就这些了，没有说到的大家可以看看代码里的注释或者是在博客中给我留言，就是这样啦。
&#8195;&#8195;接下来，我们在场景中添加一个角色模型来测试我们编写的虚拟摇杆，因为在JoyStick中我们已经定义了事件委托，所以在这里就是简单的调用啦。好了，我们一起来看看代码吧！

1. /*
   
2. * Joystick3D.cs
   
3. * 3D模式下的虚拟摇杆测试
   
4. * 作者：秦元培
   
5. * 博客：[url]http://qinyuanpei.com[/url]
   
6. * 时间：2015年10月30日
   
7. */
   
8. 
   
9. using UnityEngine;
   
10. using System.Collections;
    
11. 
    
12. public class JoyStick3D : MonoBehaviour
    
13. {
    
14. 
    
15.     private JoyStick js;
    
16.      
    
17.     void Start ()
    
18.     {
    
19.         js = GameObject.FindObjectOfType<JoyStick> ();
    
20.         js.OnJoyStickTouchBegin += OnJoyStickBegin;
    
21.         js.OnJoyStickTouchMove += OnJoyStickMove;
    
22.         js.OnJoyStickTouchEnd += OnJoyStickEnd;
    
23.     }
    
24.      
    
25. 
    
26.     void OnJoyStickBegin(Vector2 vec)
    
27.     {
    
28.         Debug.Log("开始触摸虚拟摇杆");
    
29.     }
    
30. 
    
31.     void OnJoyStickMove (Vector2 vec)
    
32.     {
    
33.         Debug.Log("正在移动虚拟摇杆");
    
34. 
    
35.         //设置角色朝向
    
36.         Quaternion q = Quaternion.LookRotation (new Vector3 (vec.x, 0, vec.y));
    
37.         transform.rotation = q;
    
38. 
    
39.         //移动角色并播放奔跑动画
    
40.         transform.Translate(Vector3.forward * 75f * Time.deltaTime);
    
41.         animation.CrossFade("Run");
    
42.     }
    
43.      
    
44.     void OnJoyStickEnd ()
    
45.     {
    
46.         Debug.Log("触摸移动摇杆结束");
    
47. 
    
48.         //播放默认待机动画
    
49.         animation.CrossFade("idle");
    
50.     }
    
51. 
    
52.     void OnGUI()
    
53.     {
    
54.         GUI.Label(new Rect(30,30,200,30),"3D模式下的虚拟摇杆测试");
    
55.     }
    
56. }

点击此处复制文本

最终程序的运行效果如下图所示，我们编写的这个虚拟摇杆可以在手机上完美的运行，欢饮大家来一起测试和吐槽！2D模式、

3D模式




原帖地址：http://qinyuanpei.com/2015/10/30 ... e-virtual-joystick/

更多精彩图片 请登录

天下武功出少林，世界资源入元素！

元素帖子强，满满正能量！

这个可以有，就是程序员不太多啊，看不明白

{:1_144:}

赞赞赞赞赞赞

如果使用easytouch岂不是更方便？

我好像来过,感谢楼主分享教程

好东西就要收藏

看起来很强大,学习了.

正好刚刚需要，谢谢大神，赞！！！

正好刚刚需要，谢谢大神，赞！！！

文能提笔控萝莉

此贴甚好，朕已阅，且阅且珍惜！

资源发布哪家强？元素首发称大王！

带你赚币带你飞，元素里面有正妹