You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// <UnityRenderer> has every prop (except ref) from HTMLCanvasElement.
76
+
// This means you can use something like style!
77
+
// Also it works perfectly with styled-components.
78
+
style={{ width: '100%', height: '100%' }}// optional, but a good idea.
74
79
/>
75
80
);
76
81
};
77
82
```
78
83
84
+
## Mitigating the "keyboard capturing issue"
85
+
86
+
By default, Unity WebGL builds capture the keyboard as soon as they are loaded. This means that all keyboard input on the website is captured by the game, and rendering all `<input>`, `<textarea>` and similar input methods useless.
87
+
88
+
To solve this problem, two changes have to be made:
89
+
90
+
1. Inside your Unity project, add the following code at some point that gets called early in your game:
91
+
92
+
```cs
93
+
#if!UNITY_EDITOR&&UNITY_WEBGL
94
+
WebGLInput.captureAllKeyboardInput=false;
95
+
#endif
96
+
```
97
+
98
+
2. Set the prop `tabIndex={1}` (may need an ESLint ignore rule) on the `<UnityRenderer>` component to enable focus on click.
99
+
100
+
3. Now clicking the game enables game keyboard input, and clicking the website enabled keyboard input on the website.
101
+
102
+
For more details on the issue, see [this Stack Overflow answer](https://stackoverflow.com/a/60854680).
103
+
79
104
## Creating a fetchable config from a Unity WebGL template
80
105
81
106
In order to create a fetchable build config that contains all required keys for `UnityLoaderConfig`, you could add the following to a Unity WebGL template and upload it to a `CORS`-enabled web host (for example Amazon AWS S3).
0 commit comments