Unity开发WebGL游戏：无摇杆设备时摇杆模拟器的选用与使用方法

一、Unity官方Input System虚拟摇杆（无额外插件，首选） #

这是Unity自带的解决方案，无需额外资源，适配性强：

• 安装配置：打开Package Manager，搜索Input System安装，重启Unity后在Player Settings中启用Input System作为输入后端。
• 创建摇杆：在Hierarchy右键→UI→Input System UI→Virtual Joystick，调整摇杆的位置、大小等UI参数。
• 绑定控制：选中虚拟摇杆，在Inspector面板的Actions字段绑定对应的输入动作（比如新建一个PlayerMovement动作，将摇杆的Horizontal、Vertical轴关联到动作的X、Y属性）。
• WebGL适配与测试：发布WebGL时，确保Player Settings→Input System Package→WebGL Settings中启用触摸/鼠标输入支持。测试时在浏览器中用鼠标拖动摇杆，或用触屏设备直接操作。

二、第三方插件：EasyTouch（功能丰富） #

如果需要更多自定义功能，可选择Asset Store的EasyTouch：

• 导入插件：从Unity Asset Store下载并导入EasyTouch包。
• 创建摇杆：点击顶部菜单EasyTouch→Create Joystick，在Inspector中设置摇杆的激活区域、外观样式。
• 获取输入：在角色控制脚本中通过API读取摇杆数据，示例代码：

void Update()
{
    float horizontal = EasyTouch.GetAxis("Horizontal");
    float vertical = EasyTouch.GetAxis("Vertical");
    // 用horizontal和vertical控制角色移动
    transform.Translate(new Vector3(horizontal, 0, vertical) * Time.deltaTime * moveSpeed);
}

• WebGL测试：发布前确认插件支持WebGL平台，测试逻辑同官方方案。

三、自定义虚拟摇杆（完全可控） #

如果不想依赖插件，可快速实现轻量摇杆：

• UI搭建：创建两个RectTransform，一个作为摇杆底座（背景），一个作为摇杆柄（前景），将摇杆柄作为底座的子物体。
• 核心脚本：编写监听触摸/鼠标事件的脚本，计算摇杆输入值：

using UnityEngine;
using UnityEngine.EventSystems;

public class CustomJoystick : MonoBehaviour, IDragHandler, IPointerUpHandler, IPointerDownHandler
{
    private RectTransform _joystickBg;
    private RectTransform _joystickHandle;
    public Vector2 InputVector { get; private set; }

    void Awake()
    {
        _joystickBg = GetComponent<RectTransform>();
        _joystickHandle = transform.GetChild(0).GetComponent<RectTransform>();
    }

    public void OnDrag(PointerEventData eventData)
    {
        if (RectTransformUtility.ScreenPointToLocalPointInRectangle(_joystickBg, eventData.position, eventData.pressEventCamera, out Vector2 localPos))
        {
            localPos.x /= _joystickBg.sizeDelta.x;
            localPos.y /= _joystickBg.sizeDelta.y;

            InputVector = new Vector2(localPos.x * 2 - 1, localPos.y * 2 - 1);
            InputVector = InputVector.magnitude > 1 ? InputVector.normalized : InputVector;

            _joystickHandle.anchoredPosition = new Vector2(InputVector.x * (_joystickBg.sizeDelta.x / 3), InputVector.y * (_joystickBg.sizeDelta.y / 3));
        }
    }

    public void OnPointerDown(PointerEventData eventData) => OnDrag(eventData);

    public void OnPointerUp(PointerEventData eventData)
    {
        InputVector = Vector2.zero;
        _joystickHandle.anchoredPosition = Vector2.zero;
    }

    public float GetHorizontal() => InputVector.x;
    public float GetVertical() => InputVector.y;
}

• 集成使用：在角色脚本中获取CustomJoystick组件的GetHorizontal()和GetVertical()值，驱动角色移动。

注意事项 #

• 测试WebGL时，优先用触屏设备或Chrome DevTools的设备模拟功能，更贴近真实用户场景。
• 调整摇杆UI的锚点和适配设置，确保在不同分辨率的Web页面中显示正常。

内容的提问来源于stack exchange，提问作者BlackDragon94