Unity用UGUI做虚拟摇杆

上图是示例图片：

虚拟摇杆主要是开发移动端的游戏用的，市面上这样的游戏有很多，大家也都见过或者玩过了，今天我就给大家说一个巨简单的方法做这个虚拟摇杆，不需要用三角函数，不需要用什么sin，cos的，直接用Unity自带的UGUI就可以了。

正式开始：

现在场景中新建一个panel，创建之后unity自动生成一个Canvas画布，然后把panel重命名为joystickwin，这个对象就是摇杆的背景了，也是摇杆的活动范围，背景大家可以随便弄个圆圈的图片或者什么都不弄也可以的。我是弄了一个蓝色半透明的圆圈。

然后看右边的组件面板，找到上图中的Canvas Scaler组件，把UI缩放模式改成scale with screen size。

然后把joystickwin对象的中点（也就是图中圆圈四个箭头的那个东西）对齐到左Canvas的左下角，怎么对齐就不用说了吧，如果这都不会的话，那么你还是回去复习一下UGUI的教程吧^_^

在joystickswin对象下创建一个d-pad对象，也就是蓝色的摇杆了，父子关系如图所示，d-pad的父对象是joystickswin。

转到p-pad的组件面板，改好图片，添加Event Trigger组件，然后添加两个event事件，事件列表如下图所示：

这里我们只需要两个事件就好了，一个是鼠标拖拽（Drag），一个是鼠标松开（PointUp）。事件的用法是这样的：比如说drag事件吧，拖拽的时候会调用指定对象的指定方法。

说到方法，我们肯定要写一段脚本才能调用了。

下面写一段UIjoysticks的脚本

[csharp]  view plain  copy

1. using System.Collections;  
2. using System.Collections.Generic;  
3. using UnityEngine;  
4. using UnityEngine.EventSystems;  
5.   
6. public class UIjoysticks : MonoBehaviour {  
7.   
8.     //虚拟方向按钮初始位置  
9.     public Vector3 initPosition;  
10.     //虚拟方向按钮可移动的半径  
11.     public float r;  
12.     //border对象  
13.     public Transform border;  
14.     void Start () {  
15.         //获取border对象的transform组件  
16.         border = GameObject.Find("border").transform;  
17.         initPosition = GetComponentInParent<RectTransform>().position;  
18.         r = Vector3.Distance(transform.position, border.position);  
19.   
20.     }  
21.     //鼠标拖拽  
22.     public void OnDragIng()  
23.     {  
24.         //如果鼠标到虚拟键盘原点的位置 < 半径r  
25.         if (Vector3.Distance(Input.mousePosition, initPosition) < r)  
26.         {  
27.             //虚拟键跟随鼠标  
28.             transform.position = Input.mousePosition;  
29.         }  
30.         else {  
31.             //计算出鼠标和原点之间的向量  
32.             Vector3 dir = Input.mousePosition - initPosition;  
33.             //这里dir.normalized是向量归一化的意思，实在不理解你可以理解成这就是一个方向，就是原点到鼠标的方向，乘以半径你可以理解成在原点到鼠标的方向上加上半径的距离  
34.             transform.position = initPosition + dir.normalized * r;  
35.         }  
36.     }  
37.     //鼠标松开  
38.     public void OnDragEnd()  
39.     {  
40.         //松开鼠标虚拟摇杆回到原点  
41.         transform.position = initPosition;  
42.     }  
43. }  

代码中有一个对象大家可能不是很理解，就是那个border对象，图里也能看到这个对象，这个对象的设置看下图：

border的中点是跟joystickswin的右边中点对齐的，由于UGUI的自适应性这个中点始终都会在joysticks的右边。

之所以要这个中点，是为了计算这个中点到原点的距离，也就是得出半径r的数值。

现在脚本已经写完了，回到d-pad对象的组件面板，找到event trigger面板，下面还空着两个事件呢，把d-pad对象拖到这两个事件上，调用的方法也就是代码中的OnDragIng()和OnDragEnd()方法了，看字面意思也知道怎么选了吧。

可能方法列表里没有这俩方法，那是你忘记了把这俩方法设为public了，回去脚本改一下就好了。

大功告成了！运行一下试试！发布到安卓或者IOS试试！是不是贼拉风啊？哈哈哈！