Skip to content

Commit 824cb1a

Browse files
author
Philipp Molitor
committed
fix wrong component name, add section about keyboard capturing issue
1 parent 43044db commit 824cb1a

File tree

1 file changed

+27
-2
lines changed

1 file changed

+27
-2
lines changed

README.md

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,20 +62,45 @@ const config: UnityLoaderConfig = {
6262

6363
export const UnityGameComponent: VFC = (): JSX.Element => {
6464
const [ctx] = useState<UnityContext>(new UnityContext(config));
65+
66+
// You can keep track of the game progress and ready state like this.
6567
const [progress, setProgress] = useState<number>(0);
6668
const [ready, setReady] = useState<boolean>(false);
6769

6870
return (
69-
<GameRenderer
71+
<UnityRenderer
7072
context={ctx}
7173
onUnityProgressChange={(p) => setProgress(p)}
7274
onUnityReadyStateChange={(s) => setReady(s)}
73-
style={{ width: '100%', height: '100%' }} // fully optional
75+
// <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.
7479
/>
7580
);
7681
};
7782
```
7883

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+
79104
## Creating a fetchable config from a Unity WebGL template
80105

81106
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

Comments
 (0)