【実践記事・ADV編⑤】シーン遷移・エンディング分岐・WebGL出力——ゲームを完成させてブラウザで動かす

対応バージョン：Unity 6.3 LTS（6000.3系）／WebGL出力 この記事はシリーズ全11回の第5回です。第4回ではフラグ管理と証拠システムを実装しました。今回はゲームの大詰め——シーン遷移・エンディング分岐・ブラウザ公開まで進めます。 【PR】本記事にはアフィリエイトリンクを含みます。

前回までで「会話する」「話題が解放される」「証拠を入手する」という進行の核心部分が動くようになりました。今回はそれらをつなぎ合わせ、「エンディングに到達してゲームが終わる」という流れを完成させます。

目次

• STEP5：シーン遷移・エンディング分岐
• STEP6：WebGL出力・ブラウザ動作確認
• 完成して振り返って
• 次回予告
• あわせて読みたいおすすめ書籍【PR】
• この記事を作成するにあたって参考にしたサイト

STEP5：シーン遷移・エンディング分岐

SceneControllerを作る

Scripts/System/フォルダに「SceneController」という名前でMonoBehaviour Scriptを作成します。

using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneController : MonoBehaviour
{
    public static SceneController Instance;

    void Awake()
    {
        Instance = this;
    }

    public void LoadScene(string sceneName)
    {
        SceneManager.LoadScene(sceneName);
    }

    public void LoadTrueEnd()
    {
        LoadScene("TrueEndScene");
    }

    public void LoadBadEnd()
    {
        LoadScene("BadEndScene");
    }
}

EndingManagerを作る

Scripts/System/フォルダに「EndingManager」という名前でMonoBehaviour Scriptを作成します。

using UnityEngine;
using TMPro;
using UnityEngine.UI;

public class EndingManager : MonoBehaviour
{
    public static EndingManager Instance;

    [Header("エンディング選択UI")]
    public GameObject endingPanel;
    public TMP_Text endingTitleText;
    public Button trueEndButton;
    public Button badEndButton;

    void Awake()
    {
        Instance = this;
        endingPanel.SetActive(false);
    }

    public void ShowEndingChoice()
    {
        if (!EvidenceManager.Instance.HasEvidence("video"))
        {
            Debug.Log("証拠が足りません");
            return;
        }

        endingPanel.SetActive(true);
        endingTitleText.text = "記事を本土の編集部に送りますか？";
    }

    public void OnTrueEndSelected()
    {
        endingPanel.SetActive(false);
        SceneController.Instance.LoadTrueEnd();
    }

    public void OnBadEndSelected()
    {
        endingPanel.SetActive(false);
        SceneController.Instance.LoadBadEnd();
    }
}

ShowEndingChoice()の中でEvidenceManager.Instance.HasEvidence("video")による証拠チェックを行っています。証拠を持っていない状態でエンディング選択を呼び出しても何も起きません。このメソッド自体は自動では呼ばれません。追及完了時など、選択画面を出したい処理やボタンからShowEndingChoice()を呼び出す接続が別途必要です。

エンディング選択UIを作る

🔧 詳しい手順

1. Hierarchyで右クリック→「UI (Canvas)」→「Panel」を選択し、名前を「EndingPanel」にする
2. Rect TransformをShift+Altを押しながらStretch（四方）に設定する（画面全体を覆う）
3. ImageのColorをR:0・G:0・B:0・A:200（半透明の黒）に変更する
4. EndingPanel内に以下を作成する
   • 「Text – TextMeshPro」→名前「EndingTitleText」（アンカー：上中央・Pos Y:-100・Font Size:28・Color:White）
   • 「Button – TextMeshPro」→名前「TrueEndButton」（アンカー：中央・Pos X:-200・Width:300・Height:80・ImageのColor:濃い青Hex:1A3A6AFF・テキスト：「記事を送る（TRUE END）」・Color:White）
   • 「Button – TextMeshPro」→名前「BadEndButton」（アンカー：中央・Pos X:+200・Width:300・Height:80・ImageのColor:濃い赤Hex:6A1A1AFF・テキスト：「送るのをやめる（BAD END）」・Color:White）
5. EndingPanelのチェックを外して最初は非表示にする
6. GameManagerにAdd ComponentでSceneControllerとEndingManagerを追加する
7. EndingManagerのInspectorの各欄に対応するオブジェクトをドラッグ＆ドロップして接続する
8. TrueEndButtonのOn Click ()にGameManagerをドラッグ＆ドロップ→「EndingManager」→「OnTrueEndSelected」を設定する
9. BadEndButtonも同様に「EndingManager」→「OnBadEndSelected」を設定する

エンディングシーンを作る

🔧 詳しい手順

1. メニューの「File」→「New Scene」→「Basic (URP)」を選択して「Create」をクリックする
2. 「File」→「Save As Scene…」でScenesフォルダに「TrueEndScene」という名前で保存する
3. TrueEndSceneのHierarchyで右クリック→「UI (Canvas)」→「Text – TextMeshPro」を作成する
4. Rect TransformをShift+Altを押しながらStretch×Stretch（一番右下のアイコン）に設定し、Left:100・Right:100・Top:100・Bottom:100にする
5. TextMeshProの設定：Font Size:28・Alignment:中央×中央・Color:White・Font Asset:Noto Sans JP
6. テキストにTrueEndのテキストを入力する
7. 同様の手順でBadEndSceneを作成する

⚠️ シーンの切り替え方 Unity 6ではProjectウィンドウのScenesフォルダにあるシーンファイルをダブルクリックすることで、編集するシーンを切り替えられます。作業が終わったら必ずSampleSceneに戻ってください。

Build Profilesにシーンを登録する

WebGL出力時にすべてのシーンをビルドに含めるため、Build Profilesに登録します。

🔧 詳しい手順

1. メニューの「File」→「Build Profiles」を開く（Unity 6ではBuild SettingsがBuild Profilesに名称変更されています）
2. 左側のプラットフォーム一覧から「Web」を選択する
3. Web Build Supportが未導入ならUnity Hubで追加し、必要に応じてAdd Build ProfileからWebのプロファイルを作成して切り替える（表示や名称はUnityのバージョンで異なります）
4. Scene Listに以下の3つが入っているか確認する。入っていない場合は「Open Scene List」を開き、ProjectウィンドウのSampleScene・TrueEndScene・BadEndSceneをリストへドラッグする。Add Open Scenesは現在開いているシーンだけを追加するので、使う場合は各シーンを開いてから追加する。最初に開くSampleSceneを有効にしてリストの先頭に置く

⚠️ コンパイルエラーが残っている場合の注意 CS0101は同じ名前空間に同名の定義が重複していることを示します。Consoleに表示されたファイルとクラス名を確認し、重複を解消してください。文字化けがある場合は、エディターの保存設定でUTF-8を指定します。

STEP6：WebGL出力・ブラウザ動作確認

WebGL出力の手順

🔧 詳しい手順

1. メニューの「File」→「Build Profiles」を開く
2. 左側のプラットフォーム一覧で「Web」が「Active」になっていることを確認する
3. 右下の「Build」ボタンをクリックする
4. 保存先フォルダを選択するダイアログが出るので、デスクトップなどに「MysteryADV_WebGL」というフォルダを新規作成して選択する
5. ビルドが始まるのを待つ（数分かかります）

ブラウザで動作確認する

注意点：WebGLビルドは、ブラウザーのセキュリティ制限などでローカルファイルを直接開くと動かない場合があります。Build And Runやローカルサーバーを使って確認します。

方法A：Unity Playへ公開する

Build Profilesウィンドウの右下に「Publish to Play」ボタンがあります。これをクリックするとUnityアカウントでログインし、Unity Playへのアップロード手続きを進められます。作品が公開される範囲や設定を確認してから送信してください。

方法B：Pythonのローカルサーバー

Pythonがインストールされている場合は以下の手順でローカルサーバーを立てられます。

1. ビルドしたフォルダ（MysteryADV_WebGL）をエクスプローラーで開く
2. アドレスバーに「cmd」と入力してEnterキーを押す。標準のhttp.serverは圧縮ファイルに必要なContent-Encodingを自動設定しないため、無圧縮ビルドにするか、Decompression Fallbackを有効にするか、適切なヘッダーを返すサーバーを使う
3. 以下のコマンドを入力する

python -m http.server 8000

4. ブラウザでhttp://localhost:8000を開く

完成して振り返って

⚠️ ハマったポイント

• Build SettingsはUnity 6でBuild Profilesに名称変更されている。「Build Settings」で探しても見つからないので注意
• WebGLビルドをローカルファイルとして直接開くと動かない場合がある。まずBuild And Runで確認し、外部公開する場合は公開範囲を確認する
• コンパイルエラーが残ったままビルドしようとしても実行できない。CS0101が出たら、表示されたクラス名や名前空間の重複を確認する。文字化けには別途、保存時の文字コードを確認する
• ShowEndingChoice()に証拠チェックを入れておくと、証拠なしでエンディングに飛ぼうとしたときに自然に弾ける
• エンディングシーンのテキストレイアウトは、Rect TransformのアンカーをStretch×Stretchにしてからフォントサイズ・アラインメントを設定するのが確実。テキストが左上に寄る場合はAlignmentのCenter・Middleを確認する

次回予告

第6回では、前章までに作ったシステムに全キャラクターの会話データを流し込みます。19本のDialogueDataにセリフを入力しながら、シナリオの矛盾に気づいて修正したリアルな体験を記事にします。

あわせて読みたいおすすめ書籍【PR】

今回実装したシーン遷移・ビルド・WebGL出力についてさらに学びたい方には、以下の書籍もおすすめです。本セクションにはアフィリエイトリンクを含みます。

• 『Unityの教科書 Unity 6完全対応版』（北村愛実 著／SBクリエイティブ） ── シーン管理・ビルド設定・WebGL出力まで幅広くカバーするUnity 6対応の定番入門書
• 『楽しく学ぶ Unity「2Dゲーム」作りのきほん』（森巧尚 著／マイナビ出版） ── シーン遷移・ゲーム終了処理の基礎を実例を交えて解説
• 『作って学ぶゲームプログラミング Unity まるっと入門 Unity6完全対応』（トライタム 著／吉谷幹人 監修） ── SceneManagerを使ったシーン管理の実装パターンを含む
• 『ゲームシナリオの書き方 第2版』（佐々木智広 著／SBクリエイティブ） ── エンディング分岐の設計思想をシナリオ側の視点から学べる一冊
• 『作って学べる Unity本格入門 Unity6対応版』（賀好昭仁 著／技術評論社） ── 今回のシリーズを読み終えてさらにステップアップしたい人向けの中級者向け書籍

※このセクションのリンクはアフィリエイトリンクであり、商品が購入された場合、サイト運営者に紹介料が支払われることがあります【PR】。

この記事を作成するにあたって参考にしたサイト

• Unity – Manual: Build Settings（Unity公式ドキュメント）
• Unity – Manual: WebGL overview（Unity公式ドキュメント）
• Unity – Scripting API: SceneManager.LoadScene（Unity公式ドキュメント）
• Unity Play（Unity公式ゲーム公開サービス）
• 前回の実践記事「【ADV編④】話題を解放する・証拠を入手する——フラグ管理と証拠システムの実装」（本サイト内）
• Unity公式：WebGLの配信