はじめに
よく見る円形ゲージ、UE4だと簡単なマテリアルで作れてしまうのです。
円形ゲージの実装方法
鍵を握るのは、VectorToRadialValueノード
Unreal Engine のMath マテリアル関数 | Unreal Engine 5.4 ドキュメンテーション | Epic Developer Community
この関数は Vector2 のベクターを角度に変換、または UV 座標データをラジアル座標へ変換します。このベクターの場合、角度は一つのチャンネルに出力されて、ベクターの長さは別のチャンネルに出力されます。
難しいことはさておき、こんな感じのグラデーションを作ってくれます
真ん中の出力結果を見て下さい。円形ゲージにピッタリだと思いませんか？
この真ん中のグラデーションと、ValueStepノードを使って、
マスク画像を作成します
どうしてこういう結果になるか、少しだけ解説
ValueStepノードは以下の機能を持っています。
Unreal Engine のグラディエント（勾配） マテリアル関数 | Unreal Engine 5.4 ドキュメンテーション | Epic Developer Community
ValueStep 関数は既存のテクスチャ チャンネルまたはグラディエントを受け取り、ユーザーからの入力に基づいて純粋な白黒画像を出力します。結果は、グラディエントのどの部分が入力値に匹敵するかを示すマスクとなります。
さらに突っ込んだ解説をすると、
Gradientピンに渡した値とMaskOffsetValueの合計値が
NumberBeforeWhiteResultの値よりも大きい場合は1、小さい場合は0を
返してくれます。
VectorToRadialValueで作ったグラデーションの範囲は0～1、
NumberBeforeWhiteResultの初期値は2です。
なので、MaskOffsetValueに渡すパラメータを変えることで、
こんな感じにマスク画像を調整できます
youtu.be
あとは、マスク画像と円形ゲージ用のテクスチャを
以下のように組み合わせることで、記事先頭のようなマテリアルを作ることができます
実際にゲーム内で使用する時は、BPからマテリアルに
パラメータを渡すことになると思います
その辺りはもんしょさんの記事が参考になると重います
http://monsho.blog63.fc2.com/blog-entry-129.html
おまけ
Timeとsincosを使うと、少し見た目が面白くなるの法則
www.youtube.com
