moyasiエフェクト館

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


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

【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の記事も増やしていけたらなと思います