今回は複数のゲージが重なったような見た目を作ります。
77. はよく見かけるやつなので、ゲージの仕様については特に書かなくても大丈夫でしょう。アクションゲームとかでダメージ量がわかりやすいので採用率高いですね。
78. は 77. の応用として色数を増やしたやつ。79. はアプローチを変えてみたやつです。
シェーダーとしては Stepノードで長さを調整して Lerpノードで左右に振り分ける、というのを基本に構成します。
77. 遅れて減るやつ
リアルタイムに反映されるゲージ本体と、遅れてゲージ本体に追いつこうとするもう１本のゲージ。ゲージの長さを操作するパラメータの数は２つ。遅れて減る方のパラメータは何らかの動きをさせることになります。その動きはシェーダーではなくBPから操作することになります。
シンプルな普通のゲージを２本重ねても同じ表現は可能です。メリットがあるとしたら、パーツが１つにまとまっているので描画のリクエストが減るあたりでしょうか。あと半透明を重ねた時の計算量も減ります。
1つ目の Stepノードでゲージ本体と遅れて減るゲージに分けます。
それを Lerpノードで着色。
2つ目の Stepノードで、２本合わせたゲージと背景を分けます。
それを Lerpノードで着色します。
2つ目の Stepノードを遅れて動かす表現が可能です。
カラーをVectorパラメータにしておけば色を遷移させる方法もあります。
一応 Widgetブループリントのサンプルを載せておきます。
ゲージのマテリアルは先に Dynamic Material Instance にしておきます。
変数はFloat型で、ゲージ本体と遅れて減るゲージのために ２つを用意。
満タンの状態で初期化しておきます。
ここまでを準備したら、あとはイベントを用意するだけ。
まずダメージを受けたら、イベント（下図はBP Interfaceを経由しています）を呼び出します。引数にゲージの長さをもらうようにしています。
上の図はサンプルなんでランダムな数値を使ってます。
即座にゲージの長さを反映。
このイベントはアニメーションはないので、シンプルに値を受け取って反映するだけとなります。2つある変数のうちの1つが減って差分が発生。
Delay ノードで 0.5秒後に アニメーションさせるイベントを呼びます。
SetTimerByEvent ノードでもOKです。
長さを変えるタイプ ↓
カラーを変えるタイプ ↓
通常のブループリントにも Lerp（線形補間） が用意されているのでこれでカラーを遷移させています。
シェーダー（マテリアル）自体のしくみは簡単なので、カラーをテクスチャに変えてみるとか、アレンジを楽しんでみてください。
78. 色数を増やしてみる
77. の仕組みを応用して色を増やしてみました。
とりあえず5色。ゲージ全体の長さは固定。ゲージというより棒グラフですね。
パラメータは4つ
Step ＆ Lerpノード のコンビネーションを使って連鎖するようにつなぎます。
キャラクターの能力値や武器、防具などの性能バランスなんかを比較するのに使えそうです。
79. Lerpを使わない多色ゲージ
Lerpノードを使わずに作る多色ゲージ。
さらにカラーはテクスチャで管理します。
使用したテクスチャはこれ 
← 32 x 4px
↓４倍に拡大
圧縮対策でノイズが入らないように カラーチップひとつが 4x4 です。
インポートの設定は Filter を Nearest にして 滲まないようにします。
8色あるので Vectorパラメータを 2つ使用しました。
Vectorパラメータは、4つのFloatがひとつにまとまっているので、
そのひとつひとつを Step ノードで 0 と 1 に分けたら素直にすべて加算します。上の図では最後の値はゲージの長さに使用しています。
足すと、0～7.0 になります。それを 8（色数） で割ることで、0～1.0 の範囲に収めることができます。
このグラデーションを テクスチャのUVにすることで着色することが可能です。
カラーが微妙にずれることがあれば、U値に +0.0625 (2÷8) すると安定すると思います。U の値が 0 から始まり 0.125ずつの段階で増えていて、カラーとカラーの境界に近いところをサンプリングしているためです。
この記事を公開してから動くサンプルを作ってみたので追記
多色ゲージを動かしてみた pic.twitter.com/OGcCVCtWcS
— みつまめ杏仁 (@MMAn_nin) 2025年4月27日
今回は以上の3本です。
作りやすさとか調整、メンテナンスのしやすさなどを考慮しながら、ベストな構成を探っていけたらいいと思います。スピードなのか、正確さなのか、開発時期によって求められるものが変わります。いったん作りやすいので実装しておいてあとから精度の高いやつに差し替えたり、パラメータで調整しまくってから計算式をスマートにしたりと、結果が同じであれば、途中を差し替えても問題はないので、コスパのいい方法を探して、そっと入れ替えられるくらいのスキルを身に着けたいものですね。
ではでは
素敵なゲージライフを！
