跳到主要内容

WebGL 构建应用

在 WebGL 构建中应用 TudadaSDK​

Unity WebGL 构建完成后会生成 index.html 文件。需要在该文件中添加 TudadaSDK，才能在实际设备上运行 SDK。

即使您不熟悉 HTML/JS 也没关系。 按照以下步骤操作即可。

Step 1: WebGL 构建​

  1. 在 Unity 编辑器中打开 File > Build Settings
  2. 将 Platform 选择为 WebGL
  3. 点击 Build 按钮，选择构建输出文件夹

构建完成后将生成以下文件夹结构：

构建输出文件夹/
├── index.html              ← 需要修改此文件
├── Build/
│   ├── 构建名称.loader.js
│   ├── 构建名称.framework.js    (或 .framework.js.gz)
│   ├── 构建名称.data             (或 .data.gz)
│   └── 构建名称.wasm             (或 .wasm.gz)
└── TemplateData/
    └── (图标, CSS 等)

Step 2: 修改 index.html​

用文本编辑器（记事本、VS Code 等）打开构建的 index.html 文件。

2-1. 添加 SDK 脚本标签​

在 index.html 文件中找到 <body> 标签，在 <body> 标签正下方添加以下一行：

注意: SDK 脚本必须放置在 <body> 标签内。如果放在 <head> 中，SDK 初始化可能无法正常工作。

<body>
  <!-- 加载SDK（添加到body最顶部） -->
  <script src="https://tudada-game.2bytespublishing.kr/dev/releases/tudadaGameSDK.0.1.5.dev.js"></script>

  ... (原有内容) ...
</body>

2-2. 修改 Unity 加载代码​

index.html 内部有加载 Unity 的 JavaScript 代码。 找到该代码，按照 等待 TudadaSDK 初始化 → 加载 Unity → 连接 SDK 的顺序进行修改。

修改前（Unity 自动生成的代码）:

通常类似以下形式：

var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
  createUnityInstance(canvas, config, (progress) => {
    // 加载进度处理
  }).then((unityInstance) => {
    // Unity 加载完成
  }).catch((message) => {
    alert(message);
  });
};
document.body.appendChild(script);

修改后:

将上述代码更改为以下内容：

// 1. 等待TudadaSDK初始化
TudadaGameSDK.waitForReady()
  .then(() => {
    console.log('TudadaSDK初始化完成');

    // 2. 加载Unity加载器脚本
    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      // 3. 创建Unity实例
      createUnityInstance(canvas, config, (progress) => {
        // 加载进度处理（保留原有代码）
      }).then((unityInstance) => {
        // 4. 将Unity实例连接到SDK
        TudadaGameSDK.connectUnity(unityInstance);
        console.log('Unity实例连接完成');
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  })
  .catch((error) => {
    console.error('TudadaSDK初始化失败:', error);
  });

核心变更2项：

  1. 将整个 Unity 加载代码包裹在 TudadaGameSDK.waitForReady().then(() => { ... }) 中
  2. Unity 加载完成后添加一行 TudadaGameSDK.connectUnity(unityInstance)

Step 3: 完成后的 index.html 完整示例​

以下是修改完成后的完整 index.html 示例，仅供参考。由于 Unity 版本和构建设置不同，具体内容可能有所差异，实际操作时只需在自动生成的文件中修改上述 Step 2 的两项即可。

<!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>
  <!-- 加载TudadaSDK（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. 等待TudadaSDK初始化
    TudadaGameSDK.waitForReady()
      .then(() => {
        console.log('TudadaSDK初始化完成');

        // 2. 加载Unity加载器脚本
        var script = document.createElement("script");
        script.src = loaderUrl;
        script.onload = () => {
          // 3. 创建Unity实例
          createUnityInstance(canvas, config, (progress) => {
            document.querySelector("#unity-progress-bar-full").style.width =
              100 * progress + "%";
          }).then((unityInstance) => {
            // 4. 将Unity实例连接到SDK
            TudadaGameSDK.connectUnity(unityInstance);
            console.log('Unity实例连接完成');

            // 隐藏加载条
            document.querySelector("#unity-loading-bar").style.display = "none";
          }).catch((message) => {
            alert(message);
          });
        };
        document.body.appendChild(script);
      })
      .catch((error) => {
        console.error('TudadaSDK初始化失败:', error);
        alert('SDK初始化失败: ' + error.message);
      });
  </script>
</body>
</html>

Step 4: 确认最终文件结构​

SDK 从 CDN 加载，因此无需将 SDK 文件复制到构建文件夹中。

构建输出文件夹/
├── index.html                  ← 修改完成
├── Build/
│   ├── MyGame.loader.js
│   ├── MyGame.framework.js
│   ├── MyGame.data
│   └── MyGame.wasm
└── TemplateData/
    └── ...

压缩构建的情况​

如果在 Unity 中将 Compression Format 设置为 Gzip，Build 文件夹中的文件将带有 .gz 扩展名。index.html 的修改方法相同，只是 config 对象的 URL 扩展名不同：

注意: 不支持 Brotli 压缩。请在 Unity Build Settings 中将 Compression Format 设置为 Gzip 或 Disabled。

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