【Unity】簡単に管理しやすいメニューを作るために

2022年9月30日 00:37

Unityで簡単で管理しやすいメニューを作るために、無料のアセットを色々と漁りました。この検索を行う前、Canvasで画面に固定のUIとしてメニューを作成すると、後から画面トップなどに配置するアダプティブバナーを含めた実装が面倒であるので、Spriteベースで作成されたメニューを見つけたいところでした。しかし、多くのMenuはCanvasにより制作されていたので、途中からCanvasで作られたUIの画面にセーフエリアを設けることと狙いとしてアセットを探しました。

1.メニューのあれこれ

UnityAsset storeの❤︎の評価順に実際に試したものの所感を書いていきます。❤︎の評価は2022/9/27時点のものです。

1.1 ❤︎1582:3D Modern Menu UI

3Dのリッチなメニューです。試してみると3Dのメニューが表示されました。案の定Canvasで作成されていました。構成はCanvasですが、ヒエラルキートップにSettingControllerという名前でOptions Menuというスクリプトが組み込まれており、メニューのUIを自分の好きなものに自由に変えられる構成となっていました。

他にもMOBLE版に組み込まれたものがありました。実行してみると、スマホのサイズに応じてメニューが自動で調整されるようになっていました。

1.2 ❤︎1052:SIMPLE FANTASY GUI

PSD形式の様々な集類のGUIが格納されていました。ただの絵なので、SpriteRenderで表示しただけとなります。メニューとしては利用できないかなと思いました。❤︎の数が多かったのは見た目がリッチだからでしょう。

1.3 ❤︎988:FairyGUI

これまた様々な種類のメニューが組み込まれたアセットです。起動してみると、ヒエラルキーにはUIPanelというスクリプトとUI ContentSclaerというスクリプトのみで構成されていました。ホーム画面からリストやグリットといったUIの様子を確認できるのも非常に使いやすい点でした。リストももちろんタップ対応させており、好感触です。

リスト部分を見に行きましたが、リストの1つ1つはまさかのメッシュでできており、マテリアルにFairyGUI/Imageというものが設定されていました。マテリアル内のテクスチャを見に行くと、１枚のBasic_atlas0.pngで構成されており、見た目を変えたいとなると、このPNGを変える必要が出てきそうと思いました。

デモの数は31個と多くて勉強になりました。

1.4 ❤︎836:Slider Menu

フワフワと流れるのようなメニューボタンでスライドメニューが送られるのだが、スライドとタップで処理を変えたら更にいい感じになりそうです。試してみるとスライドでメニューが送られる様子が確認できました。こちらもCanvasの中に子要素とてScrollRect、更にその子要素としてImageのSlider、Scrollberボタンなどが続きました。

1.5 ❤︎513:Pi UI

タップするとピクセルのメニューが出てくるアセットです。画面をタップするとメニューが割り込み出てくることが確認できました。

1.6 ❤︎449:Redial Menu Frame

円のメニューフレームです。ボタンを押すとエフェクトが飛ぶ様子が確認できました。

なお、後述するアセットNotch Solutionを利用した結果がこちらです。

1.7 ❤︎358:MainMenu with Parallax Effect FREE

ドット絵のメニューです。Canvasにメニューが組み込まれていました。メニューが1つのPrefabとなっており、Canvas、CanvasScaler、Graphic Raycaster、MenuController(Script)というコンポーネントの構成でした。プログラムを実行させたときはこのような形でした。UIのドット絵のかたちは心地よいので雰囲気を参考にしたいところです。

1.9 ❤︎194:Easy Front End

ポップアップ、フロントエンドと呼ばれるメニューのアセットを試しました。(❤︎の数は20221006時点のものです)Canvasの中にButtonコンポーネントをつけたプレハブで構成されていました。

1.10 ❤︎155:ScrollView Adapter(ListView,GridView)

スクロールビューとグリットビューののサンプルです。アセットを開くとすぐにメニューがあり確認できました。こちらはCanvas(Canvas Scaler,Graphic Raycaster構成)の中にPrefabのメニュー構成があり、グリットビューのプレハブがあり、メニュー部分にはImageとScrollRectというコンポーネント、更にその子としてviewportとScrollbarImageとMaskまたはScrollbarというコンポーネントで成り立っていました。

スマホのスワイプにも対応しています。これらはCanvusに書いてあるところが、個人的には広告サイズを含めたリスケールの難しいところだと思います。

なお、後述するアセットNotch Solutionを利用した結果がこちらです。

アイテムの増減も確認できました。

更に後述するSafe Areaを組み込んでみました。組み込み方はSafeAreaのCanvasオブジェクト以下のPnlTop以下をプレハブとし、ClassicGridViewのCanvasに子要素として挿入し、元々あった上記のビューが子要素としてCBackground、VerticalGridView…など4つの子要素と分かれていたので、GameObjectをCanvas以下に新しく作成し、その下にこれらの子要素を入れてリスケールしたかたちです。

1.11 ❤︎116:Contact List

シンプルなリストです。インストールしてみましたが、アセットの中にエラーがあり開けませんでした。

1.12 ❤︎91:Recyclable Scroll Rest

上下がつながっているリストです。

デモを開いてみると、GridHorizontalとGrod Verticalがあり、リストの方向が縦か横か２種類ありました。もちろんタップにも対応していました。行方向に一覧となっているリストもありました。ヒエラルキートップにRecyclableAcrollerDemoというスクリプトが組み込まれており、これがスクロールしたものの上下を繋げて無限スクロールを可能にしているようです。
構成はCanvasの下にPanelが子要素として組み込まれており、そのPanelの中にscrollview…と続くかたちでした。