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

问题描述

Unity 5.4

Unity 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应用程序仍在使用MOUSE(而非键盘)控件对某些输入字段造成问题.也就是说，我在输入type ="range"字段(HTML5滑块)和输入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"的脚本.

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