본문으로 건너뛰기

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 수정​

빌드된 index.html 파일을 텍스트 에디터(메모장, VS Code 등)로 엽니다.

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",
};