読者です 読者をやめる 読者になる 読者になる

ぼっちプログラマのメモ

UE4とかVRとかについて書いたり書かなかったり。

UE4小ネタ : 円形ゲージの作り方

はじめに

f:id:pafuhana1213:20150831213049j:plain
よく見る円形ゲージ、UE4だと簡単なマテリアルで作れてしまうのです。

円形ゲージの実装方法

鍵を握るのは、VectorToRadialValueノード
数学 | Unreal Engine

この関数は Vector2 のベクターを角度に変換、または UV 座標データをラジアル座標へ変換します。このベクターの場合、角度は一つのチャンネルに出力されて、ベクターの長さは別のチャンネルに出力されます。

難しいことはさておき、こんな感じのグラデーションを作ってくれます
真ん中の出力結果を見て下さい。円形ゲージにピッタリだと思いませんか?
f:id:pafuhana1213:20150831213415j:plain

この真ん中のグラデーションと、ValueStepノードを使って、
マスク画像を作成します
f:id:pafuhana1213:20150831214105j:plain

どうしてこういう結果になるか、少しだけ解説

ValueStepノードは以下の機能を持っています。
グラディエント(勾配) | Unreal Engine

ValueStep 関数は既存のテクスチャ チャンネルまたはグラディエントを受け取り、ユーザーからの入力に基づいて純粋な白黒画像を出力します。結果は、グラディエントのどの部分が入力値に匹敵するかを示すマスクとなります。

さらに突っ込んだ解説をすると、
Gradientピンに渡した値とMaskOffsetValueの合計値が
NumberBeforeWhiteResultの値よりも大きい場合は1、小さい場合は0を
返してくれます。

VectorToRadialValueで作ったグラデーションの範囲は0~1、
NumberBeforeWhiteResultの初期値は2です。
なので、MaskOffsetValueに渡すパラメータを変えることで、
こんな感じにマスク画像を調整できますyoutu.be

あとは、マスク画像と円形ゲージ用のテクスチャを
以下のように組み合わせることで、記事先頭のようなマテリアルを作ることができます
f:id:pafuhana1213:20150831215759j:plain


実際にゲーム内で使用する時は、BPからマテリアルに
パラメータを渡すことになると思います
その辺りはもんしょさんの記事が参考になると重います
もんしょの巣穴blog [UE4] Dynamic Material Instanceを使う

おまけ

Timeとsincosを使うと、少し見た目が面白くなるの法則www.youtube.com