【Unity】簡単に管理しやすいメニューを作るために
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…と続くかたちでした。
1.13 ❤︎65:Ultra Fast Setting Menu Creator
シンプルなメニューのUIです。起動直後にパソコンのキーボードでESCボタンを押さないとメニュー画面が開きませんでしたが、確認できました。Canvasにイメージがクローンされて画面が生成されるかたちです。
1.14 ❤︎12:TreeView
TreeviewのUIです。Canvasで構成されていました。スワイプでメニューをスクロールできる仕組みにはなっておらず、画面端にあるスクロールバーで動かす仕組みでした。
1.15 ❤︎5:HD Development - Achievement System
特徴としては2つあり、ポップアップ形式のアチーブメントとリストのメニューが組み込まれていました。後者はタップしてスワイプでスクロールできることが確認できました。Canvasで構成されています。
2.セーフエリアあれこれ
2.1 ❤︎561:Safe Area Helper
ここまで調べて、ほとんどのメニューはCanvasで作られているため、Canvasで作ったUIに対してSafe Areaをかける方が早いのでないかと思いました。（Spriteベースのメニューを見つけることよりも）そこでセーフエリアヘルパーを見つけました。
2.1 ❤︎82:Notch Solution
Unityの開発画面でセーフエリアを確認できるアセットを見つけました。ゲームを実行時にこれまで「Game」というタブで確認していたところをSImulatorに変更してセーフエリアの確認ができます。
シーン画面にもセーフエリアがあり、これを元にCanvasの設計をすれば良いこととなります。
なお、Simulatorの画面の表示の仕方はWindow-General-Notch Simulatorにあります。
SafeAreaのセットと組み合わせた時はこちらです。
3.その他UIのあれこれ
メニューを探す中で様々な便利ツールや新しいUIを見つけたので、備忘録がてらリンクや所感を残しておきます。
3.1 ❤︎11:Achievement System
アチーブメントに必要な結果をスムーズに組み込めるサンプルで、デモを実行してみると、Rを押すと画面上部からポップアウトが表示されることが確認できました。プログラムしている時の任意の変数をこれで確認できるかなと思います。
このサンプルの良さは次のような専用ウィンドウでアチーブメントタイプを任意に組み込めることかなと思います。
3.2 ❤︎60:Simple Achievements
上記よりも大きな画面で確認したい場合はこちらが便利そうです。
3.3 ❤︎59:SUGAR Social Gamification
エンディングの効果やUIがアセットとして提供されていました。紙吹雪が吹いたり、何か達成したときのUIの参考になりそうです。
3.4 ❤︎276:Spawning Pool
死んだオブジェクトや非アクティブなオブジェクトを追跡し、すぐに通知して、再び必要になったときにすぐにそれらを提供できるようにするみたいです。これをマスターして組み込んだ方が良さそうだなと思えました。
3.4 ❤︎133:Take Note
Unityの中でタスクをメモしたい場合で、ToolsからTakeNoteを開くと、自分でタスクを編集でき、いつ完了したかなど追記することができます。便利だなと思います。
3.5 ❤︎372:Easy UI Animator
軌跡を書いてアニメーションしたり、簡単なアニメーションができるツールです。アニメーションにまだ詳しくないのですが、詳しくなったら参考にしたいアセットです。
3.6 ❤︎8:Animation Generator
アニメションを生成してくれるツール。Unityがアニメーションを作るための状態遷移などで管理できますが、どのくらいこちらのアセットが新機能をケアしているかは不明です。アニメーションに詳しくなったら、また見にいきたいところです。
3.7 ❤︎1997:SimpleUI Elements
スライドバーなどが含まれたUIのサンプル集です。SppriteRenderで作られてそうな雰囲気がします。
3.8 ❤︎481:Terraian Former
Blenderなどのモデル生成に特化したものを使わずUnity上でモデルを作れるアセットを見つけました。