[Unity] シンプルにボタンを作ってみる 続き



Nプログラマ(@Nprog128)です。

前回の記事:シンプルにボタンを作ってみる で、シンプルなボタンを作りました。
そして、以下のような課題が残りました。

ボタン専用メソッドを一つにまとめる。

今回の記事では、この課題に対応した内容を記載していきます。

概要

今回は道具のメニュー画面を作る、という想定のもと、どのボタンが押されたかという部分を作ります。

GUIを含めた見た目がおしゃれなメニュー画面を作るわけではないので、ご注意を。

さて、道具のメニューには以下のボタンがあるとします。

  • 次のページへ進む
  • 閉じる
  • アイテムを使う

画像だとこんな感じ。

/img/article/2019/03/02/01.png
作成するボタンのイメージ

これら3つのボタンでどれが押されたのかを判別する必要があります。

前回の内容はこんなヒエラルキーの構造になっていました。

/img/article/2019/03/02/02.png
前回のボタンの階層構造

今回は、MenuとButtonの間にMenuItemを挟むことにしますのでこんな感じになります。

  • Menu
    • MenuItem
      • Button

MenuItemはメニューの項目という意味で使います。
(ゲームでは道具というイメージが強いですよね)

作りは結構シンプルで、どちらかというとインスペクタでの作業が多くなりそうです。

実装

ソースコード

SampleInit.cs (Editor)

SampleInit.cs コードを開く
SampleInit.cs
 1using UnityEditor;
 2using UnityEngine;
 3using UnityEngine.UI;
 4
 5public class SampleInit 
 6{
 7    [UnityEditor.MenuItem("Tool/InitScene")]
 8    public static void InitScene()
 9    {
10        var goCanvas = GameObject.Find("Canvas");
11        GameObject.DestroyImmediate(goCanvas);
12
13        EditorApplication.ExecuteMenuItem("GameObject/UI/Button");
14        var templateButton = GameObject.Find("Button"); // ExecuteMenuItemで作成されたボタン
15        goCanvas = GameObject.Find("Canvas");
16        // メニューゲームオブジェクトを作成
17        var goMenu = new GameObject("Menu");
18        goMenu.transform.SetParent(goCanvas.transform);
19        goMenu.transform.localPosition = Vector3.zero;
20        goMenu.AddComponent<Menu>();
21        
22        string[] buttonNames = {
23            "MenuItemClose",    // 閉じるボタン
24            "MenuItemNext" ,    // 次へボタン
25            "MenuItemUse",      // 使うボタン
26        };
27        Vector2[] buttonPositions = {
28            new Vector2(-200, 0),
29            new Vector2(   0, 0),
30            new Vector2( 200, 0),
31        };
32        for (int i = 0; i < buttonPositions.Length; i++)
33        {
34            // MenuItem
35            var goMenuItem = new GameObject(buttonNames[i]);
36            var menuItem = goMenuItem.AddComponent<MenuItem>();
37            menuItem.buttonName = buttonNames[i];
38            goMenuItem.transform.SetParent(goMenu.transform);
39            goMenuItem.transform.localPosition = Vector2.zero;
40
41            // ボタン
42            var goButton = GameObject.Instantiate(templateButton, Vector3.zero, Quaternion.identity);
43            var button = goButton.GetComponent<Button>();
44            button.transform.SetParent(goMenuItem.transform);
45            button.transform.localPosition = buttonPositions[i];
46            button.name = buttonNames[i] + "Button";
47            var textComp = button.GetComponentInChildren<Text>();
48            textComp.text = buttonNames[i];
49        }
50        
51        GameObject.DestroyImmediate(templateButton); // コピー用オブジェクトを削除
52    }
53}

説明

いつもの初期化用スクリプトです。

シーンファイルの中身を書き換えるので、新規のサンプル用プロジェクトでの実行をお願いします。

やっていることは前回同様、概要にあるヒエラルキーの図のゲームオブジェクトを作成して配置しています。

配置後は、インスペクタでButtonのOnClickの項目を設定すれば準備完了です。

MenuItem.cs コードを開く
MenuItem.cs
1using UnityEngine;
2
3public class MenuItem : MonoBehaviour
4{
5    public string buttonName;
6}
7view rawMenuItem.cs hosted with  by GitHub

説明

どのボタンがおされたかを判別したいので、MenuItemに名前を持たせることにします。

インスペクタから以下の名前のいずれかを入力します。 この名前を使って、Menuの中で名前からどのボタンが押されたかを判定します。

  • MenuItemClose
  • MenuItemNext
  • MenuItemUse
Menu.cs コードを開く
Menu.cs
 1using UnityEngine;
 2
 3public class Menu : MonoBehaviour
 4{
 5    public void OnClick(MenuItem menuItem)
 6    {
 7        switch (menuItem.buttonName)
 8        {
 9            case "MenuItemClose":   // 閉じる
10                Debug.Log("clicked close.");
11                break;
12            case "MenuItemNext":    // 次のページ
13                Debug.Log("clicked next.");
14                break;
15            case "MenuItemUse":     // アイテムの使用
16                Debug.Log("clicked item use.");
17                break;
18        }
19    }
20}

説明

前回は、OnClickXXXという風に、各ボタン毎の専用メソッドを作成していました。

今回は、ボタン専用メソッドがOnClickメソッド一つになってスッキリしたと思います。

switchの内部では、各ボタンについている名前からどのボタンを押したのかを判定して、メッセージを表示しています。

これでボタンが押された処理を集約することができました。

あとは、インスペクタでOnClickにポチポチ設定していけばいいですね。

/img/article/2019/03/02/03.png
ボタンの設定

実行結果

起動したら3つのボタンが表示されますので、それぞれのボタンを押してConsoleに押されたボタンに対する出力が表示されたらオッケーです。

表示されない時は、ButtonのOnClickの設定が未設定の可能性があるので確認してみてください。

考察

今回の内容で、以下の課題が見えてきました。

  1. ボタン種類の判定が、文字列の比較
  2. OnClickの引数がMenuItem

1. ボタン種類の判定が、文字列の比較

MenuItemボタン判別用の名前を入力するという設計して作ってみたものの、

Inspectorでの入力と、実装のswitchの部分の二箇所を入力しないといけないので、手間がかかるのとタイプミスが心配なところです。

これは文字列の代わりに、列挙体を使えば解決しそうです。

2. OnClickの引数がMenuItem

ここは作り方によって変わるかと思います。

MenuItemしか使わないというならこのままでもいいですが、switch内部で押されたボタンに応じて使うコンポーネントを切り替えたい時があるかもしれません。

そういう時は、引数をGameObjectにしておくといいかもいいかもしれません。

GameObjectならGetComponentで任意のコンポーネントを取得することができます。

こうしておけば、Menuの方で実装の自由度が上がりそうです。

まとめ

今回は、ボタンを押した時のメソッドを一つにまとめるという内容でした。 次回は、考察で書いた課題を改善してもう少し使いやすくしてみます。

それでは、このへんで。
バイナリー!

\ ちょっとお買い物 /


関連した記事