一年近くかかってゲージ100本ノックもいよいよ残りわずかになりました。
今回は点滅の方法について３種をピックアップします。
補間なしで切り替わるタイプ、滑らかに切り替わるするタイプ、テクスチャを使ってタイミングをコントロールするタイプの３つ。
ゲージで点滅する状況といえば、たいていはヤバさ演出のためです。残量が少なくなった時に危険を知らせる目的で表現されているのをよく見かけます。
残量が少なくなるということはゲージの面積が小さくなっているので点滅したところで目立たなかったりします。
そういう場合はゲージではなく 下敷きまたは背景 を点滅させることもあります。
点滅のカラーやタイミングを変えると、印象を変えることができます。危険を知らせる以外にも利用できることがわかります。
UI のインタラクションでも超がつくほど定番の点滅。
数回程度の点滅であれば、タイムラインからの制御で十分ですが、ゲームの仕様的に点滅時間が不定だったり、ほかのインタラクションと被る場合、シェーダーで点滅させておくほうが、取り扱いがラクです。
今回の仕組みとしては、点滅している世界線と、点滅していない世界線が同時に存在していて、状況に応じて切り替えるというのを基本にします。
あと、せっかくゲージなので、一定の割合以下になったら 点滅 するようにします。
重要な役割をしてくれるのが、StepノードとLerpノードのコンビネーションです。
Stepノードは、しきい値を境界に、0 と 1 のどちらかの値を出力します。
それを Lerpノードに渡すことで、２つの状態をスイッチできるのです。
今回紹介する３本は、説明用のキャプチャとしてWidgetブループリントで増減のアニメーションを再生するようにしています。いままでゲージの増減にはMaterialParameterCollection（下図左）を使って紹介していましたが、普通に ScalarParameter（下図右）で紹介しています。
実際に実装する場合は ScalarParameterノードを使います。
92. ぴかぴか点滅
点滅には Timeノードを使います。
Timeノードは取り出したままだと、ずっとカウントされ続けます。
点滅の間隔を均等にするために 0～1 にする必要があって Frac（Fraction）ノードを使います。Fracノードは 小数点の左（整数部分）を切り捨てます。
これを Stepノードで矩形に変えるのがポイントです。
時間とともにまっすぐ推移するところを、Step(時間, 0.5) とすることで、タイムラインのキータイプでいうところの Constant と同じカタチにできます。
Timeノードには Period というプロパティが用意されているので、そこに 1.0 を設定すると 0～1 の繰り返しになって Fracノードが不要にできます。
ただスピードの調整方法が変わります。
下図は上段と下段どちらも同じ点滅速度です。
計算量が少ない方が負荷が減ります。まずは調整しやすい方法でつないでおいて、確定したら後からお掃除すればよいでしょう。
このStepノードから出た値が、 次の Lerpノードによって A と B に切り替わるため、
点滅するというわけです。
条件分岐と似たようなふるまいになります。
今回できたのはこれです。
Threshold と命名した ScalarParameterノードで 点滅する条件を設定しています。
点滅と同じように、Stepノードで分けることで、点滅するかしないかを Lerpノードが切り替えます。
上図では 0.5 としているので、ゲージが半分以下になると点滅が始まります。
ゲームの仕様に合わせて調整します。
30％ とか 20％ を 0.3、 0.2 というように小数にして指定します。
ちなみに
冒頭で紹介した下敷きが点滅するタイプはこうなります。
接続が少し入れ替わる程度。
93. なめらか点滅
つぎは なめらかな点滅です。
作りやすいところで まずはサインカーブから。
サインカーブは値が -1.0 ～ +1.0を循環するので、点滅に向いています。Stepノードを使わないので 滑らかに遷移します。イージング関数としても人気です。
ただ三角関数は比較的計算コストが高めなので敬遠されがち。ご利用は計画的に。
とはいうものの、ゲージの描画面積は画面解像度からしたら かなり小さいので、ほとんど気にならないです。
サインカーブのアニメーションといえばこれ
サインカーブ は そのままだとマイナスの値が存在するので、0.5 を掛けて 0.5 を足します。これで ０～1.0 の間を往復するようになります。これを LerpノードのAlphaにつなげば AとBを行ったり来たりします。
基本的には 92. の構成と同じです。
要するに 往復すればいいわけで、こういうのもあります。
マイナス部分を強引にAbsノードでプラスに変えます。
バウンドするように遷移します。
サインカーブを使わないリニアなやつでも、Absノードが活躍します。
引き算でマイナスになった部分を Absノードで反転します。範囲が 0 ←→ 0.5 になるので 2倍します。
緩急がなくなりますが、じゅうぶんに点滅しているように見えます。
上の３タイプをグラフにすると以下のようなイメージです。
単位時間あたり色の見え方に違いが出ますが、点滅が速いと気づきにくいです。
ゆっくりした点滅の場合はサインカーブがおすすめです。
94. テクスチャを使った点滅
点滅の最後はテクスチャを使ったケース。
点滅の色と周期やパターンを、テクスチャで管理します。
調整作業の際、マテリアル（シェーダー）を触れないメンバーに丸投げできます。テクスチャが作成できるDCC環境が必要ですが、UEだとカーブエディタがあるので、そちらでも作成は可能。
92. と 93. は点滅する世界線と点滅しない世界線を Lerpノードで切り替えましたが、テクスチャを使うので UV の Vを移動させて点滅する、しないを切り替えます。
32 x 8 px
6倍に拡大
上下に4ピクセルずつ分かれていて、それぞれの真ん中を左から右に移動させます。
U方向は Timeノードによって常に移動しています。
ゲージ量がしきい値以下になったら、Vの値を 0.25 から 0.75 に切り替えます。
これで、点滅するかしないかを切り替えます。
できたのがこれ。
TexCoordノードにいきなり 0 を掛けています。
テクスチャから色が拾えたらいいので、位置が重要で面積は必要ありません。
あとにくる TextureSampleノードは、UV空間からテクスチャのカラーをサンプリング（抽出）します。面積がゼロということは、テクスチャの一点からしか色を拾いません。限りなく先端の細いスポイトを使うようなイメージです。むしろゼロにしないと複数のピクセルカラーを拾ってしまいます。
試しに テクスチャのグラデーションを変えてみると
92. と同じような点滅になります。
つまり テクスチャが タイムラインの代わり をしているのです。
テクスチャを差し替えるだけで、いろんなカラーに対応できます。
シェーダーができてしまえば、テクスチャを更新するだけになります。
点滅が可能な汎用的に使えるシェーダーとしても重宝しそうです。
テクスチャを差し替えるのではなく、あらかじめいろんなゲージカラーを縦に並べておいて切り替えるのも効率的で管理がしやすいのでおすすめ。
しきい値による切り替えは使えなくなりますが、V座標を切り替えるだけのシンプルな構成になります。
汎用性やメンテナンスのしやすさなどを考慮して組み立てられるようになると、スケジュールに余裕が生まれて、気が済むまで調整できるかもしれません。
おまけ
今回 Lerpノードで、点滅するしないを切り替えるように作りましたが、しきい値と Lerpノードを使わない点滅切り替えの方法も取り上げておきます。
基本的に常時点滅しています。同じ色だと差がないので点滅していないように見えるというわけです。シンプル！
で、タイミングがきたらブループリント経由で カラーを変更するだけです。
カラーは、VectorParameterノードを使うと 外からの変更が可能です。
点滅をやめるときは、元のゲージの色に戻します。
今回は以上です。
点滅は利用頻度が高いので、積極的に使っていく機会を増やせば、早く慣れることができると思います。ゲージ以外だとユーザーの入力待ち演出と相性ばっちり。カーソルや New表示、選択中のフォーカス表現などなど。
画面に置いた瞬間から勝手に点滅しているので、タイムライン制御と切り離せるところが便利です。ぜひマスターしておきたいですね。
ではでは
素敵なゲージライフを！
