マガジン

UnityのゲームをWebGLで書き出す手順と失敗しやすい設定

遊びをつくる

執筆にClaudeを使用しています。

大きな荷物で詰まった細い道を測り、軽い部品へ置き換えて流れを整える模型。
記事のテーマをもとに制作したAI生成の写真風イメージ。

UnityでゲームをWebブラウザ向けに書き出すには「WebGL Build Support」をインストールし、Build Settingsでプラットフォームを切り替えてビルドするだけです。手順そのものは短いのですが、「ビルドは通ったのにブラウザで動かない」「音が出ない」「画面が真っ暗のまま」といった問題が後から積み重なりやすいのがWebGL特有の難しさです。 この記事では、ビルドを通すための手順を最初に示したうえで、設定ミスや環境依存で詰まりやすいポイントを一つひとつ取り上げます。最初から設定を正しく選んでおくと、後戻りが大幅に減ります。

この記事の目次
  1. ビルドを始める前に確認すること
  2. ビルドの基本手順
  3. 失敗しやすい設定と対処法
  4. ビルド後の動作確認チェックリスト
  5. 次の行動
  6. 参考資料

ビルドを始める前に確認すること

Unityのバージョンによって動作やデフォルト設定が異なります。まず使っているバージョンのリリースノートを確認し、WebGLに関する既知の問題がないか調べておくと安心です。

WebGL Build Supportのインストールは、Unity Hubの「インストール」タブから対象バージョンの歯車アイコンを開き、「モジュールを加える」で追加します。すでにUnity Editorを起動している場合は再起動が必要です。インストール済みかどうかはEditorのBuild Settingsを開いてプラットフォーム一覧に「WebGL」が表示されるかで確認できます。表示されていない場合はモジュールが入っていないサインです。

ターゲットブラウザも事前に決めておきましょう。WebGL 2.0はChrome・Firefox・Edgeの比較的新しいバージョンであれば問題なく動きますが、SafariはWebGLの対応状況が他と異なる場合があります。ゲームを公開する場所やプレイヤーの環境を想定してから設定を選ぶと、後で設定を変えなおす手間が減ります。

ビルドの基本手順

  1. プラットフォームを切り替えるFile → Build Settingsを開き、プラットフォーム一覧から「WebGL」を選んで「Switch Platform」をクリックします。シェーダーの再インポートが走るので、プロジェクトの規模によって数分かかります。
  1. Player Settingsを開くBuild Settingsウィンドウ内の「Player Settings...」ボタンか、Edit → Project Settings → Playerから開きます。WebGLタブ(HTMLの5角形アイコン)を選びます。
  1. ビルドを実行する出力先フォルダを指定して「Build」または「Build And Run」をクリックします。「Build And Run」を選ぶとビルド後にUnityが簡易ローカルサーバーを立ち上げ、ブラウザで自動的に開きます。ローカルでの動作確認に便利です。

ビルドが完了すると、指定フォルダにindex.html、Build/フォルダ、TemplateData/フォルダが生成されます。このindex.htmlを直接ダブルクリックしてブラウザで開いてもほとんどの場合は動きません。ローカルファイルへのアクセス制限(CORS)のためです。必ずローカルサーバー経由か、アップロード済みのURLで確認します。

失敗しやすい設定と対処法

Compression Formatの選択ミス

Player Settings → Publishing Settings にある「Compression Format」は、デフォルトがUnityのバージョンによってGzipまたはBrotliになっています。どちらも圧縮してファイルを小さくする方式ですが、サーバー側が対応するContent-Encodingヘッダーを返せないとブラウザがファイルを読み込めず、真っ暗な画面のまま止まります。

GitHubPagesやネットワークの設定が自由にできない共有ホスティングでは、圧縮をサーバーに任せずDisabledにするのが確実です。ファイルサイズは増えますが、配信トラブルを避けられます。アップロード先のサーバーがBrotliやGzipの適切なヘッダーを返せると確認できている場合のみ、圧縮設定を有効にします。

例外処理(Exception Support)の設定

Publishing Settings内の「Enable Exceptions」は、デフォルトがExplicitly Thrown Exceptions Onlyになっています。これをそのままにしておくと、C#のNullReferenceExceptionなど暗黙的に発生する例外がブラウザのコンソールに出ず、ゲームが突然止まる原因の特定が難しくなります。

開発・テスト中はFull Without StacktraceかFull With Stacktraceに変えておき、ブラウザの開発者ツール(F12)のコンソールでエラーを確認しながら進めると効率が上がります。ただしフルスタックトレースはビルドサイズと実行速度に影響するため、リリース前にはExplicitly Thrown Exceptions Onlyに戻します。

音が出ない問題

WebブラウザはユーザーがページやCanvas要素を操作するまで音声の自動再生を許可しない仕様になっています(Autoplay Policy)。UnityのWebGLビルドもこの制約を受けるため、「ゲーム起動直後にBGMを再生する」コードを書いていても、最初のクリックやタップが発生するまで音が出ません。

Unityは内部でこの制約に対応する仕組みを持っていますが、バージョンによって挙動が異なります。スタート画面やロード完了後のボタンを経由させる設計にしておくと、音の初期化タイミングを自然にコントロールできます。音が出ないことを報告された場合は、まずブラウザコンソールで「AudioContext」関連の警告が出ていないかを確認します。

メモリ不足でクラッシュする

WebGLはメモリの上限が環境によって異なり、特に32ビットブラウザや古いモバイルブラウザでは余裕がありません。Player Settings → Memory Size(古いバージョンではWebGL Memory Size)を大きくしすぎると、逆に確保に失敗してクラッシュします。

テクスチャは可能な限り圧縮形式を使い、使わないアセットをビルドに含めないようAddressablesやAsset Bundlesで管理するか、シンプルなプロジェクトであればシーンに不要なオブジェクトを置かないだけでもサイズを減らせます。ビルドレポート(Build Settings → Build実行後にEditor.logで確認)でどのアセットが容量を占めているか確認する習慣をつけると、後から削りやすくなります。

スレッドとShared Array Bufferの問題

UnityのWebGLはデフォルトではスレッドを使いません。「Multithreading」を有効にする設定はありますが、これを使うにはサーバーがCross-Origin-Opener-PolicyとCross-Origin-Embedder-Policyの両ヘッダーを返す必要があり、多くの一般的なホスティング環境では設定が必要になります。ヘッダーを設定できないサーバーにスレッド有効ビルドをアップロードしてもゲームが起動しません。特に理由がなければスレッドは無効のままビルドすることをお勧めします。

ビルド後の動作確認チェックリスト

ブラウザで開いたあと、次の点を順番に確認します。

  • ブラウザの開発者ツール(コンソールタブ)にエラーや警告が出ていないか
  • ゲーム画面が表示されるまでのロード時間が極端に長くないか(圧縮・ファイルサイズの見直しサイン)
  • 音がボタンを押した後に再生されるか
  • モバイルブラウザでも試した場合、タッチ入力が効くか

エラーメッセージが英語で出ている場合は、そのまま検索すると公式フォーラムやIssue Trackerに同様の報告が見つかることが多いです。Unityのバージョン番号を添えて検索すると精度が上がります。

次の行動

Player SettingsのCompression FormatをDisabledにしてビルドを一度試し、ブラウザの開発者ツールでエラーがゼロになることを確認してから、圧縮設定を有効にするかどうかをサーバー環境に合わせて判断してください。完成したWebGLビルドはZIPにまとめてアソバースに投稿でき、URLを持っている人にすぐ遊んでもらえます。公開方法の詳細はアソバースの投稿ページで確認してください。

参考資料

  • Unity公式ドキュメント「WebGL: Getting started」
  • Unity公式ドキュメント「WebGL: Interacting with browser scripting」
  • Unity公式ドキュメント「WebGL: Compressed builds and server configuration」
  • MDN Web Docs「Autoplay guide for media and Web Audio APIs」