html - Unity WebGL - 防止 吃掉所有鼠标/键盘输入？ (HTML 输入字段)

Question

统一 5.4

构建一个 Unity WebGL 应用程序(不是游戏)来处理 Unity 方面的所有 3D 内容，并且所有 UI 都是使用 HTML/CSS/JS 构建的。默认情况下，WebGLInput.captureAllKeyboardInput 设置为 true，这会导致任何需要键盘(文本)输入的输入字段被破坏，因为任何键盘控件都会被 Unity 自动吃掉而不是转到输入字段。做

#if !UNITY_EDITOR && UNITY_WEBGL
WebGLInput.captureAllKeyboardInput = false;
#endif

修复了输入字段的问题，但导致 unity 忽略所有键盘输入，即使在元素聚焦之后，但是添加

tabindex="1"

修复它，以便 HTML 输入字段上的键盘输入在获得焦点时有效，并且 Unity WebGL 应用程序内的键盘控件在获得焦点时也能正常工作。 (这完全符合文档:https://docs.unity3d.com/ScriptReference/WebGLInput-captureAllKeyboardInput.html)。所以一切正常。

但是，Unity WebGL 应用程序仍然会导致某些使用鼠标(而非键盘)控件的输入字段出现问题。也就是说，我在 input type="range"字段(HTML5 slider )和 input type="number(使用键盘输入数字有效，但鼠标上下点击无效)上注意到了它。

是否有任何解决方法可以解决此问题？我基本上需要防止 Unity WebGL Canvas 不自动接受所有鼠标输入，除非首先单击/聚焦该元素(就像键盘控件的工作方式一样)。在 Unity 方面有什么可以改变来解决这个问题的吗？或者我是否需要编写一些自定义 JavaScript 来处理所有输入并确定它是用于 Unity 场景还是用于 HTML UI？

Answer 1

我遇到了同样的问题，但我相信我已经找到了解决方法!最初我只是打算使用 OnApplicationFocus 来切换 WebGLInput.captureAllKeyboardInput。但是 OnApplicationFocus 不适用于 Unity 的 WebGL 构建，所以我改为这样做。

我在游戏加载时的第一个场景中的 GameObject 上有一个名为“GameControl”的脚本，该脚本也名为“GameControl”。

// In the Start function of this script I call a function on the webpage to let it know that the game has loaded.
void Start () {
    #if (UNITY_WEBPLAYER || UNITY_WEBGL) && !UNITY_EDITOR
    try {
        Application.ExternalCall("GameControlReady");
    } catch (System.Exception e) {
        Debug.LogError("GameControlReady function not on webpage"+e);
    }
    #endif
}

// This function will be called from the webpage
public void FocusCanvas (string p_focus) {
    #if !UNITY_EDITOR && UNITY_WEBGL
    if (p_focus == "0") {
        WebGLInput.captureAllKeyboardInput = false;
    } else {
        WebGLInput.captureAllKeyboardInput = true;
    }
    #endif
}

在网页上，我有以下 javascript:

var gameReady = false;

// Called by Unity in GameControl's start function
function GameControlReady () {
    gameReady = true;
}

function FocusCanvas(focus) {
    if (gameReady) {
        SendMessage("GameControl", "FocusCanvas", focus);
    }
}

在网页的头部我有以下内容

<script type='text/javascript'>
    document.addEventListener('click', function(e) {
        if (e.target.id == "canvas") {
            // Clicked on canvas
            FocusCanvas("1");
        } else {
            // Clicked outside of canvas
            FocusCanvas("0");
        }
    });
</script>