続きです
ここまで基礎的な仕組みを押さえるために一気に書いてきたけど、この辺からペースを変えてやっていこうと思います。
過去記事
今回は波紋のようなレーダーのようなエフェクトをゲージ載せてみます。
ローディング時とかなにか処理中の時に使えるかと思います。
37. 波エフェクト付き
前回の 33.～37. と変わりませんが、エフェクトぽく見せるタイプになります。
まずエフェクト用のテクスチャを用意します。
縦は引き延ばすのでぎりぎりまで細くしています。
このテクスチャを Panner でループさせて、ゲージ本体のカラーとブレンドします。
TexCoordノードでタイリングすることもできます。↓ UTiling を 4.0 にした例
ゲージのカラーは目立ちすぎない程度に目立たす必要があるために加算 Add ノードがおすすめ。Photoshop のレイヤーブレンド：覆い焼（リニア）と同じ効果です。
ついでに Multiply や Subtract などに変えてみてどんな色味になるか試すのもいいですね。
シェーダーの学習であればここで完成～ としてもいいのですが、もう少し遊んでおきましょう。
このエフェクトを常時表示せずに、ゲージに変化があったときにだけフラッシュ的に動かすようにすると、視線誘導にもなり、ただの雰囲気ものではなく意味を持った演出にすることができます。
出来上がるのはこんな感じ。
何かエナジー的なアイテムを拾ったりとか、何か撃破してポイントをゲットしたり、ゲージが増加するときに光が走るので、ゲージの変化に気づきやすくなります。
光りの色と方向で印象は変わるのでいろいろ試すと面白いです。
テクスチャをインポートしたときにタイリング設定を触ってないので、デフォルトで Wrap になっています。
Panner で動かすと常時ループしているので ↓ こうなります。
今回使用しているグラデーションは以下のようになっています。
中央から左半分は完全な黒 (0, 0, 0) です。色のない部分は全体の50％。
グラデーションの部分をいい感じに切り出して使いたいのですが、開始位置と終了位置を指定して使うには、Panner は向いていません。
さらに、タイリングするとグラデーションを完全に消えるように見せるのは無理があるのでタイリング設定を変更して Clamp にします。
Clamp はテクスチャの外のピクセルをサンプリングするときに、繰り返さず、一番端ののピクセルカラーで埋めるというものです。
この特性を利用して、UV座標を 1.0 から -0.5 に向けて遷移するように動かします。
-0.5 というのは、今回のテクスチャで真っ黒になる領域が50％の位置で、 UV の U を -0.5 の位置にするとグラデーションが見た目に消えます。グラデーションの量で調整します。Add でブレンドしていると加算するので、グラデーションが残っているとゲージが明るくなります。
UVを移動させる操作は、次回のゲージで解説する予定ですが、先取りでいきます。
移動する量というか、どこからどこまで、というのはグラデーションテクスチャを作った人間が責任を持って管理するというのがベスト。ということで、Pannerノードを外して、Lerp ノードを利用します。
OffsetU は、ScalarParameterノードです。このパラメータには 0 ～ 1.0 を入れて扱います。
Larpノードの A と B には、UV移動の開始位置と終了位置を入力します。
グラデーションの配分をいじったら、ここを触るだけです。
例えば用意したグラデーションの完全に黒になる場所が30％の位置だったら、
1.0 ～ -0.7 まで移動すると完全に消えることになります。
パラメータ OffsetU の変化はあくまでも一貫して 0 ～ 1.0 のままで問題なし。
最終的に UMGからこのパラメータをいじるのですが、ブループリント側はグラデーションの状態には影響されないので、一度だけ 0 ～ 1.0 のアニメーションを作ればいいだけなので、調整が捗ります。
これでマテリアルの編集は終わり。
一応テストするためのWidgetブループリントも載せておきます。
UMGのキャンバスに、適当な Image を置いて、マテリアルをセット。
タイムラインで、マテリアルに作っておいた ScalarParameter の OffsetU に対して AddKey します。
値の範囲は 1.0 → 0 に遷移。今回は 0がデフォルト位置で、終了位置でもあります。
逆方向に動かしたい場合は、 0 → 1.0 にしてもいいし、マテリアルの Lerp ノードのABを逆転させるのもアリ。
次にブループリント
まずマテリアルを制御するために キャンバスに配置した Image から DynamicMaterial を変数化します。
値を変動させるためのカスタムイベント（changeGaugeValueと命名）を用意します。
疑似的に増減させるValueという名前（適当）の Float型変数を追加して、ランダムな値を追加するようにして、アニメーションを再生します。
Play Animationノードは再生を開始するとすぐに次のノードに処理が移るので、ここでゲージの長さを反映しています。
ゲージの長さはマテリアルパラメータコレクションを経由するので、SetScalarParameterValueノードの Collection版 を使用。（ゲージ1-16）
これでWidgetブループリントは完成。
最後に、このWidgetブループリントに対してカスタムイベントを呼び出すしくみを作ればOK。
今回は超簡易テストということで、テスト用のレベルブループリントで行いました。
CreateWidgetノード にテスト用のWidgetブループリントを設定しておいてから、Returnピンからドラッグすると、カスタムイベント（changeGaugeVallue）が検索でヒットします。
Kというイベントノードは Inputノードです。 なんとなく キーボードの [ｋ] キーで試してみたかっただけなので、お好みのボタンやキーに変えてみてください。
今回はこの辺で
UVの扱い方をマスターすると表現のバリエーションが格段に増えるので、ぜひいろいろ試して慣れておくのをオススメします。次回はUV移動でゲージを増減させます。
ではでは
ステキなゲージライフを！
