【Effekseer】マテリアルの基本2(タイリング、スクロール、歪み
Ver1.50となります
また、この記事は
この記事の続きとなります
【初めに】
この記事では、タイリング、スクロール、歪みといった
画像そのものに対する処理などの内容を書いていきます
とはいえ、複雑なものではないので
どういう処理になっているのか、の部分も後半に触れていきます
【処理の内容】
上に書いたとおり、処理そのものは非常に簡単
これで上から
タイリング、スクロール、歪み
の処理となります
スクロールは静止画だと解りませんが、左上に動き続けています。
ただ、現段階だとエフェクトに合わせて数値を変えたりする手段が無いので
調整をできるように組み直していきます。
(スクロールの処理は移動UV座標という専用ノードがありますが、今回は解説用なので使いません)
【タイリング、調整】
これが2つタイリングしている状態となります
これを3回タイリングさせる場合は、このようになります
左下の数字のノードが、そのままタイリング数となります
ノードの上にある文字が、ノード名なのが基本ですが
この数字のノードは定数ノードといいます
タイリング数を変える場合
UV座標のノードに、掛けた数値だけタイリングの処理が行われます
(UVとあるピンへの接続は忘れずに)
横と縦を別々のタイリングをさせる場合は
このように繋ぎます
とりあえず、UV座標のノードと掛け算すれば、タイリング数を変えることが出来ます。
【スクロール、調整】
こちらがスクロールの処理ですが
タイリングでは掛け算でしたが、こちらでは足し算となります
静止画では判断できませんが、このようにすると
スクロールの速度が1/4になります
左下の定数ノードの数値がそのまま速度となります
横と縦でスクロールの速度を変えたい場合は
このように変えます
タイリングと同様、縦と横を別にしたい場合は
要素結合というノードを使っています。
【歪み、調整】
歪みを使った例ですが
この場合、動きが大きいので、そもそもどういう事が起こっているのかが解りにくいと思います
こうすれば少しは解りやすいでしょうか...?
左下の画像の直後に低い数値(今回は0.2)を掛け算する処理を追加しています
歪みは、使っている画像に対して
定数を掛け算すると、それに応じて強さが変わります。
【調整用パラメータを外に出す】
サンプルに入っているマテリアルを開くと
このように、タイリング数などを
Effekseer上から調整できるようになっているものがあります
この仕様の部分を作っていきます。
とは言っても、これもすぐに終わります
このパラメータとある部分のパラメータ1~4が
基本的に使うものになると思います
例えば、このようにすれば、Effekseer上から
歪みの強度をマテリアル毎に変更する事が出来ます
一々マテリアルを個別に作らなくても
一部分だけ数値を変えた差分が欲しいなどの場合は、非常に重宝します。
画像のパラメータは、画像にある「パラメータ画像」がそれになります
ただしパラメータ画像は、そのままでは使えません。
画像参照ノードと合わせて使うことになります
これはパラメータ1~4やパラメータ画像の設定部分となります
一番上の名称は、このマテリアル上で表示される名前となります
ただし、ここには日本語は入力出来ません。
その次の優先度、これはEffekseer上でパラメータが表示される優先度となります。
数値が小さいほど上になります
次のVとあるのは、デフォルト値となります。
また、マテリアルを編集する画面での数値にもなるので
できれば設定はしておいたほうがいいです
次の言語はそのままですね
概要に書いておくと、Effekseer上ではこちらの名前で表示してくれます。
日本語で表示したい場合は、こちらにパラメータの名前として書いておくと便利です。
次の詳細は、Effekseer上でカーソルを合わせたときに表示される説明となっています。
パラメータとしては、細かく制御が可能なカスタムデータ
というものも用意されています
こちらは、エフェクトの途中で数値を変えたりなどもできる情報です
RGBAの色の情報などにはよく使います
カスタムデータは、下の方の別の場所に出てきます
他のパラメータとは位置が違いますので、そこは注意してください。
【原理的な話】
ここから、タイリングやスクロールなんかの、原理的な部分になります。
知らなくても、最初は特に問題ないと思いますが
自分で処理を作ったりする場合、知ってると色々便利にはなるのかなと思います。
タイリングでも、スクロールでも、歪みでも
使うことになるこのUV座標というノード
中身はこのようになっています
Rチャンネルの横のグラデーションと
Gチャンネルの縦のグラデーションになっています
そして黒や白は、数値で表すことが出来ます
0は黒
0.5がグレー
1が白
つまり黒から白のグラデーションは0から1になっているという事になります
Rは横のグラデーション
Gは縦のグラデーション
これが、そのまま表示する座標となります。
また、右端や下端が1になりますが、それを超えた場合はどうなるのかというと
小数点以下のみ使われます。
(※画像参照ノードの詳細をClampにしている場合、1を超えると強制的に1となります)
例えばこの場合、UV座標から0.5を加算しています
UV座標は0~1のグラデーションを作るノードなので
0.5を加算する事で0.5~1.5となります
左上はRGが両方0.5になります
本来RGが0.5の場所は真ん中になります
なので、画像の真ん中の部分が左上に来るようになっています
UVの接続する情報は
所謂読み込んだ画像の、どの場所を表示するのかを定義します
当然ですが、ここに定数を入れると、画像からその場所を取得し
その色を全体に表示します
また、これがスクロールの原理となっています
こちらのスクロール用に作った構成
時間ノードは、時間に応じて数値が増えていくノードです
つまり数値がどんどん増えていくわけです
その情報を、UV情報に加算しているので
表示する場所が動き続けることとなります
0.1、0.2と加算されて行く事に
画像の表示する座標を少しづつ、ずらしていっているワケです
また、掛け算するとタイリング数となるのも
原理は一緒になります
この場合UV座標を2倍します
元々が0-1のグラデーションなので
0-2のグラデーションになります。
更に、小数点の情報を座標として使用するので
1を超えたら0からとなるので
0-1が2回続く情報となります
それが2回続くので、2回タイリングされるという事になります
スクロールの時と同様、UVに接続している数値の場所にある
画像の情報を持ってきます
最後に歪みの処理についてです。
歪みはスクロールの派生のようなものとなります。
まず前提として、画像は0-1の情報となります
そして、0-1のグラデーションになっているUV座標の情報に
この情報を足し算すると
元の画像によって数値が大きく変わります
定数を足し算する場合、単純に上下左右に動くだけですが
ここに、画像を使うことで、全てのピクセルでバラバラな方向に動くことになります
画像を使うことで、これを不規則に行うことで
画像を変化させていきます
歪み画像を足し算したものを、RとGで分解するとこのようになっています
元の綺麗なグラデーションではなくなっているのが解ると思います。
このズレた情報の場所にある画像の情報を
取得してくることになります
これは解りやすく小数点の情報のみ取得したものになります
Gチャンネルの情報の場合、例えばこの赤い部分などがかなり白くなってると思います
そして白い部分というのは
画像の下の部分を取得してきます。
つまり、中央付近にある、この白い部分はかなり下の部分を持ってくることとなります
この状態で適応するとこのようになります(右上)
かなり左上の画像から変わっていると思いますが
これは画像の情報から、変な場所にあるものを取得しているのが原因です
グレーに近いほど、中央になるので、結果は白く
白や黒に近いほど、外側になるので、結果は黒くなっているはずです。
今回はここまでとなります。
色々説明が解りにくいかとは思いますが
マテリアルの大元の基本的な部分は書けたのかなと思います。