最近Twitterにあげたやつ
stepノード触った記念に、ポストプロセスマテリアルでSceneDepthに使ってみた。なんか無理やりだけど。 pic.twitter.com/gyVW6KcMrH
— みつまめ杏仁 (@MMAn_nin) 2021年1月25日
動きは上のツイートから確認できます。
UE4がゲーム画面を描画するとき、いろんな計算用のバッファを使っています。その一つが SceneDepth です。
ワールドに置かれたオブジェクトのカメラからの距離を保持しているバッファです。
それに対して、step ノードを使って遊んでみました。
ポストプロセスマテリアルを用意。
まず普通にマテリアルを作って、ドメインを変更する。
あとはノードをつなぎます。
↑左下のノードは、別途用意しておいたマテリアルパラメータコレクションからScalarParameterを一つ。
今回ブループリントからこのマテリアルに干渉する方法として採用。
SceneDepthの値は、確認用（Buffer Visualization）だとグレースケールな見た目に変換されて表示されていますが、実際にはずっと大きな値になっています。
なので適当な距離をパラメータに掛け算（Multiplyノードの x4000）しています。
つなぎ方は変わりますが公式同様に割り算でも同じ結果にできます。
できたポストプロセスマテリアルを、使用しているポストプロセスに登録します。
テンプレートだと、World Outliner に存在してるので選択。
Details タブの Renderring Features > Post Process Materials の項目から追加します。
複数のマテリアルがセットできるようになっているので、プラスボタンを押してフォームを出せば追加できます。
今回テストとして、レベルブループリントに以下のノードを追加。
ゲームパッドの Face Button は、コントローラ右半分に並ぶ ABXYボタンのこと。
Left なので、Xボタン。ゲームパッドを使わない場合は適当なキーの Inputノードに差し替えを。
便利なタイムラインノードの中身はこんな感じ。
調整しやすいように 0 ～ 1.0 でカーブを作っています。
これで できあがりです。
マテリアルでの計算で描画負荷が気になるようだったら、先にブループリントで計算してパラメータを更新するようにするといいかも。（マテリアルの掛け算はやめる）
このグラフで Depthに合わせた値にしてもいいし、ゲームによっては範囲を可変にしたりとか。
グレーマンを操作しながら好きなタイミングで発動できるので面白いです。
何かのスキル効果でゾーンに入った表現とかスキャン表現とかに使えそう。
表現方法をアレンジすると楽しくなりそうです。
グレーマンではなくカメラからの距離なので、三人称視点よりは 、一人称視点の方が違和感は無いかな。
最近ちょっと気になるUI
原神のUIで気になったやつ。普段ゲームパッドでプレイさせてもらっています。
フィールドに数か所、七天神像 という 回復拠点が設置されているんだけど、主人公以外のパーティメンバーは回復しかできないので、メニュー項目は基本↓この形。
カーソルの初期位置は一番上『神像に奉納する』です。
上から２番目の項目『神像の恵み』を選ぶことでパーティメンバーの HPを回復することができます。
１番目の項目は、すでに最大まで奉納し終えたので、選択することはありません。
また、キャンセルボタンが無いので、『離れる』を選択しないとこのモーダルな状態から抜けることができない仕様です。
神像には 風神 と 岩神 の2種類が存在します。
肝心の主人公は、この世界の住人ではないので、特別にこの神像の持つ属性にスキルチェンジすることができます。
今のところ属性は 「風元素」と「岩元素」の２種類で、それぞれ「共鳴する」という風に表現されます。
プレイヤーが主人公を操作してこの神像に接触すると、メニュー項目が増えます。
２番目に挿入されるのです。
もう一つややこしくなっている原因として、同じ属性の神像に接触すると、「～と共鳴する」という項目は現れません。パーティメンバーと同じ見た目になります。
つまり、チェンジが可能かどうかを判定して選択項目を増やしているのです。
いまだに、意図せず属性を変更してしまいます。ある意味トラップ的配置。
選択項目が表示されない理由が２つ
- 主人公の属性が神像と同じなので、共鳴できない
- 主人公以外だから共鳴できない
このため、思いのほかチェンジ可能な機会が少なくなり、回復を選択することに慣れてしまうのが要因だと思う。
ぼくがゲームのUIを設計するとに気を付けていることは、
- 選択項目の数や位置（または順番）はよほどのことがない限り変更しない
- 選択する頻度が高くローリスクなものほど、初期カーソル位置の近くにおく
- 選択することで何らかのモードが変更される場合は初期カーソル位置から離す
- 選択できない状態のものは、非表示ではなくDisable状態の見た目にする
- このDisable状態の見た目でも、カーソルはスキップしない
- リスクの大きな選択肢は端において目立たせる
とりあえず今回の事例に関するところでは上記くらい。
試しに Disable状態を入れるならこんな感じかな。
「共鳴」そのものが主人公しかできないので、そこの納得度を上げるなら、主人公とわかる何かを入れてみるとか。
「神像の恵み」がカーソルの初期位置だと嬉しい。
ちなみに「神像に奉納する」はMAXに到達してしまうと、選択肢としては不要になります。
これでかなり快適になるはず。
最初は慎重にテキストを読みながら選択項目を選びますが、そのうち、よく使う選択項目は、場所で記憶するようになります。ボタンを押す回数なんかで覚えていたりします。体で覚えるってやつです。特にリスクが低く、ポジティブな要素を選択する場合は特にこの傾向が強くなります。連打癖が付きやすいのも重要なポイント。
ゲームのUIは 呼吸をするように無意識でも操作できるように設計するのが理想的です。できるだけ安い学習コストで慣れてもらう。一度慣れたら操作に迷うことなく選択できるのが良いUIだと考えています。
とにかく デフォルト状態とイレギュラーな状態 が存在する場合、プレイヤーがどういった状況で認識するかによっては、ミスリードになりうるということを意識してUIを設計するように心がけています。
また、プレイが進んで、選択頻度に差が出る可能性のあるものや、特定の条件で追加されたり選択不可という状況の有無が判明していれば、開発段階でしっかり検討しておきたいものです。選択項目は並べ方にも開発の意図や姿勢が表れてしまいます。
原神はクロスプレイ対応なので、入力デバイス対応が相当大変だと思います。ぼくもワンタイトルで、ゲームパッド（複数）、タッチ、マウス＆キーボードというマルチデバイス対応をやったことがあるので、大変さはよくわかります。そういう時はゲームパッド操作を基本に画面を設計するのをオススメします。マウスやタッチ操作にはカーソルポジションという縛りがないので、情報距離と操作回数の関係性をゲームパッドほど気にしなくても良いからです。
デザインはキレイだし楽しくプレイさせてもらっています。そのうちアプデが来て、イイ感じの 表示と操作感 になるかもしれません。その時は開発者がUIに対してそれなりの知見を得たということなのでしょうね。その瞬間を見届けられるくらいまではプレイし続けたいとは思います。
最後にちょっとした寓話
いつも多くのお客で賑わうラーメン屋さんがありました。
そして冷やし中華がメニューに加わる季節になります。
店主はあまり売れない自慢の冷やし中華を食べてほしくて、券売機の左上のボタンに冷やし中華を登録しました。人は左上に最初に目が行きやすいのをWebか何かの本で知ったからです。
すると定番のラーメンしか食べない常連客から間違えて押したと不満の声が・・・
またいずれ冷やし中華の季節も終わります。
店主はいつもの配列に戻しました。
次の夏、冷やし中華のボタンを空いているボタンに登録して、「店長のオススメ！」という小さなラベルを貼ることにしました。
おしまい
← CanvasPanelに余白
← Paddingで余白
