私のUIレイアウトを紹介します。HUDレイアウトではなく各種ツールのオーバーレイの配置も含めた総合的なUIについて紹介してる人はそんなに多くないと思ったので。
オーバーレイ表示については
- 情報をコンパクトにまとめること
- 必要ない情報は極力カットすること
- 視界の邪魔にならないよう配置すること
を意識してみたつもりです。
スクリーンショットを見てもらえれば分かると思うんですが、ゲーム画面はいわゆるウルトラワイドモニターをフルに使っています。画面解像度は3440x1440です。このぐらいの縦横比がないとこれだけの情報量を出せません。ゴチャゴチャしすぎて大変つらい感じになります。情報量自体を減らすか、サイズを小さくするなど工夫が必要です。画面のほとんどがオーバーレイに埋め尽くされている人のスクリーンショットを見ると「よくそんな画面でプレイできるなあ」と思っちゃったりします。
ふつうのHUDレイアウト
ACTによるオーバーレイがない状態だとこんな感じです。
各種アイコンやウインドウ、ホットバーなどのパーツについてはMaterial UIのBLACKテーマ＋いくつかのOptionを使用しています。
情報を画面中央から右寄りに集中させているので、戦闘中は基本的に画面のやや右寄りに視点を置いている時間が長いです。
あとはマウスカーソルを見失うことがたまにあるので Yolomouse を使ってカーソルのスタイルをオーバーライドしています。
オーバーレイのレイアウト
こんな感じです。見ての通りエデン覚醒編零式2層の開幕です。録画データから拾ってきたのでチャットマスク画像なんかが掛かっている上に画質もちょっと荒いです。
戦闘に有益な情報は表示しつつ、しかし戦闘の邪魔にはならないように意識しています。ACTWebSocketのオーバーレイ以外はクリックスルーです。
説明
各オーバーレイの用途を書き加えるとだいたいこんな感じです。
- DPSメーター部分にはACTWebSocketとmopimopi2を使用
- 敵視メーターはウルスカのEnmityでカスタム
- スペスペたいむのレイアウトや背景もちょっとだけカスタム
- 対象との距離やHPバー、対象のターゲットHPなんかはウルスカの標準そのまま
- 各種スペルパネルについては割愛
少しだけ着目して欲しいことがあるとすれば画面中央の ＋ マーカーでしょうか。
これはウルスカのMy Markerという機能で実現しています。「自分のキャラクターの当たり判定があるであろう場所に任意の記号をオーバーレイ表示し続ける」というだけのとてもシンプルな機能です。自分のキャラクターが常に画面中央に配置されることを利用して、当たり判定のある足元あたりに置いておきます。ゲーミングモニターとかが備えるFPS用のドットサイト機能みたいなもんです。
これは例がイマイチなんですが、こんな感じでエフェクトがどれだけゴチャゴチャしても他のキャラクターが重なっても自分のいる場所を見失わないので、地味だけど結構使える機能です。
以上、そんじゃーまた。