moyasiエフェクト館

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


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

このブログについて

ブログの名前の通り、エフェクトに関係することを上げていこうかと思います

自分がわかる範囲で、エフェクトに関係することであれば何でもいいかな?とは

エフェクト自体の作り方は勿論の事

エフェクトの再生手段や、エフェクトに使うテクスチャ等

 

エフェクト素材の配布も始めました

(http://tktknkyo.hatenadiary.jp/entry/2017/12/31/095520)

 

 

なお、情報はTwitter(moyasi@エフェクト垢 (@torisutamoyasi) | Twitter)

でも出していたりするので、興味のある方は是非

Twitterではmoyasiという名前になっていますので、tktkでもmoyasiでもどちらでも呼びやすい方で

 

また、Discordにて「エフェクト交流所」というサーバーというのも作りました

ここは、エフェクトを作ろうとしているor作っている人同士で

相談したり、情報の共有したりするのを目的としております。

discord.gg

 

【Houdini】LineやCurveからモデリングする

f:id:tktknkyo:20200901232910p:plain

Verは18.0.566です

 

初めに

 

今回はHoudiniでLineやCurveという、つまりラインのデータからモデリングしていく手段を

モデルを作っていく手段そのものは色々あると思います

そしてこのやり方の長所としては

UV展開が非常に楽になる事です

Gridなどの板の状態でUV開いておいて変形する

というやり方の派生のようなやり方となります

 

Gridから作る方がUV展開そのものは楽ですが

作りにくい形状とかもあるので

そのような場合に使うのを想定しています。

 

 

基本

ラインからモデリングがどのように作るかから

f:id:tktknkyo:20200901233433p:plain

まずはLineノードからラインを作ります

 

f:id:tktknkyo:20200901233542p:plainf:id:tktknkyo:20200901233554p:plain

その後、Transformでずらした後にMergeでラインを二本にします

 

f:id:tktknkyo:20200901233714p:plain

その後、PolyPatchを繋ぐとこのように面を張ってくれます

分割数を細かくする機能も入っていて

デフォルトだと4なので、このように細かくなります

 

f:id:tktknkyo:20200901233916p:plain

そしてこちらは、ラインの状態でそれぞれ赤と青にしておいたもの

アトリビュートを入れておくと、間の情報が綺麗に補完してくれます

この機能があるので、ラインの状態でUVの情報を入れておくと、非常に手軽にUV展開を済ませる事が出来ます。

 

このやり方を使うメリット

 

UV展開はたしかに楽ですが、この程度であれば、Gridから作ったほうが楽に作る事が出来ます。

 

このやり方として、一本のラインであれば直線でなくてもよい

f:id:tktknkyo:20200901232910p:plain

つまりこのような、湾曲した形状も作りやすい事になります。

 

最初にLineではなく、Curveを使う事で

このような湾曲した形状も作りやすいです

これにより、直線などの情報から変形したりするのがやりにくいデータでも、モデルに落とし込むことがやりやすいです。

 

f:id:tktknkyo:20200901234947p:plain

このUV展開まで終わらせたモデルはこのような作りになっています

赤枠で囲ったEdgTransportというノード

こちらは、0のポイントから順番に距離を測ってくれるノードです

お互いの座標だけでの位置ではなく、0から順番順番に長さを計算してくれます

なので、この情報をベースに使う事で

一部だけUVが伸びる、などが起こらないように作る事が出来ます。

 

 

更に派生して使う

 

ここまで、一本のラインや曲線から作るやり方だったので

横幅が一定のもののみでしたが

二本のラインからでも当然作る事はできます。

 

f:id:tktknkyo:20200901235923p:plainf:id:tktknkyo:20200902000021p:plain

例えばこのような、ポイント数も違う二本のラインから作る場合

MergeしてからそのままPolyPatchに繋ぐとこのように破綻してしまいます。

 

f:id:tktknkyo:20200902000305p:plain

そこで登場するのがResampleノード

いろんな場面で便利なノードなので、割と使う事多いノードかと思います。

 

f:id:tktknkyo:20200902000516p:plain

設定は今回このようにしました

こうする事で、ポイント数を無理やり50になるように揃えてくれます

同じ設定にしたものを、二つのCurveの直後に入れます

 

f:id:tktknkyo:20200902000720p:plain

ポイント数を合わせたことで、綺麗に面が貼れています。

 

 

 

最後に

 

少しだけ自分で作った例を載せておきます

f:id:tktknkyo:20200902001412p:plain

開いた本のモデル、赤枠の部分以外は

今回の手法を使って作っています。

 

f:id:tktknkyo:20200902001703p:plain

ノードツリーはこのような感じに

 

f:id:tktknkyo:20200902001931p:plain

若干解りにくいかもしれませんが牙用のモデル

 

f:id:tktknkyo:20200902002152p:plain

こちらのノードツリーはこんな感じに

上と下で分離して処理作っているので

その辺りでばっさり分かれています。

 

 

 

 

 

今回はここまでとなります。

あまりHoudiniで記事に掛けるネタあんまりないですが

何かあれば書いていきたいです。

 

 

 

 

 

 

【Effekseer】サンプルのマテリアル解説、ToonImpact

f:id:tktknkyo:20200629043216p:plain

Verは1.52gです

 

【初めに】

 

この記事は、Effekseerへのサンプルとして投稿したものの

マテリアルの一つである

ToonImpactの内容の解説になります。

このマテリアルがある場所は

Sample/02_Tktk03/Parts

のフォルダにあります

内容の解説になりますので、グラフを開きながらの方が解りやすいと思います。

 

【どういう機能のマテリアルか】

f:id:tktknkyo:20200629043216p:plain

サムネにある、このような表現はこのマテリアルで作られています

 

f:id:tktknkyo:20200629043855p:plain

画像は3枚入れることが出来ます

またパラメータもいくつかあります

画像のタイリングやスクロール速度に加え

描画する領域などを決めるものがあります

 

下二つのパラメータは若干ややこしいとは思います

どういう風に動いているのかは

実際に数値を変えてみてください

 

【マテリアルの解説】

なお、基本になる、スクロールやタイリング、歪み関係の解説はここでは省きます

tktknkyo.hatenadiary.jp

tktknkyo.hatenadiary.jp

 

内容はこちらの記事で纏めてありますので

ここから知りたい方は先にこちらの記事をオススメします

 

f:id:tktknkyo:20200629044534p:plain

マテリアルの中身はこのようになっています

開いた段階で、中央付近や、一番右に表示されている部分は

動いているのが分かると思います

 

f:id:tktknkyo:20200629044649p:plain

右枠のこうなっている部分は

上に向かって動いているのは解ると思います

そしてこのマテリアルは、上下方向の移動にのみ対応しています

 

名前にあるImpactというのは、主に中央から外に向かって動く動きを想定して付けている為です

 

f:id:tktknkyo:20200629045010p:plain

また、左半分のこの部分は、タイリングやスクロール、歪みの調整のみになるので

この辺は上に付けた別の記事を参考にしてください

 

f:id:tktknkyo:20200629045352p:plain

このマテリアルの、色を極端にする加工の場所はこの赤枠の部分が重要になってきます

そして画像ですが、上の画像はシームレスなノイズのテクスチャ

下の画像はグラデーションの画像などを想定しています

 

f:id:tktknkyo:20200629045605p:plain

サムネにもなっている部分では

この二つの画像を使用しています(歪み用も使っています)

 

まず、一番左の乗算、これは単純に画像同士の掛け算です

その次の足し算ですが

ここで乗算用の画像を加算しています

これにより、0~2の情報となります

 

f:id:tktknkyo:20200629045840p:plain

その次の掛け算ですが、これはカスタムデータのAの要素を持ってきています

 

f:id:tktknkyo:20200629045935p:plain

そしてここには基本色、という名前も入っていると思います

固定4などにして、数値を色々弄ると、Aの部分の数値が小さい程

描画される領域が小さくなるのが解ると思います

 

その次の引き算ですが、こちらは

【マスク抜き&加算範囲】

という名前の付いているパラメータから持ってきている情報となります

f:id:tktknkyo:20200629050305p:plain

説明文はこのように出てきます

数値が小さいほど残る範囲が広くなる

右側の数値は加算する領域を決めます

とあります

この加算する領域というのは

 

f:id:tktknkyo:20200629050426p:plain

例えばこの部分の場合、濃い水色と明るい水色がありますが

明るい水色を描画する範囲をここで決めます

 

ここの数値は0~1を使うのを想定しています

そして0~1の数値を使う場合であれば

 

f:id:tktknkyo:20200630011725p:plain

ここの赤枠の引き算の部分に入る数値は0~2となります

今回のサンプルのエフェクトでは0.6という数値が入っています

その場合は-0.6~+1.4という範囲となります

 

その次の切り上げは、そのまま小数点以下を切り上げます。

そうすると、0か1か2

という3つの情報のみになります

 

0は真っ黒の部分

1は真っ白の部分です

2の部分は、この状態では見えないのですが

数値とはしてはしっかり入っています

f:id:tktknkyo:20200630012116p:plain

なのでこのように、0.5で掛け算してあげると

1だった部分が灰色、2だった部分は白のままとなります

今回では、使っているテクスチャの影響で

2の範囲が小さい領域になっています

 

そして、この2の数値が入っている部分こそが

f:id:tktknkyo:20200629050426p:plain

この部分でいう、明るい水色の部分となります

 

おおよその機能としては主にこの辺になります

ここからは、調整しやすくする為などに入れたりした部分などが入ってきます

 

f:id:tktknkyo:20200630012720p:plain

このマテリアルでは、描画領域を決めるのに

OpacityではなくOpacityMaskを使用しています

 

Opacityは透明度になりますが

OpacityMaskは、0より大きい数値が1で返ってきます

切り上げに近いもの、と考えてもらえば良いと思います

 

f:id:tktknkyo:20200630013245p:plain

最後にこの赤枠の部分になります

 

左にあるカスタムデータ1は

上の方でも出てきた基本色という部分と連動しています

こちらはRGBつまり青や水色などはここから色を取ってきています

f:id:tktknkyo:20200629045935p:plain

 

その次にある掛け算、これは切り上げをして0か1か2の情報と

基本色を掛け算しています

 

その次にも掛け算がありますが

こちらは加算強度と名前の付いているパラメータと連動しています

f:id:tktknkyo:20200630013708p:plain

f:id:tktknkyo:20200630013754p:plain

ここの数値を一気にあげると、明るい水色だった部分が白くなります

おもにここは色味を微調整する為のパラメータとなります

 

そして最後に足し算

ここで、作った要素と足し算する事で

中心の明るい部分の調整を組み込んでいます

 

そしてこの最後の足し算ですが

これは、基本色のRGBと加算することで

意図しない黒色が出てくるのを防ぐ為です

f:id:tktknkyo:20200630015008p:plain

元々の切り上げをした情報の部分で0が入っていると

掛け算をしても基本的に0のままになるのが理由です

 

ただ加算合成では黒色はそもそも見えなくなるので

確認をする場合は、通常合成で確認してみてください

 

 

今回はここまでとなります

ツクールのMZでEffekseerを使う前提になるそうなので

それに合わせてEffekseerの記事も増やしていけたらなと思います

 

 

 

【Niagara】モーションに合わせた角度に調整しやすくする

f:id:tktknkyo:20200621010146p:plain

Verは4.25.0です

 

初めに

今回は、斬撃ブラーなどの

モーションに依存しやすいエフェクトで

そのモーションに合わせた角度調整がやりやすい方法を

 

一応、角度をそれぞれ弄っていっても合わせるのは出来ますが

それだけだとどうしても手間が掛かると思うので

調整をしやすくする手段を

 

今回の記事ではメッシュを使ったエフェクトが対象となります。

 

アニメーション通知での調整

 

Verの更新で、アニメーションシーケンスからも

Niagaraのエフェクトの再生ができるようになり

そこから角度も調整できるようになりました。

 

また、再生しながらNiagaraSystem上で角度を弄ることも当然できます

ただし、角度を微調整するにしても

角度が変わるのは再び再生されるとき

になるようです

 

発生時に角度を決めているので当然といえば当然ですが...

 

また、こちらで調整する場合、角度を調整する手段は

XYZで調整する方法、クォタニオンで調整する方法などがありますが

数値をいれて調整するのは、直感的ではないかなと

 

レベル上で確認して角度を取得する

なぜレベル上かというと

f:id:tktknkyo:20200621011318p:plainf:id:tktknkyo:20200621011338p:plain

このように、アニメーションの再生もここで出来るのが理由です

(静止画だと解りにくいですが)

 

また、手動での調整もしやすいです

 

 

f:id:tktknkyo:20200621011530p:plain

レベル上に、BPなどの装備した状態のメッシュを持ってきて(今回はプレイヤーキャラ)

アニメーションのデータを適応する事で、レベル上での再生ができます

 

問題の角度をどのように調整するかの部分ですが

このキャラのBPに調整したいメッシュを持ってきます

f:id:tktknkyo:20200621011837p:plainf:id:tktknkyo:20200621011902p:plain

 

若干見た目が奇妙な気はしますが

読み込んだあとは、アニメーションを再生し、それに合った角度に調整するだけです

 

f:id:tktknkyo:20200621012052p:plain

このやり方であれば、数値を直接入力するのではなく

向きに合わせて、かなり直感的に角度の調整がしやすいと思います

 

スナップが入っていると調整しにくいので、外すのは忘れずに

また同時に座標の微調整もやりやすいです

 

f:id:tktknkyo:20200622003818p:plainf:id:tktknkyo:20200622003852p:plain

位置などを調整する場合

原点の位置は確認しておきましょう

今回使っているグレーマンのメッシュは足元が原点になっていました

 

 

 

Niagaraで調整する

f:id:tktknkyo:20200621012316p:plain

調整が終わったら、読み込んだメッシュのトランスフォームの所の数値をNiagaraで読み込みます

 

f:id:tktknkyo:20200621012925p:plain

あとは、そのまま同じ数値をNiagaraの方で代入すれば問題ないはずです

ただ、座標はキャラ基準なので、エンジンオーナーPositionとの加算

 

向きはキャラの向きもほしいのであれば、エンジンオーナーRotationは入れておきましょう。

メッシュの角度を決めるMeshOrientationはクォータニオンの型なので

変換する必要があります

 

f:id:tktknkyo:20200621013203p:plain

以前の記事でも出したと思いますが

自身はこのような変換する機能を作ってあります

関数を使えばそこまで手間の掛かるものでもありません

 

今回はここまでとなります

 

大分前にやろうとしたときは一回諦めたのですが

再びやったら結構あっさり解決したのがこの件です...

 

【Effekseer】マテリアルで簡易的に光って見えるようにする

f:id:tktknkyo:20200523204953p:plain

Verは1.51です

 

【初めに】

今回は、マテリアルでちょっと弄れば、手軽に発光みたいなのを作る

という感じの内容になります

 

あくまで簡易的になりますが、とりあえずテクスチャ1枚で手軽に光ってみるようにする感じとなります。

 

 

 【ブルーム】

よく聞くやつですね、お手軽に光らせることができます。

 

f:id:tktknkyo:20200523214214p:plain

ブルームとなるところをOnにすると有効になります、デフォルトだとOffになっています。

 

f:id:tktknkyo:20200523214319p:plain

今回はかなり極端な数値で設定しましたが、上記の設定でこのようになりました。

後ろにある、マテリアル自体で光ってみせる方法と違い

こちらは、エフェクト全体に一括で光らせます

手軽さではこちらの方が高いです

 

f:id:tktknkyo:20200523214914g:plainf:id:tktknkyo:20200523215028g:plain

とりあえず手元にあったエフェクトでブルーム有り無しの比較だとこのようになっています

数値としては

明るさは0.6

しきい値が0.5

穏やかさが1

となります。

 

 

 

【マテリアル】

f:id:tktknkyo:20200523205549p:plain

では本題のマテリアルです

マテリアルの中身自体はこのようになっています。

内容としては、違う乗数したものを加算しただけとなります。

 

f:id:tktknkyo:20200523205837p:plain

単純にテクスチャを使うだけならこうなります。

ここに対して、まずは乗数を入れていきます

 

f:id:tktknkyo:20200523210137p:plain

また、ここの乗数は調整できるようにするので

パラメータからの出力を繋げます

図だとPowBaseと付けました

 

f:id:tktknkyo:20200523210335p:plain

そして、そこに光って見える為の部分の処理を追加しました

それが赤枠の部分となります。

 

PowCoreという名前が、中心の光って見える部分に使う乗数です

こちらはPowBaseよりも高い数値が望ましいです

 

それを加算するのですが、このままだと強過ぎる可能性があるので

ここの強度も調整できるようにしました。

左下のAdd_Core_Levelと付けたパラメータと乗算し

エフェクト毎に変えることができるようにしました。

 

そして、元々Emissiveに繋がっていた部分と、ここの情報を加算して

Emissiveに繋げます。

これで完成となります。

 

【調整】

 

f:id:tktknkyo:20200523210806p:plain

今回はこの様な画像を使いました。

 

f:id:tktknkyo:20200523210903p:plain

その画像を使うとこうなります

各パラメータは

Poebaseが1.1

PowCoreが15.5

Add_Core_Levelが1.3

RGB自体はR0、G101、B255

となります

 

f:id:tktknkyo:20200523211122p:plain

PowCoreの数値を小さくすると、このように白い部分が強くでてくるのでよりクッキリ見えるようにもなります。

 

この方法を使う場合、テクスチャもそれに合わせて色の階調を作ってあげると利便性も高くなります。

 

またマテリアル側もかなりベースの部分のみとなっているので

他のテクスチャと乗算させたり、別のテクスチャを使って色味を追加する

歪みやタイリング、スクロールなど

自分の作るエフェクトに合わせてマテリアルは調整するのが良いと思われます。

 

今回はここまでとなります、なんとなくで光って見えるようにしたい、という場合には手軽さはあるのではないでしょうか。

 

 

【UE4】Niagaraのエフェクトを再生する

f:id:tktknkyo:20200413163005p:plain

Verは4.24です

 

 

【初めに】

今回の記事は、エフェクトそのものを作る内容ではありません

Niagaraで作成したエフェクトの再生関係の内容となります。

Niagaraでエフェクトは作れたけど、良い感じに再生ができない!

などの場合に参考にしてもらえればなと思います。

 

【基本】

かなり基本となる部分から

 

f:id:tktknkyo:20200413164239p:plain

レベルにそのまま配置するだけであれば

ドラッグ&ドロップでカスケードと同じように配置できます。

 

f:id:tktknkyo:20200413164644p:plain

特定のボタンを押したとき、などの場合はこのようになります

とりあえずキーボードのAキーにしてますが

 

カスケード用とは少しだけ名前が変わります

Spawn System at Location

Niagara

Spawn Emitter at Location

がカスケード用となります

 

f:id:tktknkyo:20200413164911p:plain

プレイヤーの位置にエフェクトを再生する場合は

座標をそのまま接続すればいいです

 

ただし、Niagaraの場合Locationは発生位置そのものというより

Engine.Owner.Position

に情報を渡すだけとなります

 

BPから再生は、被ダメ時やモーション再生時などでもできます

この辺はカスケードと同様かなと。

 

【アニメーション連動】

 

f:id:tktknkyo:20200413165748p:plain

今のVerではPlay Niagara Particle Effect

がアニメーション通知で利用する事ができます

これにより、アニメーションシーケンス上でエフェクトを再生する事も可能です

 

f:id:tktknkyo:20200413165935p:plain

設定出来る内容はこのようになっています

座標変更などはある程度はできますが、ある程度でしかできません。

 

f:id:tktknkyo:20200413170044p:plain

なので、このような、User.系統のデータを操作する事がデフォルトでは出来ません。

なので通知を作ってみよう、という事になります。

 

【アニメーション通知を作る】

f:id:tktknkyo:20200413170500p:plain

アニメーション通知を作るためのBPを作ります

Anim 辺で検索すれば出てくるかなと

このAnimNotifyで作ります。

 

f:id:tktknkyo:20200413171313p:plain

上の関数のところから、オーバーライドを選択して作ります。

 

f:id:tktknkyo:20200413171356p:plain

そうすると、この二つのノードが出てきます

あとはこの中で処理を作るだけです。

 

この時点で、アニメーションシーケンス側から

通知で出せるようにもなっています

 

 

f:id:tktknkyo:20200413171847p:plain

恐らくですが、最低限必要と思われる要素はこちらになると思います

アニメーションさせるキャラの座標を持ってくる場合は

Mesh CompからGetWorldLocationで座標を取得しましょう。

ここから更に動かすば場合は、ここにVector+Vector等を追加して、座標を動かします。

 

RotationやScaleは自分の操作しやすいように作っていくのがベストかなと

 

f:id:tktknkyo:20200413172246p:plain

また、アニメーションシーケンス内で操作する場合

変数をインスタンス可能な状態にしておきましょう、右の目のアイコンをクリックするとONにできます

 

あとは、シーケンス上から変えたいパラメータを入れておけばOKです

 

 

【条件によって再生を変える】

 

アニメーション通知を使った例でもう一つ

条件によって再生を変えるというものですが

何の為かというと、属性差分を作りたいなと

 

BPで再生するエフェクトを分離させるだけなら楽ですが

アニメーション通知もBPなので、通知でも同じだろう、という事で作りました。

 

f:id:tktknkyo:20200413191751p:plain

自分が作ったものはこちら

解りやすいようにとりあえず分離は二つにしています。

 

まず属性の判定は、BPインターフェースを使って

現在の属性に使っている変数を取得してきます。

 

属性によって再生するものを分ける処理は

整数型で分離する専用ノードがあるので、これを使うだけです

 

f:id:tktknkyo:20200413192527p:plain

ここに変数のセットが入っていますが

これにはローカル変数を使っています。

 

f:id:tktknkyo:20200413192649p:plain

普通の変数の場合、GetはできますがSetはできない為です。

また、変数をそのまま繋げてはいけない理由として。

 

f:id:tktknkyo:20200413192801p:plain

Niagaraを再生するノード自体が、一つしか変数を入れることができない為です。

なので、条件によって、どちらを取得するのかを、選択し

選択したものを、一度ローカル変数に保存します

そして、そのローカル変数に代入されているデータを再生します。

機能としてはこれにて完成です。

 

大事な点としては

・どれを再生するのかの変数を持ってくる

・その変数で分離する

・一度ローカル変数に保存してから再生する

 

主にこの三つだと思います。

ローカル変数は使わずに済む方法もありそうでしたが

そこまでは自分では判断できませんでした。

 

f:id:tktknkyo:20200413193150p:plain

先ほどので完成はしましたが

確認が面倒なので、確認用の機能も入れたのがこちらになります。

 

上の赤枠部分を追加しただけです

 

やっていることは単純で、Spawn0という名前の変数がONの場合

再生するエフェクトのIDを固定する、というものです。

 

ゲーム中には再生を分けれても、シーケンス上で分ける手段が無かったので

強引に再生するものを弄るものです。

確認しやすくする機能も、あると作る側としては楽になりやすいかなと。

 

 

 

今回はここまでとなります。

発生の制御関係については、あくまで再生に必要だから作っただけであって

そちらがメインではないので

もっとやりやすいやり方、などもあると思います。

あればそっと教えてくれると幸いです。

【Effekseer】マテリアルの基本2(タイリング、スクロール、歪み

f:id:tktknkyo:20200330205716p:plain

Ver1.50となります

 

また、この記事は

tktknkyo.hatenadiary.jp

この記事の続きとなります

 

【初めに】

この記事では、タイリング、スクロール、歪みといった

画像そのものに対する処理などの内容を書いていきます

 

とはいえ、複雑なものではないので

どういう処理になっているのか、の部分も後半に触れていきます

 

【処理の内容】

上に書いたとおり、処理そのものは非常に簡単

f:id:tktknkyo:20200402013343p:plain

f:id:tktknkyo:20200402013432p:plain

f:id:tktknkyo:20200402013554p:plain

これで上から

タイリング、スクロール、歪み

の処理となります

スクロールは静止画だと解りませんが、左上に動き続けています。

ただ、現段階だとエフェクトに合わせて数値を変えたりする手段が無いので

調整をできるように組み直していきます。

(スクロールの処理は移動UV座標という専用ノードがありますが、今回は解説用なので使いません)

 

 

【タイリング、調整】

 

f:id:tktknkyo:20200402013343p:plain

これが2つタイリングしている状態となります

 

f:id:tktknkyo:20200402014300p:plain

これを3回タイリングさせる場合は、このようになります

左下の数字のノードが、そのままタイリング数となります

ノードの上にある文字が、ノード名なのが基本ですが

この数字のノードは定数ノードといいます

 

タイリング数を変える場合

UV座標のノードに、掛けた数値だけタイリングの処理が行われます

(UVとあるピンへの接続は忘れずに)

 

f:id:tktknkyo:20200402014657p:plain

横と縦を別々のタイリングをさせる場合は

このように繋ぎます

とりあえず、UV座標のノードと掛け算すれば、タイリング数を変えることが出来ます。

 

【スクロール、調整】

f:id:tktknkyo:20200402013432p:plain

こちらがスクロールの処理ですが

タイリングでは掛け算でしたが、こちらでは足し算となります

 

f:id:tktknkyo:20200402015401p:plain

静止画では判断できませんが、このようにすると

スクロールの速度が1/4になります

左下の定数ノードの数値がそのまま速度となります

 

f:id:tktknkyo:20200402015640p:plain

横と縦でスクロールの速度を変えたい場合は

このように変えます

タイリングと同様、縦と横を別にしたい場合は

要素結合というノードを使っています。

 

【歪み、調整】

 

f:id:tktknkyo:20200402013554p:plain

歪みを使った例ですが

この場合、動きが大きいので、そもそもどういう事が起こっているのかが解りにくいと思います

 

f:id:tktknkyo:20200402020554p:plain

こうすれば少しは解りやすいでしょうか...?

左下の画像の直後に低い数値(今回は0.2)を掛け算する処理を追加しています

歪みは、使っている画像に対して

定数を掛け算すると、それに応じて強さが変わります

 

【調整用パラメータを外に出す】

 

f:id:tktknkyo:20200406195500p:plain

サンプルに入っているマテリアルを開くと

このように、タイリング数などを

Effekseer上から調整できるようになっているものがあります

この仕様の部分を作っていきます。

とは言っても、これもすぐに終わります

 

f:id:tktknkyo:20200406195711p:plain

このパラメータとある部分のパラメータ1~4が

基本的に使うものになると思います

 

 

f:id:tktknkyo:20200406200004p:plain

例えば、このようにすれば、Effekseer上から

歪みの強度をマテリアル毎に変更する事が出来ます

 

一々マテリアルを個別に作らなくても

一部分だけ数値を変えた差分が欲しいなどの場合は、非常に重宝します。

 

f:id:tktknkyo:20200406200903p:plain

画像のパラメータは、画像にある「パラメータ画像」がそれになります

 

f:id:tktknkyo:20200406201003p:plain

ただしパラメータ画像は、そのままでは使えません。

画像参照ノードと合わせて使うことになります

 

f:id:tktknkyo:20200406200222p:plain

これはパラメータ1~4やパラメータ画像の設定部分となります

一番上の名称は、このマテリアル上で表示される名前となります

ただし、ここには日本語は入力出来ません。

 

その次の優先度、これはEffekseer上でパラメータが表示される優先度となります。

数値が小さいほど上になります

 

次のVとあるのは、デフォルト値となります。

また、マテリアルを編集する画面での数値にもなるので

できれば設定はしておいたほうがいいです

 

次の言語はそのままですね

概要に書いておくと、Effekseer上ではこちらの名前で表示してくれます。

日本語で表示したい場合は、こちらにパラメータの名前として書いておくと便利です。

 

f:id:tktknkyo:20200406200729p:plain

次の詳細は、Effekseer上でカーソルを合わせたときに表示される説明となっています。

 

 

パラメータとしては、細かく制御が可能なカスタムデータ

というものも用意されています

こちらは、エフェクトの途中で数値を変えたりなどもできる情報です

RGBAの色の情報などにはよく使います

f:id:tktknkyo:20200406201436p:plain

カスタムデータは、下の方の別の場所に出てきます

他のパラメータとは位置が違いますので、そこは注意してください。

 

【原理的な話】

 

ここから、タイリングやスクロールなんかの、原理的な部分になります。

知らなくても、最初は特に問題ないと思いますが

自分で処理を作ったりする場合、知ってると色々便利にはなるのかなと思います。

 

f:id:tktknkyo:20200406202026p:plain

タイリングでも、スクロールでも、歪みでも

使うことになるこのUV座標というノード

中身はこのようになっています

Rチャンネルの横のグラデーションと

Gチャンネルの縦のグラデーションになっています

そして黒や白は、数値で表すことが出来ます

 

f:id:tktknkyo:20200406202418p:plain

0は黒

0.5がグレー

1が白

 

つまり黒から白のグラデーションは0から1になっているという事になります

Rは横のグラデーション

Gは縦のグラデーション

これが、そのまま表示する座標となります。

また、右端や下端が1になりますが、それを超えた場合はどうなるのかというと

小数点以下のみ使われます

(※画像参照ノードの詳細をClampにしている場合、1を超えると強制的に1となります)

 

f:id:tktknkyo:20200406203154p:plain

例えばこの場合、UV座標から0.5を加算しています

UV座標は0~1のグラデーションを作るノードなので

0.5を加算する事で0.5~1.5となります

 

左上はRGが両方0.5になります

本来RGが0.5の場所は真ん中になります

なので、画像の真ん中の部分が左上に来るようになっています

UVの接続する情報は

所謂読み込んだ画像の、どの場所を表示するのかを定義します

当然ですが、ここに定数を入れると、画像からその場所を取得し

その色を全体に表示します

 

また、これがスクロールの原理となっています

 

f:id:tktknkyo:20200402013432p:plain

こちらのスクロール用に作った構成

時間ノードは、時間に応じて数値が増えていくノードです

つまり数値がどんどん増えていくわけです

その情報を、UV情報に加算しているので

表示する場所が動き続けることとなります

 

0.1、0.2と加算されて行く事に

画像の表示する座標を少しづつ、ずらしていっているワケです

 

f:id:tktknkyo:20200406204452p:plain

また、掛け算するとタイリング数となるのも

原理は一緒になります

この場合UV座標を2倍します

元々が0-1のグラデーションなので

0-2のグラデーションになります。

更に、小数点の情報を座標として使用するので

1を超えたら0からとなるので

0-1が2回続く情報となります

それが2回続くので、2回タイリングされるという事になります

 

スクロールの時と同様、UVに接続している数値の場所にある

画像の情報を持ってきます

 

f:id:tktknkyo:20200406205101p:plain

最後に歪みの処理についてです。

歪みはスクロールの派生のようなものとなります。

 

まず前提として、画像は0-1の情報となります

そして、0-1のグラデーションになっているUV座標の情報に

この情報を足し算すると

元の画像によって数値が大きく変わります

 

定数を足し算する場合、単純に上下左右に動くだけですが

ここに、画像を使うことで、全てのピクセルでバラバラな方向に動くことになります

画像を使うことで、これを不規則に行うことで

画像を変化させていきます

 

f:id:tktknkyo:20200406205703p:plain

歪み画像を足し算したものを、RとGで分解するとこのようになっています

元の綺麗なグラデーションではなくなっているのが解ると思います。

このズレた情報の場所にある画像の情報を

取得してくることになります

 

f:id:tktknkyo:20200406205936p:plain

これは解りやすく小数点の情報のみ取得したものになります

 

f:id:tktknkyo:20200406210037p:plain

Gチャンネルの情報の場合、例えばこの赤い部分などがかなり白くなってると思います

そして白い部分というのは

画像の下の部分を取得してきます。

つまり、中央付近にある、この白い部分はかなり下の部分を持ってくることとなります

 

 

f:id:tktknkyo:20200406210258p:plain

この状態で適応するとこのようになります(右上)

かなり左上の画像から変わっていると思いますが

これは画像の情報から、変な場所にあるものを取得しているのが原因です

グレーに近いほど、中央になるので、結果は白く

白や黒に近いほど、外側になるので、結果は黒くなっているはずです。

 

 

 

 

今回はここまでとなります。

色々説明が解りにくいかとは思いますが

マテリアルの大元の基本的な部分は書けたのかなと思います。