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

初心者向け実践開発
2026.07.04

対応バージョン：Unity 6.3 LTS（6000.3系）／WebGL出力 この記事はシリーズ全11回の第5回です。第4回ではフラグ管理と証拠システムを実装しました。今回はゲームの大詰め——シーン遷移・エンディング分岐・ブラウザ公開まで進めます。 【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")による証拠チェックを行っています。証拠を持っていない状態でエンディング選択を呼び出しても何も起きません。この仕組みにより、「証拠を揃えないとエンディングに進めない」というゲームの流れが自然に作れます。

エンディング選択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. 「Switch Platform」をクリックしてWebプラットフォームに切り替える（しばらく時間がかかります）
  4. Scene Listに以下の3つが入っているか確認する。入っていない場合は「Open Scene List」→「Add Open Scenes」でSampleScene・TrueEndScene・BadEndSceneを追加する

⚠️ コンパイルエラーが残っている場合の注意 開発中、メモ帳でSJIS保存してしまったスクリプトが原因でCS0101（クラスの二重定義）エラーが出続け、再生できない状態になりました。この場合はVisual Studioでそのスクリプトを開いて上書き保存することでUTF-8に変換されます。それでも解決しない場合はLibraryフォルダを削除してUnityを再起動すると強制的にキャッシュが再生成されます。

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

WebGL出力の手順

🔧 詳しい手順

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

ブラウザで動作確認する

注意点：WebGLビルドはセキュリティの制限により、ローカルのファイルをダブルクリックしても動きません。ローカルサーバーまたは公開サービスを使う必要があります。

方法A：Unity Play（一番手軽）

Build Profilesウィンドウの右下に「Publish to Play」ボタンがあります。これをクリックするとUnityアカウントでログインしてUnity Playにアップロードでき、URLが発行されてすぐブラウザで確認できます。

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

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

  1. ビルドしたフォルダ（MysteryADV_WebGL）をエクスプローラーで開く
  2. アドレスバーに「cmd」と入力してEnterキーを押す
  3. 以下のコマンドを入力する
python -m http.server 8000
  1. ブラウザでhttp://localhost:8000を開く
Unity Playのブラウザ上で波無島事件が動いている画面

完成して振り返って

⚠️ ハマったポイント

  • Build SettingsはUnity 6でBuild Profilesに名称変更されている。「Build Settings」で探しても見つからないので注意
  • WebGLビルドはローカルファイルをダブルクリックしても動かない。Unity Playを使うのが一番手軽
  • コンパイルエラーが残ったままビルドしようとしても実行できない。特にSJIS文字コードによるCS0101エラーは原因が分かりにくいので、スクリプトをメモ帳で保存するときはUTF-8を意識する
  • ShowEndingChoice()に証拠チェックを入れておくと、証拠なしでエンディングに飛ぼうとしたときに自然に弾ける
  • エンディングシーンのテキストレイアウトは、Rect TransformのアンカーをStretch×Stretchにしてからフォントサイズ・アラインメントを設定するのが確実。テキストが左上に寄る場合はAlignmentのCenter・Middleを確認する

次回予告

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

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

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

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

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

コメント

タイトルとURLをコピーしました