腐りかけエンジニアのブログ

学生時代ろくに勉強してこなかった人間が、プログラムに挑戦してみる。

【Unity】ゲームアプリによくあるメニュー的なものを作ってみる

  • 今回はこんなの作っていきます。

https://i.gyazo.com/45f725e3b6f7bb1a3ec0bb0a769c7da0.gif

作ってみる

ざっくりとしたメニューですが、それなりに使えます。
(背景は確認用として見難かったので後から入れました。実装には入っておりません)

アイコン素材の方はこちらを使っていきます。
アイコン素材

基盤となるMenuの背景を作成

1. UI -> Image でオブジェクトを作り、名前をMenuBarにし、アンカーを設定します。f:id:doggy_dog:20160221012643p:plain


2. MenuBarの色を見やすい色にし、ToggleGroupHorizontalLayoutGroupコンポーネントを追加します。
f:id:doggy_dog:20160221013326p:plain

MenuBarのTab項目を作成

1. Canvasの子要素にToggleを追加。名前はHomeとします。f:id:doggy_dog:20160221015806p:plain


2. HomeのToggleのGroupMenuBarに設定します。
f:id:doggy_dog:20160221023941p:plain


3. HomeのBackgroundCheckMarkのImageを家っぽいアイコンに変えましょう。また、LabelのテキストをHOMEにして、それぞれの位置を調整します。
(アセット素材のアイコンが小さいのでScaleを2にしました。)
f:id:doggy_dog:20160221020908p:plain


4. アイコンが選択された時がわかりにくいので、CheckMarkを選択した状態で上のタブのComponent -> UI -> EffectsからOutLineを付けます。
(色は好みで構いません。また、文字にもOutLineを付けると見やすくなると思います。)
f:id:doggy_dog:20160221022928p:plain


5. Homeをコピー&ペーストで増やします。それぞれいじって名前を変えましょう。
(私はShopとOptionにしました)
f:id:doggy_dog:20160221023006p:plain


6. 作ったメニュータブをMenuBarの子要素にします。今だと全てが選択されている状態になっているので、Home以外のメニュータブのToggle -> Is On のチェックを外しておきます。
f:id:doggy_dog:20160221023237p:plain

こんな感じになったかと思います。
https://i.gyazo.com/48a68a4044defd737172778cf52fdc60.gif

それぞれ対応した内容を作成

1. Canvasの子要素に空のオブジェクトを作成アンカーを画面全体にして、MenuBarとかぶらないようにBottomを調整します。名前はMenusとします。
f:id:doggy_dog:20160221025242p:plain


2. Menusの子要素にImageを作成し、アンカーを画面全体にします。画像の色を黒くして、透明度は半分ぐらいにしましょう。名前はOverlayにしました。
これを使って、ShopかOption選択時は黒い画像を敷いてタッチできないようにします。
f:id:doggy_dog:20160221025535p:plain


3. ShopとOptionがわかりにくいので、タイトルのヘッダー的なものを作ります。
Menusの子要素にImageを作成し、アンカーを設定します。そのImageの子要素にTextを追加して好きな文字を入れましょう。Imageの名前はShopContentにしました。
f:id:doggy_dog:20160221031315p:plain


4. ShopContentをコピー&ペーストしてOptionも作ります。
f:id:doggy_dog:20160221031725p:plain

メニュー内容とメニューバーの紐付け

1. MenuBarのShopのToggleコンポーネントにある、OnValueChangedを設定します。
(+)マークを押して、要素を追加します。追加したイベントにShopContentを設定し、No Functionの部分を押してGameObject -> SetActiveに設定します。
f:id:doggy_dog:20160221032033p:plain


2. 1と同様にOnValueChangedにイベントを追加し、ShopとOptionには黒い画面を敷くように設定します。
f:id:doggy_dog:20160221032939p:plain


3. 1と2の内容をOptionにも設定をします。また、HomeにはOverlayを非表示にするイベントを設定しておきます。
(Optionとは違い、GameObject -> SetActive(bool)の方です)
f:id:doggy_dog:20160221033220p:plain


4. 最初はHomeが選択されているので、OverlayとShopContentとOptionContentはOffにしておきます。
f:id:doggy_dog:20160221033417p:plain

これで完成になります。
Shopの内容を追加していく場合は、ShopContentの子要素として追加する形になります。

まとめ

これを使うと、思ったより簡単にメニューが実装できそうです。
簡単なゲームのメニューとして使うのであればバッチリだと思います。
(見直す部分はそれなりにありますが・・・)

よければ使ってみてください。