【ロスラビ！進捗.37】アコーディオンメニュー

アコーディオンメニュー

　今月はUIのお話。アコーディオンメニューについての記事です。

　アコーディオンメニューとは！

　こんな風に特定の場所をクリックしたりすると、隠れている機能が出てくるUIのことを指します。

　Webで作るとこんな感じ。アニメーションで動くとどうしてアコーディオンと呼ばれるのかも伝わりやすいのではないでしょうか。伸び縮みする様子がアコーディオンのジャバラみたいですね。

必要な情報だけを最初に見せる

　アコーディオンメニューを実装することで、大量の内容が表示されるウィンドウの内容をわかりやすくまとめることができるようになります。
例えば、先程の見せた表情のUI。

　大量に操作できる項目があるときに、グループでまとめてスッキリと表示されることが出来ます。
口だけ変えたいのに、その上にある眉の一覧をスクロールして視線の一覧をスクロールして目の一覧をスクロールして瞳の一覧をスクロールして……となると大変ですからね。

　また、色指定の際の初期表示はパレットを表示して、RGBバーでの細かい指定は最初は隠しておく、というUIが作れるようになりました。

……が、参考に他のゲームのUIを見てみるとRGBバーは最初から表示していても良いのかも。
パレットの方に「赤系」「青系」「緑系」……というもっと細かいパレットをアコーディオンメニューで畳んだ状態で入れるのもありかな……？

　ちなみに、一番最初にアコーディオンメニューが欲しいなぁと思ったのは戦闘ログのこれ。連続攻撃を「合計○ダメージ」にまとめて、アコーディオンメニューで詳細を開く形にした方が情報が見やすくなります。

表示内容の切り替え

　アコーディオンメニューと言っていますが、作ったものは内部的には「ツクールのコマンドウィンドウの特定の要素をグループ化してオン・オフする」という機能。
ツクールのウィンドウはそういう風には作られていないので、うまいこと自分で改造して作るしかないんですね。
　これによって、要素Aの表示非表示だけでなく、要素Aと要素Bのどちらかだけを表示する、ということもできるようになりました。

オッドアイ

　例えばそれで作りやすくなったのがオッドアイのキャラメイク。
最初から左目と右目の色を別個に設定する操作だと、両目の色を合わせたいときに面倒になってしまいます。なので、「両目の色を変えるモード」と「オッドアイとして別個に色を変えるモード」が必要になります。
　それに加えて瞳に使われる2つの色を「別々に編集する」という選択肢も必要です。

A：両目の色を変える要素
B：左目の色を変える要素
B：右目の色を変える要素
C：両目の色1だけを変える要素
C：両目の色2だけを……
D：左目の色1だけを……
D：左目の色2だけを……
……
……
となり、全部画面上に表示させてしまうとえらいこっちゃになってしまいます。

　そこで、「両目を一緒に設定するかどうか」「瞳の2色を一緒に設定するかどうか」で表示項目をオン・オフすることで、表示項目がシンプルになってキャラメイクしやすくなる……

　という説明をドヤ顔でするつもりだったのですが、実装してみると思った以上に「良くないUI」になって頭を抱えているのが今です。

　この動画で、どういう操作でどういうキャラメイクをさせたいのかは分かってもらえるかな……。これをツクールの改造でできる範囲でブラッシュアップして操作しやすくするというタスクが今積み上がりました。

1月ダイジェスト