対応バージョン：Unity 6.3 LTS（6000.3系）／WebGL出力 この記事はシリーズ全11回の最終回です。第10回でキャラクター選択画面とエンディング分岐が完成し、ゲームの全フローが動く状態になりました。今回はそのゲームをWebGLでビルドし、ブラウザで公開するところまで進めます。 【PR】本記事にはアフィリエイトリンクを含みます。
目次
- はじめに
- 1. WebGLビルドの準備
- 2. ビルドの実行
- 3. ロリポップへのアップロード
- 4. index.htmlのレスポンシブ対応
- 5. itch.ioへのアップロード
- 6. 動作確認チェックリスト
- 完成したゲームを振り返る
- まとめ
- あわせて読みたいおすすめ書籍【PR】
- この記事を作成するにあたって参考にしたサイト
はじめに
前回までの記事でゲームの全フローが完成しました。
今回はいよいよWebGLビルドを行い、ブラウザでプレイできる状態にして公開します。具体的には以下の4つを行います。
- UnityのWebGLモジュールをインストールしてビルドする
- ビルドしたファイルをロリポップサーバーにアップロードする
- ブラウザサイズに合わせてリサイズされるよう対応する
- itch.ioにもアップロードして公開する
1. WebGLビルドの準備
WebGLモジュールのインストール
UnityのWebGLビルドには専用モジュールが必要です。インストールされていない場合はFile → Build Profilesを開くと「No Web module loaded」と表示されます。
Install with Unity Hubボタンを押してUnity HubからWebGLモジュールをインストールしてください。インストール後はUnityの再起動が必要です。
Scene Listの確認
File → Build ProfilesでScene Listを確認します。以下の4シーンが正しい順番で登録されているか確認してください。
| 番号 | シーン名 |
|---|---|
| 0 | TitleScene ← 起動時に最初に表示される |
| 1 | SampleScene |
| 2 | BadEndScene |
| 3 | TrueEndScene |
TitleSceneが必ず0番になっていることが重要です。 0番のシーンがゲーム起動時に最初に読み込まれます。
Player Settingsの設定
Build Profiles右上のPlayer Settingsを開いて、WebGL（地球アイコン）タブで以下を設定します。
| 項目 | 値 |
|---|---|
| Default Canvas Width | 1920 |
| Default Canvas Height | 1080 |
| WebGL Template | Minimal |
Minimalテンプレートを選ぶと、余分なUnityロゴや枠がなくなりゲームだけがシンプルに表示されます。
Burst Compilationを無効にする
WebGLビルド時にBurst Compilationエラーが出る場合があります。
Jobs → Burst → Enable CompilationのチェックをOFFにしてからビルドしてください。WebGLゲームではBurstなしでも動作上の問題はありません。
2. ビルドの実行
Build Profiles右下のBuildボタンを押してビルドフォルダを指定します。
ビルドには数分〜10分以上かかります。完了すると以下のようなログがコンソールに出ます。
Build completed with a result of 'Succeeded'と表示されれば成功です。
ビルドフォルダの中身は以下の構成になっています。
（ビルドフォルダ）/
├── index.html ← ゲームのエントリーポイント
├── Build/ ← ゲーム本体のファイル群
│ ├── *.wasm.br
│ ├── *.data.br
│ └── *.framework.js.br
├── TemplateData/ ← スタイルシートなど
└── StreamingAssets/ ← 追加アセット（あれば）
3. ロリポップへのアップロード
Brotli圧縮の問題
WebGLビルドのファイルは.br（Brotli）という圧縮形式になっています。これをそのままサーバーにアップロードしても、サーバーが正しいHTTPヘッダーを返さないと動作しません。
ロリポップにアップロードする場合は、.htaccessファイルをBuild/フォルダに追加して正しいMIMEタイプを設定します。
ファイルサイズの問題
ロリポップは1ファイルあたり10MBの上限があります。WebGLのビルドファイルはこれを超えることが多いため、FTPクライアントを使ってアップロードするか、itch.ioを利用するのが現実的です。
4. index.htmlのレスポンシブ対応
デフォルトのindex.htmlはゲームのサイズが固定されています。ブラウザのウィンドウサイズに合わせて自動リサイズされるよう、index.htmlを編集します。
変更のポイントは<canvas>要素のスタイルです。
#unity-canvas {
width: 100vw;
height: calc(100vw * 9 / 16);
max-height: 100vh;
max-width: calc(100vh * 16 / 9);
}
この設定により、16:9のアスペクト比を維持しながらブラウザ幅に合わせて自動リサイズされます。全画面表示を解除したときも正しいサイズに戻ります。
5. itch.ioへのアップロード
ZIPファイルの作り方
ビルドフォルダの中身をZIP圧縮します。index.htmlがZIPのルートに来るようにしてください。
（正しい構成）
game.zip/
├── index.html ← ZIPのルートにindex.html
├── Build/
└── TemplateData/
（間違い）
game.zip/
└── BuildFolder/
├── index.html
├── Build/
└── TemplateData/
フォルダごとZIPするとindex.htmlがルートに来ないためitch.ioで正しく動作しません。
itch.ioの設定
itch.ioのダッシュボードでCreate new projectを開いて以下を設定します。
| 項目 | 設定値 |
|---|---|
| Title | 波無島事件 |
| Kind of project | HTML |
| Uploads | ZIPファイルをアップロード |
| This file will be played in the browser | ✅ チェックを入れる |
| Viewport dimensions | 960 × 540（1920×1080の半分） |
Viewport dimensionsは960×540に設定します。 1920×1080のままだとブラウザ内のプレイ画面が大きすぎてスクロールが必要になります。960×540はWebGLが内部で1920×1080にスケールアップするため、表示品質は変わりません。
6. 動作確認チェックリスト
- [ ] タイトル画面が表示される
- [ ] スタートボタンでゲームが始まる
- [ ] セリフが正しく表示される
- [ ] キャラクターをクリックすると話題カードが開く
- [ ] TRUE END・BAD ENDどちらも到達できる
- [ ] タイトルへ戻るボタンが動作する
- [ ] ブラウザのウィンドウサイズを変えても正しくリサイズされる
- [ ] 全画面表示・解除後もレイアウトが崩れない
完成したゲームを振り返る
この記事シリーズでは、企画・設計から始まり、会話システム・フラグ管理・キャラクタークリック・エンディング分岐・WebGL公開まで、ミステリーADVゲームをゼロから作りました。
完成した「波無島事件」はこちらでプレイできます。
まとめ
WebGLビルドで詰まりやすいポイントは以下の3つです。
TitleSceneを0番に設定する。 忘れるとゲームではなくメインシーンから始まってしまいます。
Brotli圧縮のMIMEタイプを設定する。 サーバーによっては.htaccessの追加が必要です。
ZIPはindex.htmlがルートに来るように作る。 フォルダごとZIPするミスが多いので注意してください。
ゲームが完成したら、itch.ioのページURLをSNSやブログでシェアしてみましょう。
あわせて読みたいおすすめ書籍【PR】
シリーズを通じて参考になった書籍をまとめて紹介します。本セクションにはアフィリエイトリンクを含みます。
- 『Unityの教科書 Unity 6完全対応版』（北村愛実 著／SBクリエイティブ） ── シリーズ全体を通じて基礎として参照し続けた一冊。Unity 6対応で安心して使える定番入門書
- 『楽しく学ぶ Unity「2Dゲーム」作りのきほん』（森巧尚 著／マイナビ出版） ── 2D特化の入門書。UIやシーン管理など、今回のゲームで使った要素を丁寧に解説
- 『作って学ぶゲームプログラミング Unity まるっと入門 Unity6完全対応』（トライタム 著／吉谷幹人 監修） ── WebGLビルドや公開設定など、今回の実装に直結する内容を含む
- 『ゲームシナリオの書き方 第2版』（佐々木智広 著／SBクリエイティブ） ── アドベンチャーゲームのシナリオ構成・分岐設計・矛盾のないセリフの書き方を体系的に学べる一冊
- 『作って学べる Unity本格入門 Unity6対応版』（賀好昭仁 著／技術評論社） ── シリーズを読み終えてさらにステップアップしたい人向けの中級者向け書籍
※このセクションのリンクはアフィリエイトリンクであり、商品が購入された場合、サイト運営者に紹介料が支払われることがあります【PR】。
コメント