Unity WebGL - 防止 <Canvas>从吃掉所有鼠标/键盘输入?(HTML 输入字段) [英] Unity WebGL - Prevent <Canvas> From eating up all Mouse / Keyboard Input? (HTML Input Fields)

问题描述

统一 5.4

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

Building a Unity WebGL application (not a game) that handles all 3D content on the Unity side of things, and all the UI is built using HTML/CSS/JS. By default, WebGLInput.captureAllKeyboardInput is set to true, which causes any input fields that require keyboard (text) input to be broken, as any keyboard controls are automatically being eaten up by Unity rather than going to the input field. Doing

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

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

fixes the issue with input fields, but causes unity to ignore ALL keyboard inputs, even after the element is focused, however adding

tabindex="1"

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

to the fixes it so that keyboard input on HTML input fields works when focused, and keyboard controls inside the Unity WebGL app works when focused as well. (this is all per the docs: https://docs.unity3d.com/ScriptReference/WebGLInput-captureAllKeyboardInput.html). So that's all working fine.

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

However, the Unity WebGL application is still causing issues with some input fields using MOUSE (not keyboard) controls. Namely I've noticed it on input type="range" fields (HTML5 sliders) and input type="number (using keyboard to type in numbers works, but mouse clicking up and down do not).

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

Is there any sort of workaround to fix this? I essentially need to prevent the Unity WebGL canvas to not automatically take all mouse inputs, unless the element is clicked/focused first (just like the way the keyboard controls work). Anything to change on the Unity side to fix this? Or do I need to write some custom JavaScript to handle all input and determine whether it's intended for the Unity scene or the HTML UI?

推荐答案

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

I was having the same issue but I believe I've found a workaround! Originally I was just going to use OnApplicationFocus to toggle WebGLInput.captureAllKeyboardInput. But OnApplicationFocus doesn't work with WebGL builds of Unity so I'm doing this instead.

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

I have a script named "GameControl" on a GameObject also named "GameControl" in the first scene when the game is loaded.

// 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:

On the webpage, I have the following 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);
    }
}

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

And in the head section of the webpage I have the following

<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>

这篇关于Unity WebGL - 防止 <Canvas>从吃掉所有鼠标/键盘输入?(HTML 输入字段)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！