[第13回UE4ぷちコン]振り返り:UI関連
概要
・Widgetの階層構造でTwitter風に
・無用になったスライダーを進捗表示に流用
・指示構造を単純化してみたが長短ありそう
やった事
ゲーム中では下図の様なUIが出る。
・上部のスライダー
・右部のTwitter風のUI
・左下の案内キャラ(とフキダシ)
で構成されている。
階層構造
全体の構造は下図のようになっている。
ボタンやスライダーの入力に対する応答を直接は親Widgetに通知せず、
いきなりBlueprint InterfaceでGameModeに投げるようにした。
Event DispatcherでBubbling的に応答していく実装も考えたが
なにしろ階層が深くてGameModeにたどり着くまでが面倒くさそうなので
今回はこのようにした。
図中にも書いているが、これは長短あると感じる。
Twitter風UI
Webソースを読む力は無いので、
Twitter公式Webを見つつ雰囲気で目コピした。
下図はツイート1つを表現するWidget Blueprintの構成。
みつまめ杏仁先生のBlogを読み返し、
自分が利用できそうなパーツを使って
Widget全体の大きさを変えても破綻しない構造にした(かった)。
スライダー
最初は、推理の補助としてタイムラインを直接操作できた方がいいだろうと思ってつけたものだった。
このツイートの時点で実装している。
しかし、最終的には
ひたすらTwitter部分と向き合っていれば
特にスライダーをいじる必要が無いゲームになっていた。
企画で迷走した名残ともいえる。
特にいじれる分には害はないのでそのままにしていたが、
ゲームの進捗表示の為に流用できそうだと考えた。
スライダーWidgetの”Bar Thickness”パラメータを0.0にして消し、
代わりに行動推定が必要な回数分のImageを動的に配置することで、
推理が進むごとに色を塗っていけるようにしている。
申し訳程度の確定演出にも使った。
全行動の確定後、一気に行動を振り返っていく際に
「こんだけの偉業を重ねましたぜ」みたいな実感を出したかったので
最初はプレイヤーの手でスライダーを動かしてもらう実装にした。
やってみると、確かに手ごたえもあるが
「いやーお疲れ様でした！
ささ、ここで自動的にスライダーが0に戻りますので、
どうかご自身の手で右いっぱいまで動かして
にっくき犯人を追い詰めちゃって下さぁい！」
という説明が難しい。
結局、自動で送ってしまう事にした。
ドラムロールで盛り上げたので
その後の処刑演出にもごく自然に繋がったと思う(追い詰められた人間が陥りがちな自己完結)。
案内キャラ
デモで一応の説明をしたつもりだが、
やはり意味が分からないゲームなので
直接的にやる事を提示する為に入れた。
というのは半分本当で、
もう半分は、処刑演出の「ボス自身が弾丸になる」のを思いついた際に
「じゃあ伏線として最初から左下にいた方がいいな」と思ったからである。
締め切り間際での追加作業だったが、
命令構造が明確だったので改造ポイントが見えやすかったのと、
既存の流れ（タグ検索時に反応する等）に便乗しやすかったという点で
あまりバグらせず追加することができた。
反省
指示構造について
Blueprint Interfaceを使った単純化は
日を置いてもUIの構造を脳内に再展開しやすくなり、
個人製作的には良い方に働いたと思う。
だが大規模なゲームでこれをやるとすげえ困りそうな気もする。
いきなりGameModeに投げるのではなく、
適当な中継役をGet All Actors with Interfaceで探しておいて投げるといいのかもしれない。
参考:
Panel系Widgetの利用について
今まではCanvas Panelばかり使っていて、
Widgetの大きさも決め打ちな物ばかり作っていた。
今回はVertical Box等のコンテナ系Widgetを積極的に使ってみたが、
サイズ変更時に子要素を上手いこと追従させる構造を作るのに時間がかかってしまった。
しかも、最終的には
最初に決め打ちした大きさから調整することもなかった(調整する時間が無かった)
というオチもついてきた。
だが、今回の経験がきっと生きる事があるはず…
UE4ぷちコンは学習用コンテストです(露骨なゴマすり)。
装飾的な部分について
いかにも「エンジニアが仮で入れたやつ」的な見た目になっているが
実際その通りであり、ぐうの音も出ない。
ノンデザイナーズデザインブックはざっくり目を通したが
なかなか実戦を重ねないと身につかないなと感じた。
以上