区域摇杆制作

区域摇杆

介绍
界面制作
脚本
总结

介绍

我之前讲过摇杆，那么看到现在游戏做区域摇杆的更多一些，那么我们来剖析一下。说白了区域摇杆就是在之前固定摇杆的基础上增加了一个启动事件，当我们开始拖拽的时候，我们将摇杆现实启动然后位置是按照开始拖拽的位置来进行摇杆中心点的移动，然后当停止拖拽时，则摇杆就回到原来位置并且隐藏。说白了就是启动事件 + 固定摇杆的显示隐藏位置变换就是区域摇杆，下面我会把我的做法讲一下，如果有更好的方法可以跟我说下。

请添加图片描述

界面制作

我这里做的是1920 * 1080的如果进入拖拽不准确，可以设置成1920 * 1080的分辨率
在这里插入图片描述

最外层是一个铺满的Image，这里主要用于接收拖拽使用
在这里插入图片描述

这里创建一个背景底板，大小根据自己需要调整，这里我设置的长款都是200，居中展示界面即可

在这里插入图片描述
在创建一个中心的拖拽点，这里大小我设置的80，中心居中即可

将底板和中心拖拽的点直接隐藏即可

脚本

该脚本挂载到拖拽中心上
在这里插入图片描述

原理就不讲了，可以看看我之前的普通摇杆文章，这个脚本是改动过的普通摇杆脚本

Joystick.cs

using UnityEngine;
using UnityEngine.EventSystems;


public class Joystick : MonoBehaviour
{
    /// <summary>
    /// 最大距离
    /// </summary>
    private float m_maxDis = 100;

    /// <summary>
    /// 初始位置
    /// </summary>
    private Vector2 m_originalPos;

    /// <summary>
    /// 当前半径
    /// </summary>
    private float m_radius;

    /// <summary>
    /// 底板背景
    /// </summary>
    [SerializeField]
    private GameObject m_joystick_bg;

    // Use this for initialization
    void Start()
    {
        m_originalPos = transform.position;
        m_maxDis = m_joystick_bg.GetComponent<RectTransform>().sizeDelta.x / 2;
    }

    #region UI相关

    /// <summary>
    /// 初始设置
    /// </summary>
    public void InitSet(Vector2 pos)
    {
        ShowUI(true);
        m_joystick_bg.transform.position = pos;
        transform.position = pos;
        m_originalPos = pos;
    }

    /// <summary>
    /// UI设置
    /// </summary>
    /// <param name="isShow"></param>
    public void ShowUI(bool isShow)
    {
        if (!m_joystick_bg) return;
        m_joystick_bg.gameObject.SetActive(isShow);
        gameObject.SetActive(isShow);
    }

    #endregion

    #region 滑动事件

    public void OnDrag(PointerEventData eventData)
    {

        //偏移量
        Vector2 dir = eventData.position - m_originalPos;

        //获取向量长度
        float distance = Vector3.Magnitude(dir);

        //获取当前
        m_radius = Mathf.Clamp(distance, 0, m_maxDis);

        //位置赋值
        transform.position = dir.normalized * m_radius + m_originalPos;

    }

    public void OnEndDrag(PointerEventData eventData)
    {
        transform.position = m_originalPos;
    }

    #endregion

}

这个才是真正拖拽的拖拽事件具体逻辑
TouchMoveArea.cs
挂载到最外层上并且持有摇杆
在这里插入图片描述

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

public class TouchMoveArea : MonoBehaviour, IPointerDownHandler, IPointerUpHandler, IEndDragHandler, IDragHandler
{
    /// <summary>
    /// 摇杆
    /// </summary>
    public Joystick m_joy;

    #region 滑动事件

    public void OnDrag(PointerEventData eventData)
    {
        if (!m_joy) return;
        m_joy.OnDrag(eventData);
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        if (!m_joy) return;
        m_joy.OnEndDrag(eventData);
    }

    #endregion

    #region 按下抬起事件

    public void OnPointerDown(PointerEventData eventData)
    {
        m_joy.InitSet(eventData.position);
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        m_joy.ShowUI(false);
    }

    #endregion
}