【Unity】ゲームアプリによくあるメニュー的なものを作ってみる
- 今回はこんなの作っていきます。
作ってみる
ざっくりとしたメニューですが、それなりに使えます。
(背景は確認用として見難かったので後から入れました。実装には入っておりません)
アイコン素材の方はこちらを使っていきます。
アイコン素材
基盤となるMenuの背景を作成
1. UI -> Image でオブジェクトを作り、名前をMenuBarにし、アンカーを設定します。
2. MenuBarの色を見やすい色にし、ToggleGroupとHorizontalLayoutGroupコンポーネントを追加します。
MenuBarのTab項目を作成
1. Canvasの子要素にToggleを追加。名前はHomeとします。
2. HomeのToggleのGroupをMenuBarに設定します。
3. HomeのBackgroundとCheckMarkのImageを家っぽいアイコンに変えましょう。また、LabelのテキストをHOMEにして、それぞれの位置を調整します。
(アセット素材のアイコンが小さいのでScaleを2にしました。)
4. アイコンが選択された時がわかりにくいので、CheckMarkを選択した状態で上のタブのComponent -> UI -> EffectsからOutLineを付けます。
(色は好みで構いません。また、文字にもOutLineを付けると見やすくなると思います。)
5. Homeをコピー&ペーストで増やします。それぞれいじって名前を変えましょう。
(私はShopとOptionにしました)
6. 作ったメニュータブをMenuBarの子要素にします。今だと全てが選択されている状態になっているので、Home以外のメニュータブのToggle -> Is On のチェックを外しておきます。
こんな感じになったかと思います。
それぞれ対応した内容を作成
1. Canvasの子要素に空のオブジェクトを作成。アンカーを画面全体にして、MenuBarとかぶらないようにBottomを調整します。名前はMenusとします。
2. Menusの子要素にImageを作成し、アンカーを画面全体にします。画像の色を黒くして、透明度は半分ぐらいにしましょう。名前はOverlayにしました。
これを使って、ShopかOption選択時は黒い画像を敷いてタッチできないようにします。
3. ShopとOptionがわかりにくいので、タイトルのヘッダー的なものを作ります。
Menusの子要素にImageを作成し、アンカーを設定します。そのImageの子要素にTextを追加して好きな文字を入れましょう。Imageの名前はShopContentにしました。
4. ShopContentをコピー&ペーストしてOptionも作ります。
メニュー内容とメニューバーの紐付け
1. MenuBarのShopのToggleコンポーネントにある、OnValueChangedを設定します。
(+)マークを押して、要素を追加します。追加したイベントにShopContentを設定し、No Functionの部分を押してGameObject -> SetActiveに設定します。
2. 1と同様にOnValueChangedにイベントを追加し、ShopとOptionには黒い画面を敷くように設定します。
3. 1と2の内容をOptionにも設定をします。また、HomeにはOverlayを非表示にするイベントを設定しておきます。
(Optionとは違い、GameObject -> SetActive(bool)の方です)
4. 最初はHomeが選択されているので、OverlayとShopContentとOptionContentはOffにしておきます。
これで完成になります。
Shopの内容を追加していく場合は、ShopContentの子要素として追加する形になります。
まとめ
これを使うと、思ったより簡単にメニューが実装できそうです。
簡単なゲームのメニューとして使うのであればバッチリだと思います。
(見直す部分はそれなりにありますが・・・)
よければ使ってみてください。
