moyasiエフェクト館

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


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

【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

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

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

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

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

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

 

 

 

 

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

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

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