最近はゲージを作るときにシェーダーを使う機会が増えました。表現の幅が広がって柔軟な調整ができるのが魅力です。ゲージはわかりやすさが大事ですが見た目が独創的であることもまたタイトルのユニークさをアピールできるパーツとして大事です。
デザインはキャラクターに寄せるか、逆にキャラに依存しない方がいい、などと悩みながらデザインしていきます。デザインが出来上がったら次はゲームの仕様に合わせて状況に応じた変化をデザインします。空っぽ、満タン、バフ、デバフ、タイマーなどデザインに乗せるか、別途用意するか、エフェクトは、とか、とにかくゲージの数だけ表現方法、実装方法があります。
そんな多彩なゲージを作るためには画像＝テクスチャを使うことになります。
テクスチャを使ったゲージを実装するときに悩ましいのが、たいてい上限と下限に「遊び」というか余白というかラグが生じます。UVで切り出す際、テクスチャの一部分を使うことが多く、また端をアルファチャンネルで削っているのが主な原因。
たとえばこんなテクスチャ
下図はアルファチャンネルの一部を拡大
バイリニアフィルタや表示位置によるピクセルの滲み（漏れ）を防ぐために、保険の意味合いでアルファを最低１px以上は空けておくのが普通。また、ピクセルのブロック圧縮形式のダメージを減らす目的で4の倍数（BCx系フォーマットで採用されているブロックサイズの標準が 4x4 なので）で領域を確保したり、UVの計算で割り切れるようにすると、自然と余白ができてきます。
将来的なデザインのブラッシュアップを考慮すると多少の余裕はあって困るものでもないかと思います。ただ描画面積が処理負荷を上げてしまうので、ご利用は計画的にというしかないのですが・・・
とにかく端いっぱいまでピクセルを使うのは、リスクがメリットを上回るのでおすすめしません。将来的にもっとナイスな圧縮アルゴリズムが出てきたら変わるかもしれません。
ところで、Photoshopでも小数点の位置を許容していますよね。
ピクセルグリッドにスナップ して用心して作っていても、ゲーム画面に描画される際に小数で扱われてしまうので、油断ならないのです。
話が逸れましたが、まぁ「スキマはできるもの」として考えておけば、手間は増えても心配は減るということで、普段自分がやっている調整用のしくみを紹介することにしました。
かなりニッチな内容です。ぶっちゃけ需要があるかどうかも怪しいですが、ゲージを作るところから書いていきますが、理屈の説明を多めで細かい操作方法は省いています。
まずはゲージの範囲について
ゲージには、空の状態と、満タンの状態が確実にあります。長さも絶対的なものではないので、視覚的にはだいたいの割合で視認します。あとちょっととか、半分くらいとか。
そのようなアバウトな感覚はパーセントで書く場合 0％ ～ 100％ の範囲で書くことになります。それを倍率計算に使う数値にすると、0 ～ 1.0 になります。
テクスチャのUV座標は、テクスチャの端から端までが 0 ～ 1.0 です。
そのままフルで使えたらラクなのですが、先に書いたように数ピクセルのスキマが存在します。そこを使わないようにしないと、満タンな見た目なのに、数値的には満タンじゃないという状況があり得てしまいます。
このギャップを吸収する必要があります。
それにはLerp（LineaInterpolate）ノードが便利です。
ゲームのロジックとしては数値は 0 ～ 1.0 で管理したいものです。ところがゲージはプレイヤーが直接目にする部分でデザインが重要。テクスチャの見た目に依存します。
今回はデザインの調整範囲がシンプルになるようにマテリアル内でギャップを吸収するかたちで進めます。
マテリアルには 0 ～ 1.0で値が渡されてくることになります。下図Scalarパラメータノード。
それを Alpha につないで、ゲージの端それぞれを A と B につなぐとこうなります。
A と B が 中途半端な値でもそれが両端の値になります。
上限と下限の値を自由に決められるということです。
テクスチャをインポートした後に、絵を見ながらこの上限と下限を調整すればいいのです。
とはいえゲージ
これをゲージとして機能させていきます。
まずゲージ部分の基本形
Lerpノードには外から変更する想定でScalarパラメータをつなぎました。
ゲージの増減方向によっては、Lerp の A と B は逆になることがあります。
名前は誤解されなければなんでもいいです。
RangeMin ・・・ ゲージのピクセル下限
RangeMax ・・・ ゲージのピクセル上限
GaugeValue ・・・ ゲージの値（しきい値）
画像を使ったテクスチャは、ほぼこれでカバーできると思います。
ComponentMaskノードで
Ｒ のみを有効にすると 横方向のゲージ、
Ｇ のみを有効にすると 縦方向のゲージが作れます。
Stepノードで、0 と 1 の 2階調にしてます。
この２つの値をもとに、見た目を切り替えるようにつなぐとゲージが出来上がります。
ゲージの増減が下から上に向かって増えていくようにしたかったので、RangeMin と RangeMax を差し替えました。
0 と 1 で途中の段階はないですが Lerpノードで２種類の色をスイッチします。
マテリアルインスタンスを作って、テクスチャをセット
GaugeValueを動かすと
今回ゲージの背景を作ったのでそれを適用するようにしてみます
背景用のカラーをつないでいたところに別のテクスチャをつなぐイメージ。
今回同じテクスチャで、一定量ずらしただけなのでVectorパラメータで設定できるようにして下図のようになりました。
マテリアルインスタンスでずらす量をセット
動かしてみるとこうなります。
ここまでは普通にゲージを作る方法。
ここらはゲージの上限と下限を調整する方法。
まず調整する際に、マテリアル編集を気軽にできるかどうかで２つのケースを考えてみました。
※アンリアルエンジンでは「シェーダー」という表記をほぼ目にしない気がしているのですが、とりあえず当記事では「シェーダー」と書かずに「マテリアル」と表記していきます。
「編集はあんまり気軽じゃないぜ」というケース
すでにややこしいノードが組まれている、または組む想定で、触るのがリスクになったり、人が作ったマテリアルだからよくわからん、とか、そもそもマテリアルがよくわからんなどなど、であれば、調整用のパーツとゲージを別々に扱うのをお勧めします。
このケースではゲージ本体と同じ大きさのパーツを重ねるだけなので、お互い干渉しないつくりにできます。仕上げにパラメータの移植が必要になります。
「気軽に編集できちゃうぜ」というケース
経験上 ゲージはユニークで一点ものが多く、ゲージごとに調整する機会が多い印象。仕様に合わせてマテリアルも試行錯誤するので、そこにちょこっと調整用のノードを仕込んで一時的にパラメータを決めてしまおうというつくり。調整用のノードを外してもパラメータ自体はそのまま利用できるのが利点。
範囲を視覚化する
原理はシンプルで、上限と下限の値をStepノードで２階調に分け合算するだけ。
ComponentMask を R にすると、横方向にできます。
ノードのプレビュー用サムネイルでは赤と黒になっていますが、実際には Scalar（=Float=Vector1）型になっていて色という概念はありません。
ややこしい話ですが、ComponentMaskで R 以外をマスク、G 以外をマスクしたからといって、赤や緑色の情報が選別されて流れているわけではありません。Vector4（=Float4）の情報から１つだけを抽出してみてもただひとつの値があるだけです。そのひとつの値を視覚化する際にRGBA の 4つのチャンネルのうち 先頭の R から使われるので、赤色になると理解するといいと思います。
「編集はあんまり気軽じゃないぜ」という場合はこれを新しいマテリアルにします。
以降はこれのインスタンスを作ってそこでパラメータの調整を行います。
このコンテンツブラウザから上記マテリアルで右クリックするとインスタンスが作れます。
できたマテリアルインスタンスをUMGに持っていって調整します。
マテリアルインスタンスをセットしたImageを後ろに置きます。
サイズ同じにして位置を合わせたら、マテリアルインスタンスを編集して
保存すると反映されます。
あとはこのマテリアルインスタンスのパラメータをゲージ本体のマテリアルに移植（コピペ）すれば調整完了。この下に置いた調整用のImageを削除してお片付け終了。
「気軽に編集できちゃうぜ」という場合は、調整用のマテリアルではなく、マテリアルファンクションにして持っていれば、ゲージを作るときにあちこちで再利用できて便利。この方法の利点は何といっても調整のしやすさ。
下図のようにカタチでマテリアルファンクションにします。
カラーは中に固定色として置いてしまってますが、お好みのカラーでOK。
都度変えたいのであれば、カラーも入力できるようにするといいですね。
このマテリアルファンクションをバイパスする感じでつなぎます。
ゲージの周囲にあるアルファで透明になる部分を利用しています。
マテリアルファンクションの右にあるName ノードは方向を確認しているだけなので実際は不要。
マテリアルインスタンスで確認するとこのようになります。
プレビューを見ながらいい感じになるようにパラメータを調整します。
リアルタイムに触れるこの方法は調整がしやすいのがウリ。
調整が済んだら、マテリアルを編集してバイパスした部分をお片付けします。
マテリアルのScalarパラメータにスライダーの設定があるので利用するとマウスでぎゅんぎゅん出来るのでオススメ。
Slider Max の初期値が 0.0 になっているとどこまでも数値が増やせてしまってマウスでぎゅんぎゅんできないので、1.0 にするのがポイント。
いかがでしたか？
これでどんなデザインのゲージでも大体なんとかなると思います。
何とかならないのは、増減が直線じゃないタイプ。とはいえ、テクスチャに合わせるなら、考え方は同じで、結局始まりと終わりで細かい調整が必要になります。
「あとちょっと！」 のあたりは実際に遊んでみてどれだけ視界に入るか、気にする必要はあるか、別のアピール表現と合わせてみようか、などなど試行錯誤しながら仕上げていきます。ゲージはゲームの進行に緩急をつけ、プレイヤーの心理状況にも作用する、とても重要な役割を担っています。なので、たかがゲージされどゲージ、世界に二つとない、万人に愛されるゲージを求めて切磋琢磨し、ゲージ道を究めんとするのが、UIデザイナーだと信じてやまない今日この頃、みなさまいかがお過ごしでしょうか？
ではでは今回はこの辺で
素敵なゲージライフを！
