【Unity】Menuを作成する【uGUI】

Menuを作成する

3Dでも2Dでもメニュー画面を使うことは多いと思います。

以下のようにMenu画面を簡単に作成したのでご紹介します。

Unityバージョン:Unity 2018.3.13f1

やり方

①uGUIを組み合わせてMenuを作る

②Menuを呼び出すスクリプトを作る

今回はButtonが押されたらMenuを呼び出し、Menu内のButtonが押されたらMenuを閉じるシンプルな構成にしています。

①uGUIを組み合わせてMenuを作る

Menuを構成するパーツ

・Image(Background)：背景用のImage、黒色でアルファ値を100にしています

・Image：Menuの主な表示部分

・Button：Menuを閉じる用のButton

・Text：文字列Text Menuを表示

背景用のImageを用意した理由

・表示するMenuより後ろのオブジェクトを触らせないため(Raycast Targetが有効な時)

・現在表示しているMenuを強調するため

親子階層にする理由

・親を表示/非表示すると、子も表示/非表示になるため

②Menuを呼び出すスクリプトを作る

Buttonにアタッチする想定で、以下のように作ります。

Menu表示/非表示のフラグをInspectorから操作できるようにすることで、この1つのスクリプトでMenuを表示するボタン、非表示にするボタンどちらでも使うことができます。

後はMenuを表示するボタン、Menu内のボタンへスクリプトをアタッチして、Inspectorから設定をします。

Menu：Menuの一番親である背景用のImageを渡します

Enabled：チェックあり(Menu表示)/チェックなし(Menu非表示)

まとめ

・MenuはuGUIのコンポーネントを組み合わせて作れる

・親への変更は子へも反映される(Active、Position、Scale等)

・背景用のImageを使うことで後ろのオブジェクトを操作させなく出来る

 簡単なメニュー画面を作成しましたが、スマートフォンゲームでよくあるような表示時の演出等がないので、今後実装出来たらなと思います。