Unity微信小游戏小窗口模式点击适配

1. 问题描述

项目使用UGUI方案，以点击交互为主。

微信unity方案本身只能调PixelRatio，不能直接调整Unity的分辨率，（还没有测试过“自适应屏幕尺寸”会怎么样），不过看前段时间热门的unity小游戏项目《无尽冬日》也没有对分辨率进行适配，采用了分辨率拉伸的模式。

简单以我自己的手机举例，如果正常打开微信，再打开小游戏，分辨率是1080x2461，如果把小游戏的窗口单独拖到小窗口模式，WeChatWASM.WX.OnWindowResize()的回调给的分辨率是1080x1729，但因为不能调整Unity的分辨率，所以整个画面是拉伸的。反过来，如果先打开微信，把微信拉成小窗口，再打开小游戏，之后再把小游戏全屏，效果会反过来。

画面拉伸问题不算太大，但点击响应的问题比较严重，经过测试，以从左到右为x轴，从下到上为y轴，全屏启动小游戏再拉到小窗口模式后(1080x1729)，左上角的输入坐标还是正确的(0,2461), 但左下角的坐标就是错误的(0,732)(2461-1729)，导致的现象是越靠近上方的按钮越有可能点对，靠近下方的就点不到了。正确的坐标和输入坐标的关系是

Vector2 GetMousePosition()
{
    var pos = Input.mousePosition;

    int originalHeight = 2461; // 初始化时存储
    int modifiedHeight = 1729; // OnWindowResize() 回调获取
    if (originalHeight == modifiedHeight)
    {
        return pos;
    }

    float resolutionScale = 1; // 分辨率缩放
    float y = pos.y;
    pos.y = (y + (modifiedHeight - originalHeight) * resolutionScale) / modifedHeight * originalHeight;
    return pos;
}

2. 使用InputManager方案(推荐）

测试发现修改BaseInput在编辑器内看着正常，手机上效果错误

直接修改GraphicRaycaster. 注意不要修改eventData.position，测试发现会进行多次传递

public override void Raycast(PointerEventData eventData, List<RaycastResult> resultAppendLit)
{
    // ...

    var eventPosition = Display.RelativeMouseAt(eventData.position);

    // ...

    // 修改 eventPosition

    /// ...
}

代码使用Input.mousePosition的，需要另外封装一下

3. 使用InputSystem

经测试，使用InputSystem，wasm函数会多大概4000个，br包大小增加200K，如果不是已经接入的话不推荐，InputSystem大多数功能微信小游戏都用不到

3.1 从UnityEngine.Input升级到UnityEngine.InputSystem

1. 首先要更新UGUI源码(如果使用embbed模式), 虽然版本号一直是1.0.0, 但还是有多次修改的
2. Window > PackageManager 安装 Input System (本文使用的是1.7.0版本)
3. Editor > Project Settings > OtherSettings > Active Input Handling, 改为"Input System Package" (关闭旧的输入系统)
4. UGUI的事件接入: 找到场景中的EventSystem, 把原本的StandaloneUIInputModule删掉, 挂一个InputSystemUIInputModule上去

3.2 常用API的直接近似替换

需要注意判空

鼠标：

• Input.mousePosition -> Mouse.current.position.ReadValue()
• Input.GetMouseButton(index) -> Mouse.current.leftButton.isPressed | Mouse.current.rightButton.isPressed (下面省略)
• Input.GetMouseButtonDown(index) -> Mouse.current.leftButton.wasPressedThisFrame
• Input.GetMouseButtonUp(index) -> Mouse.current.leftButton.wasReleasedThisFrame
• Input.GetAxis("Mouse ScrollWheel") -> Mouse.current.scroll.ReadValue().y / 120f

键盘（实际只有编辑器在用）：

• Input.GetKey(KeyCode.W) -> Keyboard.current.wKey.isPressed
• Input.GetKey(keyCode) -> switch case
• 键盘的Down\Up也是wasPressedThisFrame\wasReleasedThisFrame

另外鼠标的逻辑替换需要注意判断触屏，以Input.mousePosition为例

public static class Input
{
    public static Vector2 mousePosition
    {
        get {
#if !UNITY_EDITOR && UNITY_WEBGL
            var pos = TouchScreen.current?.primaryTouch.position.ReadValue() ?? Vector2.zero;
#else
            var pos = Mouse.current?.position.ReadValue() ?? Vector2.zero;
#endif
            return pos;
        }
    }
}

3.3 添加作用到UGUI的坐标转换

为了方便修改，直接把InputSystem包改成embbed模式（包文件夹从Library/PackageCache移动到Packages文件夹）

新建Packages/com.unity.inputsystem@xxx/InputSystem/Controls/Processors/ResolutionVector2Processor.cs

namespace UnityEngine.InputSystem.Processors
{
    public class ResolutionVector2Processor : InputProcessor<Vector2>
    {
        // 这些参数自行找时机传递过来即可
        private static int s_OriginalHeight = 0;
        private static int s_ModifiedHeight = 0;
        private static float s_ResolutionScale = 1.0f;

        public override Vector2 Process(Vector2 value, InputControl control)
        {
            // 和第一节的逻辑相同
            if (s_OriginalHeight == s_ModifiedHeight) return value;

            float y = value.y;
            value.y = (y + (s_ModifiedHeight - s_OriginalHeight) * s_ResolutionScale) / s_ModifiedHeight * s_OriginalHeight;
            return value;
        }

        public override string ToString()
        {
            return $"ResolutionVector2()";
        }
    }
}

到Packages/com.unity.inputsystem@xxx/InputSystem/InputManager.cs里面注册一下

internal void InitializeData()
{
    // ...
    processors.AddTypeRegistration("ResolutionVector2", typeof());
    // ...
}

然后在unity中Project窗口选中Packages/com.unity.inputsystem@xxx/InputSystem/Plugins/PlayerInput/DefaultInputActions.inputactions

点击Inspector窗口的Edit asset

ActionMaps选择UI

Actions选择 Point > touch*/position [Touchscreen]

在Processors中添加刚才新建的ResolutionVector2，保存即可

3.4 代码使用Input.mousePosition的，需要另外封装一下