UI设计手游摇杆并且进行简单控制角色移动

该部分可分为两个部分

第一个部分为UI手游中的摇杆设计即使用效果

第二部分为通过摇杆来进行简单的人物移动

第一部分摇杆使用

      首先我们可以先新建一个UI Image的圆形图片UI，将它看作一个摇杆的外围，在该图片UI下面再新建一个圆形UI Image,作为摇杆的控制圆形，如下图所示

这样一个简单的UI就搭建好了，我们可以在内部的圆形UI上面创建一个脚本作为控制脚本

新建脚本，因为为UI脚本，所有在脚本基础上需要添加以下两个

using UnityEngine.UI;
using UnityEngine.EventSystems;

因为摇杆是通过拖动来进行操作，我们是通过鼠标的操作来进行拖动，所有需要添加三个触发事件，分别为鼠标开始拖动，鼠标拖动中，鼠标停止拖动，如图

public class yaogan : MonoBehaviour,
    IBeginDragHandler,
    IDragHandler,
    IEndDragHandler

这是，鼠标右键事件，点击快速操作中的构造即可自动生成相应代码块，例如以下为鼠标开始拖动时触发事件，一开始时，括号内为空，如果右出现一行代码可以直接删除

 public void OnBeginDrag(PointerEventData eventData)
    {
        //存储拖拽第一帧的鼠标坐标
        beforeMousePosition = Input.mousePosition;
    }

将三个触发事件都快捷创建好后，就可以开始进行新建一些需要的初始变量，如以下

 [Header("摇杆移动半径")]
    public float yaogaoMoveRadius = 100;
 private CharacterController Player;
    //摇杆初始位置
    public Vector3 originPos;
    //拖动距离
    public float distance;
    //圆心指向鼠标的方向向量
//移动向量
    private Vector3 moveDir;

 

首先我们应该先获取以下摇杆的初始位置，即UI中我们放置的内圆一开始的位置

  private void Start()
    {
        //摇杆当前位置
        originPos = transform.position;
    }

       下面就到了这个案例的比较麻烦的地方，摇杆内圆通过鼠标拖动进行操作，当鼠标内圆碰到外圆的边线位置时候，应该停下不动，不能继续向外面移动。这里，我们已经弄好了两个变量，一个是摇杆可以移动的半径，这里指的就是外圆的一个范围，即单内圆摇杆触碰到这个范围，就应该停下来，另外一个是圆心到鼠标移动之间的距离。如果鼠标内圆在我们设置好的范围内进行移动，就可以自由移动过，如果鼠标内圆超过了我们设置好的半径，则让它停止下来。同时重置距离

这个部分放在IDragHandler,IEndDragHandler所在的快速生成中进行，代码如下

public void OnDrag(PointerEventData eventData)
    {
        //计算鼠标和原点的距离，方法一
        //distance = Vector3.Distance(Input.mousePosition, originPos);

        //求移动向量
        moveDir = Input.mousePosition - beforeMousePosition;

        //保存当前帧的鼠标坐标,提供给下一帧运算
        beforeMousePosition = Input.mousePosition;

        //鼠标所指的距离减去圆心距离,方向向量
        dir = Input.mousePosition - originPos;
        //计算鼠标和原点的距离,方法二，即等于dir的长度
        distance = dir.magnitude;
        if (distance < yaogaoMoveRadius)
        {
            //鼠标移动
            transform.position = Input.mousePosition;
        }
        else
        {
            //求圆心指向遥感边的方向向量
            transform.position =
                dir.normalized * yaogaoMoveRadius + originPos;
        }
        
        
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        //摇杆回到原始位置
        transform.position = originPos;
        //松开时方向向量归零
        moveDir = Vector3.zero;
    }

这样子第一部分就完成了

第二部分是利用摇杆进行简单的人物移动

这边我们可以新建一个地面，简单建个椭圆代替人物

在人物的Inspector上新建一个Tag标签为Player

标签搭建方法为点击倒三角形，点击新建，然后设置标签名字，再次点击倒三角形图标添加你新建好的就可以了。

这时候回到我们原来的简本当中

首先新添加几个新的变量，我这边显示的是完整的变量

 [Header("摇杆移动半径")]
    public float yaogaoMoveRadius = 100;
    [Header("玩家移动速度")]
    public float speed = 3f;
    //控制玩家
    private CharacterController Player;
    //摇杆初始位置
    public Vector3 originPos;
    //拖动距离
    public float distance;
    //圆心指向鼠标的方向向量
    private Vector3 dir;
    //移动向量
    private Vector3 moveDir;
    //上一帧的鼠标坐标
    private Vector3 beforeMousePosition;

在一开始中，要先通过标签找到游戏对象

private void Awake()
    {
        Player = GameObject.FindWithTag("Player")
            .GetComponent<CharacterController>();
    }

这边需要写一个控制玩家的方法，因为这边控制玩家，在玩家的Inspector下添加了一个新的脚本

Character Controller,如下玩家的变量使用SimpleMove而不是常规的transform

 public void PlayerControl()
    {
      
        //一般使用SimpleMove
        Player.SimpleMove(new Vector3
           (moveDir.x, 0, moveDir.y).normalized * Time.deltaTime * speed);
    }

这是在更新一些开始拖拽以及拖拽过程中的代码

 public void OnBeginDrag(PointerEventData eventData)
    {
        //存储拖拽第一帧的鼠标坐标
        beforeMousePosition = Input.mousePosition;
    }
    

    public void OnDrag(PointerEventData eventData)
    {
        //计算鼠标和原点的距离，方法一
        //distance = Vector3.Distance(Input.mousePosition, originPos);

        //求移动向量
        moveDir = Input.mousePosition - beforeMousePosition;

        //保存当前帧的鼠标坐标,提供给下一帧运算
        beforeMousePosition = Input.mousePosition;

        //鼠标所指的距离减去圆心距离,方向向量
        dir = Input.mousePosition - originPos;
        //计算鼠标和原点的距离,方法二，即等于dir的长度
        distance = dir.magnitude;
        if (distance < yaogaoMoveRadius)
        {
            //鼠标移动
            transform.position = Input.mousePosition;
        }
        else
        {
            //求圆心指向遥感边的方向向量
            transform.position =
                dir.normalized * yaogaoMoveRadius + originPos;
        }
        
        
    }

同时将控制玩家的代码放置在Update里面就可以了

  private void Update()
    {
        PlayerControl();
    }

上诉描述有些混乱，以下有小编完整代码

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

///<summary>
///
///</summary>
public class yaogan : MonoBehaviour,
    IBeginDragHandler,
    IDragHandler,
    IEndDragHandler

{
    [Header("摇杆移动半径")]
    public float yaogaoMoveRadius = 100;
    [Header("玩家移动速度")]
    public float speed = 3f;
    //控制玩家
    private CharacterController Player;
    //摇杆初始位置
    public Vector3 originPos;
    //拖动距离
    public float distance;
    //圆心指向鼠标的方向向量
    private Vector3 dir;
    //移动向量
    private Vector3 moveDir;
    //上一帧的鼠标坐标
    private Vector3 beforeMousePosition;

    private void Awake()
    {
        Player = GameObject.FindWithTag("Player")
            .GetComponent<CharacterController>();
    }
    private void Start()
    {
        //摇杆当前位置
        originPos = transform.position;
    }

    private void Update()
    {
        PlayerControl();
    }
   
    public void OnBeginDrag(PointerEventData eventData)
    {
        //存储拖拽第一帧的鼠标坐标
        beforeMousePosition = Input.mousePosition;
    }
    

    public void OnDrag(PointerEventData eventData)
    {
        //计算鼠标和原点的距离，方法一
        //distance = Vector3.Distance(Input.mousePosition, originPos);

        //求移动向量
        moveDir = Input.mousePosition - beforeMousePosition;

        //保存当前帧的鼠标坐标,提供给下一帧运算
        beforeMousePosition = Input.mousePosition;

        //鼠标所指的距离减去圆心距离,方向向量
        dir = Input.mousePosition - originPos;
        //计算鼠标和原点的距离,方法二，即等于dir的长度
        distance = dir.magnitude;
        if (distance < yaogaoMoveRadius)
        {
            //鼠标移动
            transform.position = Input.mousePosition;
        }
        else
        {
            //求圆心指向遥感边的方向向量
            transform.position =
                dir.normalized * yaogaoMoveRadius + originPos;
        }
        
        
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        //摇杆回到原始位置
        transform.position = originPos;
        //松开时方向向量归零
        moveDir = Vector3.zero;
    }

    public void PlayerControl()
    {
        //玩家移动 , .normalized目的是控制速度
        //Player.position += new Vector3
        //(dir.x,0,dir.y).normalized * Time.deltaTime * speed;
        //Player.Move(new Vector3
            //(moveDir.x, 0, moveDir.y).normalized * Time.deltaTime * speed);

        //一般使用SimpleMove
        Player.SimpleMove(new Vector3
           (moveDir.x, 0, moveDir.y).normalized * Time.deltaTime * speed);
    }
}

以上为本次UI小案例的全部内容，由于小编也是初学者，对以上内容掌握不是很全，有说明不好的地方请多原谅，如果对您有帮助麻烦您点个赞谢谢。欢迎留言一起讨论学习。