Skip to main content

WebGL Build Setup

Applying TudadaSDK to a WebGL Build​

When you build with Unity WebGL, an index.html file is generated. You need to add TudadaSDK to this file for the SDK to work on actual devices.

Don't worry if you're not familiar with HTML/JS. Just follow the steps below as-is.

Step 1: WebGL Build​

  1. In the Unity Editor, open File > Build Settings
  2. Select WebGL as the Platform
  3. Click the Build button and choose an output folder

After the build completes, the following folder structure is created:

build-output-folder/
├── index.html              ← This is the file you will modify
├── Build/
│   ├── build-name.loader.js
│   ├── build-name.framework.js    (or .framework.js.gz)
│   ├── build-name.data             (or .data.gz)
│   └── build-name.wasm             (or .wasm.gz)
└── TemplateData/
    └── (icons, CSS, etc.)

Step 2: Modify index.html​

Open the built index.html file with a text editor (Notepad, VS Code, etc.).

2-1. Add the SDK Script Tag​

Find the <body> tag in the index.html file, and add the following line directly below <body>:

Note: The SDK script must be placed inside the <body> tag. Placing it in <head> may prevent the SDK from initializing properly.

<body>
  <!-- Load SDK (add at the top of body) -->
  <script src="https://tudada-game.2bytespublishing.kr/dev/releases/tudadaGameSDK.0.1.5.dev.js"></script>

  ... (existing content) ...
</body>

2-2. Modify the Unity Loading Code​

Inside index.html, there is JavaScript code that loads Unity. Find this code and modify it to follow the sequence: Wait for TudadaSDK initialization → Load Unity → Connect SDK.

Before (code auto-generated by Unity):

It typically looks similar to this:

var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
  createUnityInstance(canvas, config, (progress) => {
    // Handle loading progress
  }).then((unityInstance) => {
    // Unity load complete
  }).catch((message) => {
    alert(message);
  });
};
document.body.appendChild(script);

After:

Replace the above code with the following:

// 1. Wait for TudadaSDK initialization
TudadaGameSDK.waitForReady()
  .then(() => {
    console.log('TudadaSDK initialization complete');

    // 2. Load Unity loader script
    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      // 3. Create Unity instance
      createUnityInstance(canvas, config, (progress) => {
        // Handle loading progress (keep existing code)
      }).then((unityInstance) => {
        // 4. Connect Unity instance to SDK
        TudadaGameSDK.connectUnity(unityInstance);
        console.log('Unity instance connected');
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  })
  .catch((error) => {
    console.error('TudadaSDK initialization failed:', error);
  });

Two key changes:

  1. Wrap the entire Unity loading code inside TudadaGameSDK.waitForReady().then(() => { ... })
  2. Add one line TudadaGameSDK.connectUnity(unityInstance) after Unity finishes loading

Step 3: Complete index.html Example​

For reference, here is the complete modified index.html example. The details may differ depending on your Unity version and build settings, so in practice you only need to apply the two changes from Step 2 to the auto-generated file.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>My Unity Game</title>
  <link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
  <!-- Load TudadaSDK (top of body) -->
  <script src="https://tudada-game.2bytespublishing.kr/dev/releases/tudadaGameSDK.0.1.5.dev.js"></script>

  <div id="unity-container">
    <canvas id="unity-canvas" tabindex="-1"></canvas>
    <div id="unity-loading-bar">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>

  <script>
    var canvas = document.querySelector("#unity-canvas");
    var config = {
      dataUrl: "Build/MyGame.data",
      frameworkUrl: "Build/MyGame.framework.js",
      codeUrl: "Build/MyGame.wasm",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "MyCompany",
      productName: "MyGame",
      productVersion: "1.0.0",
    };
    var loaderUrl = "Build/MyGame.loader.js";

    // 1. Wait for TudadaSDK initialization
    TudadaGameSDK.waitForReady()
      .then(() => {
        console.log('TudadaSDK initialization complete');

        // 2. Load Unity loader script
        var script = document.createElement("script");
        script.src = loaderUrl;
        script.onload = () => {
          // 3. Create Unity instance
          createUnityInstance(canvas, config, (progress) => {
            document.querySelector("#unity-progress-bar-full").style.width =
              100 * progress + "%";
          }).then((unityInstance) => {
            // 4. Connect Unity instance to SDK
            TudadaGameSDK.connectUnity(unityInstance);
            console.log('Unity instance connected');

            // Hide loading bar
            document.querySelector("#unity-loading-bar").style.display = "none";
          }).catch((message) => {
            alert(message);
          });
        };
        document.body.appendChild(script);
      })
      .catch((error) => {
        console.error('TudadaSDK initialization failed:', error);
        alert('SDK initialization failed: ' + error.message);
      });
  </script>
</body>
</html>

Step 4: Verify the Final File Structure​

The SDK is loaded from a CDN, so there is no need to copy SDK files into the build folder.

build-output-folder/
├── index.html                  ← Modified
├── Build/
│   ├── MyGame.loader.js
│   ├── MyGame.framework.js
│   ├── MyGame.data
│   └── MyGame.wasm
└── TemplateData/
    └── ...

Compressed Builds​

If you set the Compression Format to Gzip in Unity, the files in the Build folder will have a .gz extension. The index.html modification method is the same -- only the URLs in the config object have different extensions:

Note: Brotli compression is not supported. Set the Compression Format to Gzip or Disabled in Unity Build Settings.

var config = {
  dataUrl: "Build/MyGame.data.gz",          // .gz added
  frameworkUrl: "Build/MyGame.framework.js.gz",
  codeUrl: "Build/MyGame.wasm.gz",
};