UIを作るのは大変という話

ご来訪いただきありがとうございます。「あすのかぜ」です。

配信開始まであと半日を切っていますが、今回は「UIを作るのは大変」というお話しをご紹介しようかと思います。

ちなみにUIとはユーザーインターフェイスの略称です。

他人がつくったUIを改造する難しさ

本作ではWOLF RPGエディターのコモンイベント集に投稿されているのと様制作の「エネミー図鑑」と、ST様が制作したコモンをut様が改造した「アイテム図鑑」を取り入れさせていただきました。

ですが、本作の画面サイズは960×720px、かつ、基本フォントサイズを変更しているため、それをそのまま使うことはできませんでした。

画面サイズとフォントサイズが変わった分、１ページの「表示最大数」や「カーソルサイズ」、「カーソル移動量」などを修正しなければなりません。

しかし、人様のつくったUIですので、何を修正しなければいけないのかは分かっても、どこをどう修正すれば思ったとおりに動作するのかがまるで分かりませんでした。

なぜUIづくりは難しいのか

プログラムというのはあくまでもロボットに指示を出すための言語です。人間相手であれば「焼きそばパンを買ってこい」と言われれば何を指示されているのかが分かりますが、「CSelf10＝0+1」と言われても人間にはその意味が理解できません。

だからこそ、プログラムには「▼ここでカーソルサイズの設定」のように、人間に分かる言語でメモしてあると他者が見たときも理解できますし、自分が後で見たときにも修正箇所を理解しやすいです。

そして、プログラムは人間の目には見えません。

例えばゲーム内の数値でレベルが10上がっていても、表示される文字にもそれを反映しないと、人間（プレイヤー）目線ではレベルが変化していないことになるわけです。そういった人間に見えていない情報を人間に見えるようにデザインされたものがUIなのです。

ですから、UIを作ったり改造したりするときは、
①まずはどのように動作をさせたいのかを考え、
②その動作を実現させるにはどのようなプログラムを組めばよいのかを考え、
③そのプログラムが予期せぬ動作をしないかを考慮しつつ書き込んでいくわけです。

これを実際にやってみると、あっちを直したらそっちに影響が出てしまった、なんてことがたくさん起こるので大変です。

いろいろな同人RPGを遊んだことがある方なら分かると思いますが、回想できる部屋はキャラクターがたくさん並べられていることが多いかと思います。それがなぜなのかと言えば、UIを作るのは難しいからUIを作らずに済む方法で実現しているというわけです。

……まあ、UIは作れるけど開放済みかどうかが待機アニメで判断できるから分かりやすさを重視してそうしている、というケースもあるでしょうね。

あとはプレイヤーの経験則に任せれば、かえってその方が回想できる部屋だと理解してもらいやすいから、とかでしょうね。

UIづくり初心者はリストを動かしてはいけない

これは「エネミー図鑑」などを改造する過程で気が付いたことなのですが、UIづくり初心者がリストを動かそうとするのはおすすめできません。

リストを動かすのってどういうこと？という疑問につきましては○ケモン図鑑などを想像していただければ良いかと思います。つまり、カーソルを下に向かって動かしていくと、リストが上に流れて行くような動作のことです。

アレの難しいところは、例えば「カーソルがNo11以上になったらリストを動かす」のように設定してしまうと、カーソルが画面の一番上にあって、カーソル位置がNo50などに合っていたとき、カーソルが下に向かって動かずにリストを動かすような動作になってしまうことです。

ですから、カーソル位置とリストNoの情報を両方とも使って、それをうまいこと条件分岐させて、状況に適した動作を行うようにしなければいけません。

これはたくさんの動作パターンを考えなければなりませんし、たくさんの動作パターンに対応するように条件を整理させなければなりません。

とんでもなく複雑！！

……ということで、UIづくり初心者にはリストを動かす動作はおすすめしません。

UIを作るのは大変でした……

私が「ラスト・メイル」内で作ったUIは以下の３つです。

• 「Ｈシーン」のギャラリーモード
• 「立ち絵」のギャラリーモード
• フリーバトルモード

いずれもクリア後に解放されるおまけ部屋での機能ですが、これがなかなかに苦労しました。

この中で一番簡単だったのは「Ｈシーン」のギャラリーモードです。

「Ｈシーン」のギャラリーモード

左右のキーを入力した場合、表示中の画像をスライドさせてから消去。次の画像を表示＆スライドしてくる。それが解放済みではない画像の場合、RGBに補正をかけて暗くする。

決定キーを入力した場合、未解放であればその旨を伝える文章を表示する。解放済みであれば表示中と同じ画像を表示して、それを画面サイズに拡大する。その状態でさらに決定キーかキャンセルキーを押すと表示中の画像を差分に切り替える。それ以上の差分がなければ画像を消去する。

他にも動かしている要素はさまざまありますが、大きなところで言えばこのような感じです。かなり簡単ですね。

なぜ簡単なのかというと、それはカーソルがないからです。

UIづくりの難易度に大きく影響する要素の１つは間違いなく「カーソル」の存在です。

「立ち絵」のギャラリーモード

「立ち絵」のギャラリーモードはフリーバトルモードの敵（キャラクター）選択にも転用していますが、基礎だけで言えば難しくはありません。

ウインドウを表示して、データベースに登録したキャラクター名をリスト化して表示。カーソル位置情報をもとに右側に立ち絵画像を表示する。これだけ聞くと簡単そうですね。

ですが、そこからさらに差分確認画面を表示したり、○○のときだけ別の挙動をさせたりと、実のところは何度も何度もつまづいて、修正に修正を重ねました。

また、前述したとおり「カーソル」があることが難しい要因の１つでして、これに関してはエネミー図鑑やアイテム図鑑を改造するときに学習した知識がありましたので、それらのプログラムを参考にしながら何とか頑張りました。

ただ、リストを動かす動作は実装しないことに決めていました。それをやり出すとただでさえ長期化していた制作期間がさらに延長モードに突入することは目に見えて分かっておりましたので。

実際、フリーバトルモードの方に転用した際には、リストを動かすのではなく、ページ切り替え（←→）という形で100人以上におよぶ敵の選択を実現させました。

フリーバトルモード

フリーバトルモードはこれまでに培った知識を総動員しました。

黒背景の生成、ウインドウの生成、リストの生成、カーソルの生成、画像の表示。

そこに加えて、操作をしたときに現在カーソル位置と移動後のカーソル位置によって、文章を更新したり、画像を更新したり、カーソル位置を大きく動かしたり、形を変えたり、画像の点滅停止と新規点滅したり、連動して別の項目の色も変えたりと……結果的に想定どおりの挙動にはなったものの、私が作ったUIの中では一番複雑でした。

あとはここで設定した情報を敵グループに反映して、増援などを含めて適切な動作をするようなプログラムも用意しました。

そういったさまざまなプログラムを作らなければならなかったため、作業量はこれが一番多かったと思います。作業に要した明確な日数は覚えていませんが、おそらく６日間ぐらいかかったのではないでしょうか？

総括

そんな感じでUIを作るのはとても大変というお話しでした。

おそらくゲームを作ったことのない方には「こいつが何言ってるのかさっぱり分からん……」といった具合だと思いますが、みなさまが快適にゲームを遊べているということは、それだけUIがしっかりしているということなんだとご理解いただければゲームクリエイターの方々も少しは報われるのではないでしょうか。

私も少し前に酷いUIのゲームを遊んだことがあるので分かりますが、UIはゲームを快適にも不便にもする要素なので、これを疎かにするわけにはいかないなあと改めて認識させられました。

総括：UIを作るのは難しいけど、だからと言って無碍にしてもいけない。

配信開始まであと６時間！

こんなに長い記事をお読みいただきありがとうございました

「ラスト・メイル」配信開始まで あと６時間！

全裸待機……は寒いのでやめておきましょう。