Unity WebGL template · RCADIA Docs

Use the template

A drop-in index.html that handles responsive sizing, mobile viewport and touch input, shows an RCADIA loading screen, and exposes window.unityInstance for the SDKs.

Download index.html Tournament SDK

Replace your build's index.html

Put the template next to your Build/ folder, replacing the index.html Unity generated.

Match your file names

Unity names build files after the build: a build called MyGame produces Build/MyGame.loader.js, MyGame.data, and so on. Update the loader <script> tag and the GAME_CONFIG block at the top of the script to match. Set compressed: true for a Gzip build.

Set the title

Replace YOUR_GAME_TITLE and YOUR_COMPANY. Then zip the folder and upload it.

The five fixes

Prefer your own template? These are the changes that matter.

1. Let the canvas resize

Fixed pixel sizes overflow small screens.

HTML

<!-- Before -->
<canvas id="unity-canvas" width="1920" height="1080"></canvas>
 
<!-- After -->
<canvas id="unity-canvas" tabindex="-1"></canvas>

CSS

#unity-canvas {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

2. Make the canvas focusable

Without tabindex="-1", the first tap on mobile only focuses the canvas, and keyboard input can go missing on desktop.

HTML

<canvas id="unity-canvas" tabindex="-1"></canvas>

3. Stop the browser from stealing touches

Without touch-action: none, the browser scrolls and zooms the page instead of passing touches to your game.

CSS

#unity-canvas {
  touch-action: none;
}
 
#unity-container.unity-mobile {
  position: fixed;
  inset: 0;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

4. Expose the Unity instance

The RCADIA SDKs talk to Unity through window.unityInstance.

JavaScript

window.unityInstance = null;
 
createUnityInstance(canvas, config).then((instance) => {
  window.unityInstance = instance;
});

5. Add mobile handling

Set a mobile viewport and keep touch gestures on the canvas:

JavaScript

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
  const meta = document.createElement("meta");
  meta.name = "viewport";
  meta.content = "width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover";
  document.head.appendChild(meta);
 
  container.className = "unity-mobile";
 
  document.addEventListener("touchmove", (e) => {
    if (e.target === canvas) e.preventDefault();
  }, { passive: false });
}

Build settings

Setting	Recommended
Active Input Handling	Input Manager (Old). The new Input System has touch problems on WebGL mobile.
Compression Format	Gzip
Exception Handling	None (smaller builds)
Memory Size	256 MB or more

Test on a real phone. Emulators miss most touch problems.
Don't assume 16:9. Phones in portrait and landscape both play.
One fullscreen button. Unity's built-in fullscreen is enough; don't add another one in your HTML.
Unity calling JavaScript? If your game calls functions like sendScore() in the page, define them in your index.html. For scores, use the Tournament SDK instead.

Known Unity mobile limits

These come from Unity WebGL itself, not from RCADIA:

Problem	Workaround
Single taps don't register on iOS Safari	Use the old Input Manager, or hold and drag controls
First tap is ignored	Add `tabindex="-1"` to the canvas
New Input System ignores touch	Switch to the old Input Manager
Virtual keyboard doesn't appear	Enable `WebGLInput.mobileKeyboardSupport`

Before you submit

The canvas has tabindex="-1" and no fixed pixel sizes
touch-action: none is set on the canvas for mobile
The mobile viewport meta tag is added
window.unityInstance is set
Active Input Handling is the old Input Manager
Tested on a real phone, in portrait and landscape