『ユニテのひみつ』のひみつ　4　メニュー／UIの改造

先日、RPG MAKER UNITEで作成したスマホ向けのアプリ『ユニテのひみつ』をリリースしました。

Android版
https://play.google.com/store/apps/details?id=jp.windbellrrr.app.unite.basic

iOS版
https://apps.apple.com/app/secret-of-unite/id6450209741

本エントリは『ユニテのひみつ』作る際に、どのような改造をUNITEへしたのか、また、どんなアドオンを作成したのかを、何回かに分けて解説していく内容の第四回となります。

メニュー／UIを改造するに至った経緯

UNITEのメニュー画面はキーやパッドで操作するのに最適化されているようで、マウスやスマホでのタッチ操作で扱うにはかなり難があります。

例えば、以下はメニューを開いたときの画面ですが

ここから、キーボードの右を押すと、「Skills」ボタンが点滅します。
その状態でENTERキーを押すと「Skills」タブ？が選択状態となり、その下にあるキャラクターを選択する状態へ遷移します（下の図）。
現在はキャラクターが一人しかいないので、そのキャラクターが点滅状態になっています。
この状態で、ENTERキーを押すと、スキル画面へと遷移します。

また、この状態から「Equipment」を選択するには、キーボード操作の場合、一度Xキーで画面上部のタブ選択状態へ戻ってから、右を押して「Equipment」を点滅状態にし、ENTERキーを押して「Equipment」を選択します。

では、この状態から、「Equipment」を「マウスでクリック」するとどうなるでしょうか？
……何も起きません。ボタンは一切反応しません。
何故なら、現在は「Skill」タブ？が選択状態かつその「対象キャラクターを選択している状態」だからです。
この状態からマウス操作で「Equipment」をクリックしたければ、一度画面右上の曲がった矢印の「戻る」ボタンを押して一旦画面上部のタブ選択状態まで遷移します。すると、やっと「Equipment」ボタンがクリックできるようになり、クリックすることで「Equipment」ボタンを点滅状態にすることができます。

しかし、この動作は、スマホアプリのUIとしては、直感的ではありません。
見えているボタンは、明確にグレーアウト等押せない状態が視覚化されていない限り、押せるべきです。
私はこのメニューの挙動が耐えられなかった為、メニューの動作を改造することにしました。

メニュー／UI改造の詳細

『ユニテのひみつ』で施したメニュー／UIの改造は、以下のようなものです。

・直感的でないと思われる挙動を修正（見えているボタンは押せるよう修正。一度のタッチで画面が切り替わるよう修正）
・タッチ操作では不要な画面状態をスキップ（「アイテム」を選択したらアイテム画面で「アイテム」一覧がいきなり表示されるように修正）
・スマホでも押しやすいようにボタンサイズを大きめに拡張

それ以外に以下のような改造もしました。
・戦闘時、敵が一体の場合は、敵を選択させる操作をスキップする
・メニュー画面に表示されるキャラクターのHP表示のバーと数値が重ならないよう修正
・選択肢のボタンの大きさを押しやすいように調整

ボタンの大きさなどは、メニューのPrefabを修正することになります。
メニューのプレハブは、UIパターンによってファイルが別になっており、6タイプあります。

修正する場合は、現在利用中のUIパターンに対応したPrefabファイルを修正する必要がありますので注意が必要です。
また、一部のボタンの大きさなどは、データベース＞初期設定＞UI設定あたりを変更したりすると、修正が巻き戻ることがあります。これにも注意が必要です。
＃メニュー系は大丈夫だった気がしますが……選択肢のボタンの大きさの調整がいつの間にかなかったことになっていたことがありました。

バトルメニューのPrefabは以下です。
これも利用中のUIパターンに対応したPrefabファイルがあるので、修正する際は注意が必要です。