moyasiエフェクト館

主にエフェクト関係の記事を上げていこうかと思います。


エフェクトに関係する記事上げてきます
エフェクト関係の記事の内容は緩く募集中
自分がわかる範囲であれば書いていこうかなと。

【UE4】TextureSampleでUVアニメーションさせる

 

f:id:tktknkyo:20190920150613p:plain

Verは4.23です

 

【初めに】

 

エフェクト用のマテリアルで、時々使う機能が

UVアニメーションを使ったマテリアル。

 

f:id:tktknkyo:20190920135026p:plain

基本はこのような、UVアニメーション専用のノードを使います。

 

横の枚数や縦の枚数、どのようにアニメーションさせるかなどは

カスケードやNiagara側から制御する事になるのですが。

Niagaraの場合、メッシュタイプでは、今のVerでは恐らく対応してなさそう?なので。

 

TextureSampleを使って、自分でここの計算をすることで。

本来は出来ないUVアニメーションを自分で実装してみよう、という内容です。

 こういうのが出来ます。

 

 

 

 

【横のみのアニメーションを作ります】

 

基本的に、TextureSampleにある、UVsの接続にいろいろつないでいって動かすようにします。

この接続部分に関する部分は

tktknkyo.hatenadiary.jp

この、極座標の処理組んだ時の記事で書いてあるので。

原理的なところから気になる場合は、こちらを確認してみてください。

 

f:id:tktknkyo:20190920135939p:plain

まずは、この横だけのものから、処理を組んでいきます。



f:id:tktknkyo:20190920140216p:plain

左の1/4だけ映す場合はこう、非常に単純

X(R)を0~0.25が映る様にすればいいだけです。

 

ただ、この場合この0.25どこから持ってくるの?となってしまうので

f:id:tktknkyo:20190920140620p:plain

ちゃんとこんな感じにしておきましょう。

テクスチャが横に4枚あるので、4。

分割数は、元の使うテクスチャで変わってくるので

ここはインスタンスで変更できるようにしておくと、便利だと思います。

 

ただ、今回の本題は「UVアニメーション」なので

そちらの処理を組んでいきましょう。

 

原理的な話だと、Rが0~0.25表示になっている部分が

0.25~0.5

0.5~0.75

0.75~1

この様に変わってくれれば良いわけです。

 

f:id:tktknkyo:20190920140909p:plain

ここで非常に便利なCeilというノードが

小数点の切り上げの処理をしてくれます。

つまり、1,2,3,4...と段階的に数値が上がっていきます

それを4で割るだけで

0.25,0.5,0.75,1と段階的に数値が上がっていきます。

 

f:id:tktknkyo:20190920141537p:plain

今はTimeで代用しますが、グラフとしてはこんな感じになります。

Timeからの数値を切り上げて

タイリング数で割ってあげます

その数値を加算すれば完成です。

 

横の分割数の数値を使っているので。ここが例えば8になれば

Ceilからでてきた整数も8で割ってから加算されるので、綺麗な数値になります。

 

f:id:tktknkyo:20190920141838p:plain

分割数が多いほど、遅くなるのであれば

その分割数で乗算してあげると

Timeの数値が0~1で、分割数に関係なく、最初から最後のコマまでアニメーションされます。

 

横だけなら、これで完成です。

最後に操作しやすいように、DynamicParameterをつないでおきましょう。

 

【縦と横に拡張します】

 

f:id:tktknkyo:20190920142148p:plain

次は、縦と横のあるものを作ります。


原理的には一緒ですが、若干ややこしくはなります。

 

f:id:tktknkyo:20190920142757p:plain

まず、1コマ毎の更新の速度が、縦と横を掛けたものになります。

1秒で全てのコマを再生するなら

1コマ辺1秒/(横*縦)となります、今回は8*4の32です。

 

この速度で、横軸を行ったり来たりします。

縦の分割が4なので、1秒の間に、横を左端から右端に4往復します。

 

f:id:tktknkyo:20190920143813p:plain

若干複雑にはなりますが。

横の動きと同じように縦の動きを作るだけになります。

 

ただ、この状態で再生すると、少しだけズレが出てしまいます。

 

f:id:tktknkyo:20190920144727p:plain

時間から横のコマが変わるパターンと、横の変わるコマのパターンが少しずれているのが理由なので

縦軸が変わる時間を、少しだけこのようにズラしてあげると綺麗になります。

 

1/32の32は、当然全体のコマ数です

 

 

f:id:tktknkyo:20190920145353p:plain

 

最終的には、DynamicParameterも入れるのを想定して、おそらくこんな感じになるかなと

同じパラメータを流用したりで、結構ごちゃごちゃになります...

 

 

これを使えば、UVアニメーションとタイリングの併用も...

多分出来ると思います!

これはまた実際に試した時にでも記事に書くかなとは思います。