【UE4】TextureSampleでUVアニメーションさせる
Verは4.23です
【初めに】
エフェクト用のマテリアルで、時々使う機能が
UVアニメーションを使ったマテリアル。
基本はこのような、UVアニメーション専用のノードを使います。
横の枚数や縦の枚数、どのようにアニメーションさせるかなどは
カスケードやNiagara側から制御する事になるのですが。
Niagaraの場合、メッシュタイプでは、今のVerでは恐らく対応してなさそう?なので。
TextureSampleを使って、自分でここの計算をすることで。
本来は出来ないUVアニメーションを自分で実装してみよう、という内容です。
いけたぜ pic.twitter.com/fgRLZaZfN8
— moyasi@マテフォの中の人 (@torisutamoyasi) August 29, 2019
こういうのが出来ます。
【横のみのアニメーションを作ります】
基本的に、TextureSampleにある、UVsの接続にいろいろつないでいって動かすようにします。
この接続部分に関する部分は
この、極座標の処理組んだ時の記事で書いてあるので。
原理的なところから気になる場合は、こちらを確認してみてください。
まずは、この横だけのものから、処理を組んでいきます。
左の1/4だけ映す場合はこう、非常に単純
X(R)を0~0.25が映る様にすればいいだけです。
ただ、この場合この0.25どこから持ってくるの?となってしまうので
ちゃんとこんな感じにしておきましょう。
テクスチャが横に4枚あるので、4。
分割数は、元の使うテクスチャで変わってくるので
ここはインスタンスで変更できるようにしておくと、便利だと思います。
ただ、今回の本題は「UVアニメーション」なので
そちらの処理を組んでいきましょう。
原理的な話だと、Rが0~0.25表示になっている部分が
0.25~0.5
0.5~0.75
0.75~1
この様に変わってくれれば良いわけです。
ここで非常に便利なCeilというノードが
小数点の切り上げの処理をしてくれます。
つまり、1,2,3,4...と段階的に数値が上がっていきます
それを4で割るだけで
0.25,0.5,0.75,1と段階的に数値が上がっていきます。
今はTimeで代用しますが、グラフとしてはこんな感じになります。
Timeからの数値を切り上げて
タイリング数で割ってあげます
その数値を加算すれば完成です。
横の分割数の数値を使っているので。ここが例えば8になれば
Ceilからでてきた整数も8で割ってから加算されるので、綺麗な数値になります。
分割数が多いほど、遅くなるのであれば
その分割数で乗算してあげると
Timeの数値が0~1で、分割数に関係なく、最初から最後のコマまでアニメーションされます。
横だけなら、これで完成です。
最後に操作しやすいように、DynamicParameterをつないでおきましょう。
【縦と横に拡張します】
次は、縦と横のあるものを作ります。
原理的には一緒ですが、若干ややこしくはなります。
まず、1コマ毎の更新の速度が、縦と横を掛けたものになります。
1秒で全てのコマを再生するなら
1コマ辺1秒/(横*縦)となります、今回は8*4の32です。
この速度で、横軸を行ったり来たりします。
縦の分割が4なので、1秒の間に、横を左端から右端に4往復します。
若干複雑にはなりますが。
横の動きと同じように縦の動きを作るだけになります。
ただ、この状態で再生すると、少しだけズレが出てしまいます。
時間から横のコマが変わるパターンと、横の変わるコマのパターンが少しずれているのが理由なので
縦軸が変わる時間を、少しだけこのようにズラしてあげると綺麗になります。
1/32の32は、当然全体のコマ数です
最終的には、DynamicParameterも入れるのを想定して、おそらくこんな感じになるかなと
同じパラメータを流用したりで、結構ごちゃごちゃになります...
これを使えば、UVアニメーションとタイリングの併用も...
多分出来ると思います!
これはまた実際に試した時にでも記事に書くかなとは思います。