Keyboard/Mouse event listening when module is embedded in a canvas among other elements in the page

Target Platforms Web
1

Hi,

We have an issue managing Keyboard/Mouse events in our WebGL module, as our application is in a canvas among other elements in the page. We want input forwarded to WebGL module only when its canvas has focus.

Using what is described at bottom of Unity - Manual: Input in WebGL, we set WebGLInput.captureAllKeyboardInput = false, and used a workaround based on
WebGL - Module.doNotCaptureKeyboard: true or Module.keyboardListeningElement: ... NOT WORKING ANYMORE - Questions & Answers - Unity Discussions.

However, since 5.6 and WebAssembly, the ‘JSEvents’ object used in workaround is no longer available.

Is there a more elegant way to do it in 5.6 ? Otherwise, do we still have access to ‘JSEvents’ somewhere ?

Thanks,

Yvan

2

Does anyone have an idea about this?
A new workaround to catch keystrokes only when the Unity canvas is activated?

3

Hello ypoeymirou.

In 5.6 you should still be able to access JSEvents from a Javascript plugin. If you are trying to access it from the global namespace, you should explicitly specify which instance of the game you are referencing to. If your build is instantiated as MyGameInstance, then you can try MyGameInstance.Module.JSEvents and check if it works as you expect (note that from inside your build you can still access the JSEvents object directly). If this does not resolve your issue, provide your exact Unity version and a link to your build if possible.

4

Thanks Alex !

We are using 5.6.0f3, using WebAssembly build option.

Unfortunalty, JSEvents seems to not be defined into MyGameInstance.Module :

1120×764 103 KB

I think you should be able to reproduce it with any WebAssembly build. Sending you a package could be complicated in this context. Let’s go there only if we really need to :slight_smile:

5

Hello ypoeymirou.

Yes, you are right, JSEvents is not exported anymore. Though it should be easy to make it available. Simply add the following Assets/Plugins/JSEvents.jspre file to your project:Module.getJSEvents = function () { return JSEvents; };Now it should work:3039749--227624--Screen Shot 2017-04-20 at 10.49.41.png
This is a good demonstration of how to use the new framework namespace in 5.6. Objects, previously residing in the global namespace, are now local to the build code and can be directly accessed from Javascript plugins. This way you are now able to embed more than one game on the page without causing conflicts in the global namespace (as well as not causing conflicts with the page code itself).

6

Thank you !

Works like a charm :slight_smile:

7

Hey, the Assets/Plugins/JSEvents.jspre file does not appear to exist anymore in Unity 5.6.3f1. Is there any other work around for this, as I need to be able to have keyboard input within the game and also on HTML input elements on the webpage, thanks.

8

You can make it yourself pretty easily:

Create a new .jspre file in Assets/Plugins/ with this single line of code:

Module.getJSEvents = function () { return JSEvents; };

Then create your build. You can access this now with:

window.<unityInstanceVariableName>.Module.getJSEvents()
9

FYI, if anyone is having issues with getting the canvas to catch keyboard events when WebGLInput.captureAllKeyboardInput = false, try adding the attribute: tabindex=‘1’ to the canvas element. That did the trick for me.

Not sure why it works through, do keyboard events only go to things that can get focus? Is something having a tabindex a requirement to be “focusable”?

Thanks.

10

Thank you alexsuvorov and Ewanuk! It works!!

You might also want to hide that input field, but still let it receive focus. This is is the best way I found to do that. Tested on Chrome and Firefox:

#WebGLKeyboardInput {
opacity: 0;
}
#WebGLKeyboardInputHider {
width: 0;
overflow: hidden;
}