Unityでつくる 横スクロールシューティング

ダークモード

第12回 タイトル画面 ​

この回でつくるもの：「SPACE SHOOTER」のタイトル画面を作ります。START ボタンでゲームが始まり、ゲームオーバーになったら TITLE ボタンでタイトルに戻れます。

この回で学ぶこと ​

  • 新しいシーンを作り、シーンを切りかえる
  • File > Build Profiles の Scene List にシーンを登録する
  • タイトル画面のボタンから SceneManager.LoadScene を呼ぶ
  • Application.Quit でゲームを終わらせる
  • プレハブを別のシーンで使い回す

前回までのふりかえり ​

第11回で、残機とゲームオーバーを作りました。自機は3機あり、やられると点滅しながら復活します。全部なくなると GAME OVER が出て、RETRY ボタンでやり直せます。 今回はゲームの入り口になる「タイトル画面」を作り、ゲームらしい流れを完成させます。

1. 星空をプレハブにしておく ​

タイトル画面の背景にも、第6回で作った星空を流したいと思います。シーンをまたいで使い回すために、先にプレハブにしておきます。

1-1. Stars_Far と Stars_Near をプレハブにする ​

  1. Game シーンが開いていることを確認する
  2. Project で Assets/_Game/Prefabs フォルダを開く
  3. Hierarchy の Stars_Far を、Prefabs フォルダへドラッグする
  4. Hierarchy の Stars_Near も、Prefabs フォルダへドラッグする
  5. Hierarchy の Stars_Far と Stars_Near の名前が青色に変わったことを確認する
  6. Ctrl+S（Macは Cmd+S）でシーンを保存する

ヒント

名前が青いのは「プレハブから作られたもの（プレハブのインスタンス）」というしるしです。今回は Hierarchy の星は消さずに、そのまま残しておきます。

2. 新しいシーン Title を作る ​

2-1. シーンを作る ​

  1. メニューの File > New Scene を選ぶ
  2. New Scene ウィンドウが開いたら、Basic (URP) を選ぶ（カメラとライトが最初から入っているもの）
  3. 右下の Create を押す
  4. メニューの File > Save As... を選ぶ
  5. 保存先に Assets/_Game/Scenes フォルダを選ぶ
  6. 名前を Title にして Save を押す
  7. Project の Assets/_Game/Scenes に Title と Game の2つがあることを確認する

ヒント

New Scene ウィンドウにならんでいるテンプレートの名前は、Unity のバージョンによって少しちがうことがあります。カメラとライトが入っているもの（URP と書いてあるもの）を選べばOKです。

注意

新しいシーンを作るとき、「今のシーンを保存しますか？」と聞かれたら Save を押しましょう。Game シーンの変更が消えないようにするためです。

2-2. カメラを Game シーンと同じにする ​

タイトル画面のカメラも、第1回と同じ設定にします。

  1. Hierarchy で Main Camera を選ぶ
  2. Transform の Position を (0, 0, -10)、Rotation を (0, 0, 0) にする
  3. Camera コンポーネントの Projection を Orthographic にする
  4. Size を 5 にする
  5. Environment の Background Type を Solid Color にする
  6. Background の色を、Game シーンと同じ黒っぽい紺色にする
  7. Ctrl+S（Macは Cmd+S）でシーンを保存する

ヒント

Game シーンの色をまねしたいときは、Game シーンの Main Camera の Background の色をクリックし、出てきたウィンドウの Hexadecimal（1A1A33 のような英数字）をメモしておくと、同じ色を入力できます。

2-3. 星空を置く ​

  1. Project の Assets/_Game/Prefabs から Stars_Far を Hierarchy にドラッグする
  2. Stars_Near も Hierarchy にドラッグする
  3. ▶ Play ボタンを押して、星が流れていることを確認する
  4. ▶ を押して止める
  5. Ctrl+S（Macは Cmd+S）でシーンを保存する

3. タイトルの文字とボタンを作る ​

3-1. Canvas の設定 ​

  1. Hierarchy の何もないところを右クリックし、UI > Text - TextMeshPro を選ぶ
  2. Canvas、その子の Text (TMP)、EventSystem ができたことを確認する
  3. Canvas を選び、Canvas Scaler の UI Scale Mode を Scale With Screen Size にする
  4. Reference Resolution を X 1920、Y 1080 にする
  5. Match を 0.5 にする

ヒント

EventSystem は、マウスのクリックやキー入力を UI に伝える係です。これがないとボタンが押せません。 Inspector に「Input System を使うなら置きかえて」という黄色い注意が出たら、その下の Replace with InputSystemUIInputModule を押してください。

3-2. タイトルの文字 ​

  1. Text (TMP) の名前を TitleText に変える
  2. Rect Transform のアンカーが真ん中（middle-center）になっていることを確認する
  3. Pos X を 0、Pos Y を 200 にする
  4. Width を 1600、Height を 250 にする
  5. Text Input を SPACE SHOOTER にする
  6. Font Size を 150 にする
  7. Alignment の「中央よせ」と「上下の真ん中」のボタンを押す
  8. Vertex Color を好きな色（例: 水色）にする

3-3. START ボタン ​

  1. Hierarchy の Canvas を右クリックし、UI > Button - TextMeshPro を選ぶ
  2. 名前を StartButton に変える
  3. Pos X を 0、Pos Y を -100 にする
  4. Width を 400、Height を 100 にする
  5. StartButton の ▶ を開き、子の Text (TMP) を選ぶ
  6. Text Input を START にして、Font Size を 48 にする

3-4. QUIT ボタン ​

  1. Hierarchy で StartButton を選ぶ
  2. Ctrl+D（Macは Cmd+D）で複製する
  3. 名前を QuitButton に変える
  4. Pos Y を -240 にする
  5. 子の Text (TMP) の Text Input を QUIT にする
  6. Ctrl+S（Macは Cmd+S）でシーンを保存する

4. TitleMenu スクリプト ​

4-1. スクリプトを書く ​

  1. Project で Assets/_Game/Scripts フォルダを開く
  2. 何もないところを右クリックし、Create > Scripting > MonoBehaviour Script を選ぶ
  3. 名前を TitleMenu にして Enter キーを押す
  4. ダブルクリックして開き、中身を全部消して次のように書く
csharp
using UnityEngine;
using UnityEngine.SceneManagement;

// タイトル画面のボタン
public class TitleMenu : MonoBehaviour
{
    public void StartGame()
    {
        SceneManager.LoadScene("Game");
    }

    public void QuitGame()
    {
        Application.Quit();
    }
}
  1. Ctrl+S（Macは Cmd+S）で保存する

コードの解説 ​

行意味
using UnityEngine.SceneManagement;シーンを切りかえる SceneManager を使うための1行
public void StartGame()START ボタンから呼ぶ関数。ボタンから呼ぶので public を付ける
SceneManager.LoadScene("Game");Game という名前のシーンを読みこむ。今のシーン（Title）は閉じられる
public void QuitGame()QUIT ボタンから呼ぶ関数
Application.Quit();ゲーム（アプリ）を終わらせる

SceneManager.LoadScene とは

LoadScene("名前") は、「今のシーンを片づけて、その名前のシーンを新しく始める」命令です。 第11回の Retry では GetActiveScene().name（今のシーンの名前）を入れて、同じシーンを読みこみ直していました。今回は "Game" と名前を直接書いています。 名前は1文字でもちがうと読みこめないので、Project のシーンの名前と大文字・小文字までそろえてください。

注意

Application.Quit() は、ビルドしたゲームでだけ動きます。Unity エディターで ▶ を押しているときは、QUIT ボタンを押しても何も起きません。こわれているわけではないので安心してください。 また、第19回で作る Web 版（ブラウザで遊ぶゲーム）でも、ブラウザのタブは閉じられません。

4-2. TitleMenu をシーンに置く ​

  1. Hierarchy の何もないところを右クリックし、Create Empty を選ぶ
  2. 名前を TitleMenu に変える
  3. Project の TitleMenu スクリプトを、Hierarchy の TitleMenu にドラッグする

4-3. ボタンにつなぐ ​

  1. Hierarchy で StartButton を選ぶ
  2. Button コンポーネントの On Click () の ＋ を押す
  3. None (Object) の欄に、Hierarchy の TitleMenu オブジェクトをドラッグする
  4. No Function のメニューから TitleMenu > StartGame () を選ぶ
  5. Hierarchy で QuitButton を選ぶ
  6. On Click () に、StartButton を複製したときの設定が残っていることを確認する
  7. 右のメニューをクリックして TitleMenu > QuitGame () に変える
  8. Ctrl+S（Macは Cmd+S）でシーンを保存する

よくあるまちがい

QuitButton は StartButton を複製して作ったので、On Click () も StartGame のままコピーされています。QuitGame に変えるのを忘れると、QUIT を押してもゲームが始まってしまいます。

5. シーンを Build Profiles に登録する ​

5-1. Scene List に登録する ​

LoadScene でシーンを読みこむには、そのシーンを Scene List に登録しておく必要があります。リストの一番上（0番）のシーンが、ゲームを起動したときに最初に始まるシーンになります。

  1. Title シーンが開いていることを確認する
  2. メニューの File > Build Profiles を開く
  3. 左の一覧で Scene List を選ぶ
  4. 右側の Add Open Scenes を押して、Scenes/Title を追加する
  5. Scenes/Game もリストにあることを確認する（なければ、Project の Game シーンをリストにドラッグする）
  6. Scenes/Title をドラッグして、一番上に移動する
  7. 右はしの番号が Title は 0、Game は 1 になっていることを確認する
  8. 両方にチェックが入っていることを確認する
  9. Build Profiles のウィンドウを閉じる

注意

SampleScene など使わないシーンがリストに残っていたら、選んで右クリックし、Remove Selection で外しておきましょう（ファイルが消えるわけではありません）。

5-2. 動作確認 ​

  1. Title シーンで ▶ Play ボタンを押す
  2. タイトル画面が出て、星が流れていればOK
  3. START ボタンを押すと、Game シーンに切りかわってゲームが始まればOK
  4. ▶ を押して止める

注意

Game シーンに切りかわったあと、画面が暗く見えることがあります。そのときは Game シーンを開いて Window > Rendering > Lighting の Generate Lighting を押してください（第11回と同じです）。Title シーンでも同じことが起きたら、Title シーンでも押しましょう。

6. ゲームオーバーからタイトルに戻る ​

6-1. GameManager に BackToTitle を追加する ​

Project の Game シーンをダブルクリックして開きます。それから GameManager を開いて、次のように書きかえます。

csharp
using TMPro;
using UnityEngine;
using UnityEngine.SceneManagement;

// スコア・残機・ゲームの状態を管理する
public class GameManager : MonoBehaviour
{
    public static GameManager instance;   // どこからでも使えるようにする

    public int score = 0;
    public TextMeshProUGUI scoreText;

    public int lives = 3;                 // 残機（第11回）
    public TextMeshProUGUI livesText;
    public GameObject gameOverPanel;
    public bool isPlaying = true;         // ゲーム中かどうか

    void Awake()
    {
        instance = this;
    }

    void Start()
    {
        UpdateUI();
    }

    public void AddScore(int amount)
    {
        score += amount;
        UpdateUI();
    }

    public void LoseLife()
    {
        lives--;
        UpdateUI();

        if (lives <= 0)
        {
            GameOver();
        }
    }

    void GameOver()
    {
        isPlaying = false;
        gameOverPanel.SetActive(true);
    }

    void UpdateUI()
    {
        scoreText.text = "SCORE " + score.ToString("D6");
        livesText.text = "LIFE " + lives;
    }

    // ボタンから呼ぶ
    public void Retry()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().name);
    }

    public void BackToTitle()                 // ★追加
    {                                         // ★追加
        SceneManager.LoadScene("Title");      // ★追加
    }                                         // ★追加
}

保存します。BackToTitle は、Title シーンを読みこむだけの関数です。

6-2. TITLE ボタンを作る ​

  1. Hierarchy で GameOverPanel を選び、Inspector の名前の左のチェックを入れる（作業しやすいように一時的に表示する）
  2. GameOverPanel の ▶ を開き、RetryButton を選ぶ
  3. Ctrl+D（Macは Cmd+D）で複製する
  4. 名前を TitleButton に変える
  5. Pos Y を -240 にする
  6. 子の Text (TMP) の Text Input を TITLE にする

6-3. TITLE ボタンに BackToTitle をつなぐ ​

  1. Hierarchy で TitleButton を選ぶ
  2. On Click () に、RetryButton からコピーされた GameManager.Retry が入っていることを確認する
  3. 右のメニューをクリックして GameManager > BackToTitle () に変える
  4. Hierarchy で GameOverPanel を選び、名前の左のチェックを外す（元どおりかくす）
  5. Ctrl+S（Macは Cmd+S）でシーンを保存する

よくあるまちがい

GameOverPanel のチェックを外し忘れると、ゲームを始めたとたんに GAME OVER が表示されます。作業が終わったら必ず外しましょう。

7. 全体の動作確認 ​

7-1. タイトルから最後まで遊ぶ ​

  1. Project の Title シーンをダブルクリックして開く
  2. ▶ Play ボタンを押す
  3. START ボタンを押してゲームを始める
  4. わざと3回やられて、GAME OVER を出す
  5. TITLE ボタンを押して、タイトル画面に戻ればOK
  6. もう一度 START を押して、スコアが 000000、LIFE が 3 から始まればOK
  7. ▶ を押して止める

ヒント

▶ を押すと、今開いているシーンから始まります。タイトルから通して確かめたいときは、Title シーンを開いてから ▶ を押しましょう。ゲームの部分だけ調整したいときは、Game シーンを開いて ▶ を押せば、すぐにゲームから始められます。

チャレンジ課題 ​

  • タイトル画面の背景に、Kenney Space Kit の宇宙船や岩のモデルを置いてかざってみよう
  • タイトルの下に「PRESS START」や「© 2026 自分の名前」の小さな文字を入れてみよう
  • ボタンの色を変えてみよう（ヒント: Button コンポーネントの Normal Color、Highlighted Color（マウスが乗ったときの色）、Pressed Color）
  • タイトル画面にも BGM を流してみよう（ヒント: 第9回と同じく Main Camera に Audio Source）

つまずきポイント ​

こんなときはここを確認
START を押すと「Scene 'Game' couldn't be loaded」のエラーFile > Build Profiles の Scene List に Game が入っていて、チェックがついているか
START を押しても何も起きないStartButton の On Click () に TitleMenu.StartGame が入っているか。シーンに EventSystem があるか
QUIT を押してもゲームが終わらないエディターの中では終わらないのが正しい動き。ビルドしたときだけ終わる
QUIT を押すとゲームが始まるQuitButton の On Click () が StartGame のままになっていないか
TITLE を押すとゲームがやり直しになるTitleButton の On Click () が Retry のままになっていないか
シーンを切りかえると画面が暗いWindow > Rendering > Lighting で Generate Lighting を押す

まとめ ​

  • File > New Scene で新しいシーンを作り、File > Save As... で名前を付けて保存する
  • LoadScene で使うシーンは File > Build Profiles の Scene List に登録する。0番が最初に始まるシーン
  • ボタンの On Click () から public な関数を呼んで、シーンを切りかえる
  • プレハブにしておけば、別のシーンでも同じものを使い回せる