unityでタイトル画面のメニュー選択を実装したメモ。ボタンを配置してOnClick()で制御したり

バーチャル3Dクリエイター神部まゆみです(*^-^*)

この記事はunityでタイトル画面のメニュー選択を実装したメモです。

セーブデータをロードする仕組みを先に作ろうとしたけど、スタートのメニューを実装しないといけないっぽいので先にこっちをやります。

動作確認した最新バージョンは Unity6000.0.32 です。

●PRスペース●

■PR■

現在、3D建物系アセットが50%オフで買える Unityパブリッシャーセール をやってるみたいです(2025/10/02 23:59まで)。

Unity パブリッシャーセール　50%オフ

クーポンコード　3DFORGE2025　を使うと、↓3Dの洞窟を手軽に作れるCave Adventure Kitアセットがタダで貰えます(決済時にクーポンコード入力適用で0円に)。

無料アセットだけでも貰っておくと良いかも。

〇まゆみマート｜BOOTH

BOOTHでVRoidテクスチャやVRChat向けオブジェクトなどを販売しています。いいねしてくれると励みになります(*^-^*)

やりたいこと：タイトル画面でメニュー選択できるようにする
ChatGPTパイセンに聞いてみる
1. UIメニューの作成方法
2. 動作確認
さっそくやってみる
つづく？

やりたいこと：タイトル画面でメニュー選択できるようにする

前回タイトル画面からゲーム画面に遷移するところまではやったけど、キー入力されたらゲーム画面に遷移するだけのシンプルなものだった。

今回はNewGame,Continue,Optionのメニューを作って、それぞれ動作を割り当てたいですね。

まぁまだセーブとかオプション画面とかは作っていないので、NewGameを選択したらゲーム画面に遷移するだけのシンプルなやつを作ります。

ChatGPTパイセンに聞いてみる

とりあえず彼に聞いておけばなんとかなるだろう…。

生成AI

UnityのUIシステムを使えば、簡単にメニューを作ることができます。以下は、UnityのUIシステムを使ってメニューを作成する基本的な流れです。

UIメニューの作成方法

1. Canvasの作成

まず、Hierarchyウィンドウで右クリックして、UI > Canvasを作成します。
- Canvasは、UI要素を管理するためのコンテナです。すべてのUI要素はこのCanvasの子要素として配置されます。

2. テキストやボタンの追加

次に、New GameやContinueなどのUIボタンを追加します。

HierarchyウィンドウでCanvasを右クリックし、UI > Buttonを選択します。
- これにより、ボタンがCanvasの子オブジェクトとして追加されます。
- Textを含んだボタンが作成されるので、Inspectorでテキストを「New Game」や「Continue」などに変更します。
ボタンを追加したら、InspectorウィンドウでRectTransformの設定を使ってボタンの位置やサイズを調整します。
同じ手順で、ContinueやOptionなどのボタンも追加します。

3. ボタンのアクションを設定

ボタンがクリックされた時に実行されるアクションを設定します。

ボタンを選択し、Inspectorウィンドウの下部にあるOnClick()イベントにスクリプトを登録します。
OnClick()イベントに、先ほどのTitleScreen.csスクリプトのメソッドを設定します。
- 例えば、New GameボタンにはTitleScreen.OnNewGameメソッドを設定し、ContinueボタンにはTitleScreen.OnContinueを設定します。

4. ボタンにスクリプトを紐づける

以下のスクリプトを使って、各ボタンの動作を制御します。

TitleScreen.cs

using UnityEngine;
using UnityEngine.SceneManagement;

public class TitleScreen : MonoBehaviour
{
    public void OnNewGame()
    {
        SceneManager.LoadScene("GameScene");
    }

    public void OnContinue()
    {
        if (SaveSystem.HasSavedData())
        {
            SceneManager.LoadScene("GameScene");
        }
        else
        {
            Debug.Log("No saved data found.");
        }
    }

    public void OnOption()
    {
        Debug.Log("Option menu selected");
        // Optionメニューを開く処理など
    }
}

5. レイアウトを整える

Vertical Layout GroupやHorizontal Layout Groupなどのレイアウトツールを使うと、ボタンを自動的に整列させることができます。Canvas内にEmpty GameObjectを作成し、これにVertical Layout Groupを追加して、その中にボタンを配置することで、簡単に整然としたメニューを作成できます。

動作確認

すべて設定したら、プレイモードでボタンをクリックして、New GameやContinueの動作を確認してみてください。

これで、UnityのUIシステムを使ったシンプルなメニューを作成し、各ボタンに対応するアクションを設定することができます。

……以上ここまで。

UIのボタンを追加すれば、OnClick()でスクリプトに書いたメソッドを読み込んで、シーン遷移させたり制御できるみたいですね。

まぁなんとかなりそうかな。

さっそくやってみる

ChatGPT氏はたまにちょっと間違ってたりするから動かせるか不安ですが、まぁなんとかなると思うのでやってみます。

タイトルのメニューはVertical Layout Groupで簡単に綺麗に並べられるっぽい

まずUIでキャンバスを追加、その下に空のオブジェクトを追加してMenuContainerみたいな名前にしておきます。

MenuContainerにVertical Layout Group(垂直レイアウトグループ)コンポーネントを追加します。

↓中途半端に日本語化されているのか、検索では日本語で出るけど追加すると英語になってますｗ

これでMenuContainerの子のUI要素は勝手に整列して並べてくれるっぽいです。便利すぎる…Σ(ﾟДﾟ)

MenuContainerの上で右クリックしてボタンを三つ追加します。これで名前を変えればOK。

ボタンを押したらスクリプトに設定したメソッドが実行されるようにする

まず↓のスクリプトを作成して、MenuContainerにアタッチします。

using UnityEngine;
using UnityEngine.SceneManagement;

public class TitleScreen : MonoBehaviour
{
    public void OnNewGame()
    {
        SceneManager.LoadScene("GameScene");
    }

    public void OnContinue()
    {
        if (SaveSystem.HasSavedData())
        {
            SceneManager.LoadScene("GameScene");
        }
        else
        {
            Debug.Log("No saved data found.");
        }
    }

    public void OnOption()
    {
        Debug.Log("Option menu selected");
        // Optionメニューを開く処理など
    }
}