moyasiエフェクト館

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


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

【Effekseer】マテリアルの基本

f:id:tktknkyo:20200330205716p:plain

Verは1.50です

 

EffekseerのVer1.5での新機能の一つであるマテリアル方面を紹介していきます

サムネイルは、サンプルに入っているマテリアルの一つです

ここまで長いのを今回作る、というワケではありません。

 

【マテリアルとは】

UE4のマテリアルやUnityのシェーダーのようなものです

これらのツールを使った事がない人向けに簡単に説明すると

画像同士の合成

みたいな感じに最初は考えてもらえば良いかと思います。

 

画像を使うのは必須でないなど、細かい部分は違うので

厳密には違う部分はありますが

最初はそのくらいの認識で良いのかなと思います。

 

【エディタを開く】

EffekseerMaterialEditor

というファイルがあるので、これから開くことができます

f:id:tktknkyo:20200330210640p:plain

 

また、描画共通から、ファイルを選択して

生成、を押してもエディタを開くことができます

こちらから開く場合は、まずマテリアルのファイルを保存する所からとなります

「.efkmat」という拡張子となっています

f:id:tktknkyo:20200330211008p:plain

 

エディタの操作そのものは

ホイールで拡大縮小

全体を動かす場合(パン)は右ドラッグ

ノードの検索は右クリック

 

ノード選択は左クリック

ノードを動かす場合は左のドラッグになります

範囲選択も左のドラッグとなります

 

 

【マテリアルの基本】

 

f:id:tktknkyo:20200330211453p:plain

開くと、最初はこのような縦長のノードが置いてあります

 

f:id:tktknkyo:20200330211913p:plain

この「出力」とあるノードに

このようにノードを繋いでいきます(文字が暗くなっているのは無効化されています)

全てで10種類あります

デフォルト設定だと、3つは暗くなっているので7種類の出力があります

 

最初から覚えようとするとどうしてもややこしいので

最初は上の画像で接続してある

EmissiveとOpacityのみ覚えればいいです

他の8つはある程度慣れてからをオススメします

 

Emissiveは色(RGB)

Opacityは透明度(A)

と考えるのがわかりやすいと思います

Pngとかの画像みたいなものかと思ってもらえれば

 

f:id:tktknkyo:20200330213123p:plain

これはサンプルの画像を適当に繋いだものです

上の画像からRGBのカラー情報

下の画像からAの透明度

この二つが合わさったものが、出力の下の方に表示されています

これが最終結果となります。

 

f:id:tktknkyo:20200330213456p:plain

あとは、ここに色々計算したりしていくだけとなります

 

【実際に作ってみる】

 

とりあえず、マテリアルで定番であるテクスチャ同士の乗算から

 

f:id:tktknkyo:20200330214203p:plain

まず画像自体を出すには、右クリックから「画像参照」というノードを出しましょう

 

f:id:tktknkyo:20200330214248p:plain

右クリックから検索もできます

画像関係であれば「tex」と打つと画像関係の候補がいくつか出てきます

ノード説明のKeyと書いてある部分で検索してきます

 

f:id:tktknkyo:20200330214457p:plain

とりあえず2枚画像を読み込んでみます。

基本的に何でも問題ありません

 

f:id:tktknkyo:20200330214640p:plain

また、「乗算」というノードも出して接続します

ノード同士の接続は、左のドラッグで引っ張ってくると繋げることができます

 

f:id:tktknkyo:20200330214736p:plain

そしてこのように繋げると、画像同士を掛け算したものが

透明度として出力されます

 

Emissiveではないの?と思われるかもしれませんが

エフェクトの場合、基本的に白黒画像を透明度に繋ぎ

Emissive(RGB)は画像ではなくツール側で制御する事が多いです

 

画像同士の乗算というのは慣れない人は解りにくいと思います

(というより自分が最初中々理解できなかった部分です)

画像の色情報はRGBAそれぞれ0~255の値を持っています

そして、画像同士の乗算は、1Pixel毎にそれぞれ乗算する事になります

 

ただし、乗算する際には0~255の数値を0~1に変換してから計算します

中間の128*128の場合

128*128=16384で255よりかなり高い数値になり...ますが

実際は0~255を0~1に変えてからとなるので

0.5*0.5=0.25

そしてその後0~255に変換すると64となります

 

画像の乗算の場合にはとりあえず

片方が真っ白(255)なら変化なし

片方が真っ黒(0)なら真っ黒になる、と覚えるのも良いかなとは

 

f:id:tktknkyo:20200330220307p:plain

Effekseerそのもので色を変える場合

カスタムデータを使います

 

f:id:tktknkyo:20200330220420p:plain

初期はRGとなっているので

左の方に、このようになっている部分があるので

Bにチェックを入れましょう。

 

Effekseerで適応してみましょう

先ほどのマテリアルを読み込みます

 

f:id:tktknkyo:20200330220913p:plain

ただし、カスタムデータはデフォルトだと全て0なので

固定4などに設定して全て1にしてみると、白で表示されてると思います

 

f:id:tktknkyo:20200330221041p:plain

小さかったので5倍にして画像とっています

 

 

 

基本、という事であまり実用的な部分は入れれてないですが

長くなってきていますので一旦ここまでとなります

他にはスクロール、タイリング、歪みなどがあります。