【UE4】デカールエフェクト、基礎編
Verは4.25です
【初めに】
今回はデカールエフェクトについてです。
いろいろ詰めると長くなるのが解りきっているので、ある程度まとめて記事を分けていきます、ご了承ください。
そもそもまずデカールエフェクトについて、というよりも「デカール」について
アクタを配置、ビジュアルエフェクト、の中にあるデカールをレベル上に配置するとこのようになると思います。
マテリアルを上から平行投影でシールのように貼り付ける。
大きいメリットとして、地形の形状にそって描画をすることが出来ること。
これにより、地面から少し浮いてしまうことや、地面の中に突き刺さってしまう
という事を回避できます。
エフェクトとしての用途であれば、武器を地面に叩きつけたときの地割れ、ひび割れであったり
キャラクターの足元に出る魔法陣などが代表的です。
なお、今回の記事はBPでの制御をメインとしています。
【準備】
まずは必要なものの準備として、デカール用のマテリアルとBPを作ります。
マテリアル側での準備としては非常にシンプルで
Material Domainを「Deferred Decal」に
Blend Modeは「Translusent」にします
BlendModeはこれでないといけないわけではないですが、今回はTranslusentにしておきます。
また、何も設定していないとそもそもデカールが見えないのでなにか入れておきましょう。
また名前を指定して制御するので
RGBの色を「Color」アルファを「Alpha」にしておきます。
また動かす部分はScaleParameterやVectorParameterにしておきましょう
今回は色とアルファを制御できるようにしています。
色とか数値は弄っていますが、この時点でそのままマテリアルをレベルに配置できます
確認のために一旦此処で配置してみるのが良いかと思います。
次にBPです
デカール用のBPを検索して作っても良いのですが
レベルに配置したマテリアルから、このボタンを押してBpを作ってしまうのが、検索の手間も省けて早いと思います。
検索して出す場合はDecalと打つと直ぐ出てきます。
ここで作られたBPをそのままレベルに配置すると、このようになります。
青の大きい矢印がデカールを貼る向きであり
それが横に向いています、環境によるものかもしれませんが...
準備としてはここまでとなります。
【各種制御】
ここからは実際に発生させていきます
デカール用のBPを発生させる処理自体はSpawnActorのActorにデカール用のBPを設定します。
大きさや角度は今回は固定にしていますが、発生位置はプレイヤーキャラの座標をとってきています。
発生そのものは至ってシンプル
次にMIDによる調整
SpawnActorのReturn Valueから検索していくとスムーズにノードが出てくると思います。
右側にある「Set Scalar parameter Value」などで、マテリアル側で設定している数値を調整出来ます
「Parameter name」の名前で判断するので、マテリアル側で付けた名前は覚えておきましょう。
「Create Dynamic Material Instance」ノードからでないと
「Set Scalar parameter Value」などには繋げれないのも注意です。
この時点で、色や透明度をBP上で設定できるようになりました。
次は発生から消えるまでの処理
一番最初にSequenceというノードが増えていますが
これは単純に上から順番に処理を流しているだけです。
やっている事としては、Alphaを制御している数値をタイムラインで調整している、という事です。
注意として、PlayではなくPlay from Startに繋ぐという事
Playは、前回止まったところからの再スタートとなるので、基本的にはPlay from Startに
そしてUpdateは何度も処理が発生する事
ここからの出力をSpawnActorに繋いでしまうと、大量のデカールが出続けることになるので、意図しない場合は注意したほうがよいです。
最後に、FinishedからDestoy Actorで、タイムラインが終わったらデカールを消す処理を入れて完成です。
今回はここまでとなります、ここまででデカールエフェクトとして作れるとは思います。
細かい制御周りはまた次の記事で書ければなと。
乗算ではなく減算で合成するあれこれ
今回は特定のツールの話というわけではありません
なので、ツールを問わずに影響のある内容だとは思います。
【初めに】
エフェクトではシームレス（繋ぎ目のない）テクスチャと
●などの形状を乗算して使う事がよくあります。
非常に定番なのはこのような
形状と、ディテール用のテクスチャをそれぞれ乗算するという手法
白い部分だけ映るという、計算結果としては、分かりやすい手段な事に加え
ディテール用のテクスチャ同士の乗算や
同じテクスチャでも、タイリング数のみ変えたものの乗算でディテールを細かくしたりもできます。
同じテクスチャを使う場合であれば、使うテクスチャの数も増えないというメリットもあります。
乗算、いわゆる掛け算にはなるのですが
こういう場合での乗算は主に暗くする場合に使われます。
そして減算はそのまま引き算なので、当然暗くなります。
ではこの二つの違いの部分について色々と書いていきます。
【原理的な内容】
原理そのものは非常に簡単で
両方とも普通の計算式でしかありません
例えば１に対して0.5の場合
乗算であれば
1*0.5＝0.5
減算であれば
1-0.5＝0.5
で変化はありません
ですが１の部分や0.5の部分の数字か変われば当然結果は変わってきます。
画像同士の合成でも、これがそのまま当てはまります。
（画像同士で想定する場合、両方0-1の数字で考えてください）
【色々違い検証】
まずは乗算でよく使う形状を取るための乗算
乗算は明るい部分、減算は黒い部分が残るので
減算する場合は白黒を反転させましょう。
左が乗算でしたもの
右が減算でしたもの
同じ画像ベースでしている場合、中央を抜いてきているのは同じではあるが
結果としてはこのような違いがある。
乗算の方が、合成に使った円の形状が見えやすい
理由としては、先ほどの計算式で当てはめる場合
減算でのみ真っ黒になっている部分というのは
計算でいえば0.5同士の部分というのが近いと思われる。
乗算は0.5*0.5＝0.25で
薄いながらも灰色がしっかり残っているが
減算は0.5-0.5＝0で
完全に真っ黒になる
つづいてノイズ同士の合成の場合
ノイズ同士を乗算した結果がこちら
暗めではあるが、全体にノイズがしっかり残っている
つづいてこちらが減算したもの。
合成する側の白黒反転は入れたものの
非常に暗いです、当然選んだテクスチャが悪かったなどなどはあると思いますが...
その辺は実際に合成してみて色々試すしかないという部分は当然ありますが
基本的に減算は、真っ黒な領域が出てきやすいです。
真っ黒＝0なので
減算したあとに、定数で乗算しても真っ黒のままです
そうなってくると、どうしても都合の悪い部分も出てきたりします。
そしてなによりUE4のマテリアル内などでする場合だと負の数にいきやすいです。
そうなってくると、定数で乗算するとどんどん暗くなります
ブルームで発光させたいのに一部はむしろかなりくらいなど、そういうのが起こります。
※Clamp入れれば解決しますけど、あくまで一つの例として
個人的に好きな例としては
雲模様とグラデーションで減算して炎のベースを作るものなどがあります。
これは小さい黒い領域の出やすい減算なのでやりやすい所もあると思います。
ゲームエンジン内で減算を使う場合は色々処理で面倒な部分があるのが正直な所ではありますが
画像そのものを作る段階で、形状を出したい場合であれば減算は中々便利な手段だと思います。
【差の絶対値について】
※2020/01/30追記
記事を完成した後でしたが
差の絶対値も触れておいたほうが良いと思ったので追記しておきます。
差の絶対値、PhotoShopなどにある合成方法の一つで
計算としては【引き算した後に負の数を正の数に変換したもの】
負の数を正の数への変換は内部的にはおそらく二乗してから平方根だと思われます
（内部の計算式は自分で実装する場合以外は気にしなくてもいいです。）
まずはグラデーションと雲模様の合成結果
雲模様から、グラデーションで差の絶対値で計算しています。
先ほどの画像では解りにくいと思うので
拡大したものがこちら
減算の結果は上の部分は大体真っ黒になっていましたが
その黒い部分も白くなっています。
ただ、これではどのようなものに使うのか？が解りにくいと思うので
もう一つ例を出します
三つ縦に並んだものの、一番下が差の絶対値での結果です
今度は〇の形状のものを使用しました。
そして一番右にあるのは、解りやすく色を極端にしたものです
拡大するとこのような模様が出来上がっています。
ノイズの影響で四角に近いですが
計算に使った〇の形状と似た形状の、ノイズの掛かったラインが出来ているのが解ると思います。
差の絶対値を使う場合のメリットとしては
ノイズの掛かった細い筋などを作りたいときに便利な手法の一つです。
使う場面としては、減算や乗算に比べれば少ないとは思いますが
このような細い筋のようなものを作りたいときは、試してみるのもありだとは思います。
一つ注意としては、差の絶対値の場合
計算途中に負の数を持つことが必須になります
ツールによってはやりにくい場合もあると思うので、そこは注意してください。
SubstanceDesignerで差の絶対値を使う場合は以下の記事を参考にしてください。
今回はここまでとなります。
ちょっと変わった内容になりましたが、また何か思いついたら定期的に記事を書いていければなと。
【Photoshop】オーラ系のテクスチャを標準機能で作る
【初めに】
Photoshopでエフェクトでよく使うオーラ系のテクスチャを作ろう、という内容です。
プラグインにその手の機能はありますが、今回は標準機能だけでできる内容です。
また、サムネイルはやや雑ですが、この記事は手描きがメインとなるので
どのくらい綺麗で使いやすいものができるかは、人によってだいぶ違うと思います
【実際に作っていきます】
まず、黒塗りつぶしてからの雲模様のレイヤーを二つ作ります
そして上のレイヤーを「比較（暗）」で合成します。
雲模様は違う模様が必要なので、雲模様を作ってからのコピーは不可です
とはいえ、この部分はあくまでも目安で使うので、必ず必須というわけではありません。
その合成結果はこのようになります。
そこまで変化があるわけでありませんが、赤枠の部分にひっそりと筋みたいなのが出来ていると思います。
一応似たようなディテール自体は、雲模様１を適用後の雲模様２でも出来るのはできます。
今回大事なのは、レイヤーの合成でこのディテールを作ったことです。
そして今回は、三つの赤枠の部分から、一番右の部分をなぞるように
白で、両方のレイヤーに塗りました
どちらかのレイヤーを白で塗るとわかりますが、筋のようになっていた部分が若干動いたり明るくなったりします。
あとはこの要領で、白や黒を塗っていくだけです
コツの一つとしては、このような白と黒の緩急の激しい場所を作りたい場合
真ん中の左右（もしくは上下）が黒くなっていますが
片方のレイヤーで右側を黒く塗り、もう片方のレイヤーでは左側を黒く塗る
というように、黒い場所が二つのレイヤーで被らないようにするといいです。
暗い方の色をとってくるので、片方だけ黒かったら結果は黒くなります
逆に白色を足す場合は、両方のレイヤーを白く塗ります
ただ位置が一緒だと、そのまましろ塗っただけになるので
そこから、二つのレイヤーで別の場所に黒色を足していくといいです
とはいえ、この部分はおそらく普段から手描きに慣れている人の方が私より慣れやすいと思います。
今回はここまでとなります、
【Niagara】スクラッチパットで三角関数を使った発生位置の制御
Verは4.26です
【初めに】
発生位置に三角関数を使うやり方
以前にも似たような内容は書きましたが
こちらの記事は
既存の「Niagara Dynamic Imput Script」
が主体のやり方だったので、別の手法のやり方として
とくに以前のVerではなかったスクラッチパットの機能のおかげで
作りつつ、アセットにもできるような機能も増えたので
今後はスクラッチパットで作る機会も増えそうなのでこの機会に
【スクラッチパットについて】
いわゆるモジュールを作るのと同じノードベースで作れる機能ではありますが。
こちらは、Niagaraのエミッターやシステム編集中でも新しく作り
それをそのまま適応するのもそうですが
アセットとして出力することもできます
試しで作ってみて、汎用性があったらアセット化して
そうでない場合はそのエミッターやシステム内でのみ使う、という選択が可能です。
【下準備】
今回はあくまでスクラッチパットの機能の記事なので
エミッターはテンプレートのこれから作っていきます。
上に動く動きがついているので、それでわかりにくい場合はチェックを外していきます。
座標は最後に上書きすればいいので、必須ではありません。
【実際に作っていきます】
パーティクルのスポーンのところの+ボタンから
下の方にある「新しいスクラッチパットモジュール」をクリックして追加します。
そうすると、このようなものが生成されるはずです
その後、必要な情報を入れるためのFloatのパラメータを二つ生成します
名前は任意でいいですが、今回は「Length」と「Rot」としました。
作ったパラメータ二つをマップ取得に登録します。
右下の+ボタンから追加できます。
Rotの出力からSin（Degrees）とCosine（Degrees)に接続します。
その後Vectorに変換します。
このVectorのノードは３を押しながら右クリックでショートカットで作成できます。
普通にVectorと検索しても出すことができます。
あとは出力したVectorとLengthと名づけたFloatのパラメータをMultplyで乗算します。
最後のMapSetは、座標としてそのまま使う場合はパーティクルのPositionに
ほかに計算をする場合は、自身で任意のパラメータに接続してください。
当然ですが、直接Positionに繋ぐ場合は、レベルの中心位置基準になるので注意してください。
最後に、エミッター側で数値を入れておきましょう
発生位置を変えていきたい場合は
NormalizeLoopAgeなどと乗算すれば完成です
Velocityなどの移動のモジュールを無効にすれば
このように発生位置がわかりやすくなると思います。
今回はここまでとなります。
今回は分かりやすそうなテーマとしてSinとCosをつかったうずまきの形状にしましたが
四則演算などでできる形状であれば恐らく基本出来ると思います。
【UE4】雲模様テクスチャで出来ること
Verは4.26です
【初めに】
エフェクトに使うテクスチャは、いわゆるノイズ系のテクスチャも比較的に多く
そのようなテクスチャだけで、結構様々なものが作れます
が、使い方が解らないとテクスチャが作れてもエフェクトに組み込めないと思うので
単純な例として書いてみます。
【使用するテクスチャ】
ノイズテクスチャをどう用意するのか？もありますが
今回は定番のPhotoshopで作ったものを使います
カンバスサイズを1024*1024にして、黒で塗りつぶしてから、フィルターの雲模様を掛けます
今回はあくまで一例なので、使用するテクスチャが変われば結果も変わってきます。
また、どのように変化するのかを見せるために、
このような単純なグラデーションのテクスチャも使用します。
【乗算】
これはUE4のプレビューにある球体に貼ったものです
単純にMultply（乗算）を重ねただけです。
使う場面としては、エフェクトにラインが欲しいけど、そのままだと、ラインが目立ってしまう場合などに
このようなテクスチャを乗算することで、目立ちすぎるのを防ぎます。
また、ノイズテクスチャに対して、Power（べき乗）を加えることで、描画面積を操作することもできます。
このようにして描画面積の調整もできます。
【歪み】
サムネイルのようなのをつくる場合は、この歪みの機能を利用します。
UVsに接続している情報で表示されるのが変わってきます。
極座標がメインの記事ではありますが、この機能自体に関する部分が気になる方は
この記事を参考にしてください。
先ほどの状態から、タイリング数や歪みの強度を変えたものがこちら
ノイズテクスチャを横にタイリングしているので、若干ギザギザした形状が作れます
（今回はこのギザギザが欲しいので横にタイリングする例を）
プレビューで球体に張るとこのようになります。
移動量がやや強い印象がありますが、それは手軽に調整できるので
必要なものに応じて調整しましょう。
また、Pannerというノードでスクロールしつづける処理を作れます
この処理をノイズテクスチャに対して使うことで
上に流れ続ける処理が作れます
単純に雲模様を使う場合、地面から出てくる水の柱や、炎などでは便利なやり方の一つです。
またオーラ系のテクスチャを用意できれば、光魔法や闇魔法のような、エネルギー系のエフェクトにはおおよそ流用出来ると思います。
この辺はどのようなテクスチャを使うかで非常に変わってくるので。
ノイズテクスチャがあれば、このような処理を試してみるとエフェクト作り始めた場合には非常に便利だと思います。
今回はここまでとなります。
既にエフェクト作ってる人ならおおよそ知ってるような内容だとは思いますが
初歩的な内容として
【SD】Pixel Processorでブレンドノードにない合成を作る
Verは2019.1.3です
【初めに】
画像同士を混ぜたりする合成方法
SubstanceDesignerの場合は、基本的にブレンドノードを使いますが
例えばその場合に、Photoshopなどにある合成方法の全てがあるとは限りません。
その場合はブレンドノードによる合成はできませんが
計算の内容さえ知っていればPixel Processorで作ってあげることができます。
【Pixel Processorについて】
このブログでもたまに書いている記事の中に入っていることもありますが
主に四則演算などを使って編集するものだと考えてもらえればいいと思います。
【実際に作っていきます】
とりあえず合成したいものを同士を繋ぎましょう
その後、パラメータのこの部分から中に入ります
入ると、Float4のノードが一つだけ出てると思います。
そのノードは必要ないので消しても問題無いです。
そして「Get Float2」ノードを出して$posというパラメータを設定しましょう。
このFloat2は座標の情報となります。
次にSample Grayノードを出して繋げます。
ここのinputは、このノード自体に繋いでいる情報から、何を取るかを取得します。
今回の場合0には雲模様、１にはグラデーションが入っています。
その後は、自分のしたい合成方法の計算を入れていきましょう。
今回は差の絶対値をした場合です。
また、Pixel Processor内では負の数値や１を超える数値も扱う事ができるので
計算の途中でこれらを超える場合は、ブレンドノードだけでなくPixel Processorを使とスムーズに計算が出来ると思います。
今回は短いですがここまでとなります。
【Niagara】DynamicParameterの動的パラメータを16個使う方法
Verは4.25です
【初めに】
UE4でエフェクトを使う場合に便利な「DynamicParametr」
カスケードでも便利ですが、Niagaraだと特に改造などしなくても、16種類までパラメータを扱えます（DynamicParametの４つのピン*四つのDynamicParametr）
そもそもDynamicParameterとは？という方は
この記事を先に見るのをオススメします。
そもそもNiagaraでDynamicParameterどうやって使うの？という方は
この記事を先に見るのをオススメします。
【Materialの設定方法】
DynamicParameterを選択後、詳細の部分はこのようになっているはずです。
一番下の「Parameter Index」は0～3までの数値が入ります
ここでどのDynamicParameterかを判断するので
16種類の動的パラメータを使う場合は、DynamicParameterを４つ出して
それぞれ0，1，2，3と設定しましょう。
それぞれ別に設定すると、パラメータもそれぞれ別の名称を設定することができます。
Indexの数値が同じものがあると、パラメータ名を変更すると、連動して変わります。
【Niagara側の設定】
Niagara側の設定としては
「Dynamic Material Parameter」のモジュールのここのチェックを入れるだけで完了です。
デフォルトだと0にのみチェックが入った状態でモジュールが作られます
きちんとマテリアルのを認識していれば
ここの名前も、マテリアルで設定した名前で出てきます。
出てきていない場合は、右上にあるボタンで更新しましょう。
ここを出してからマテリアルのみ変えた場合だと、名前は自動で更新はしてくれません。
ただここはカスケードでも同様なので。
カスケード触ってた方なら特に困ることはないと思います。
今回はここまでとなります。
場所が少し解りにくいという程度でしかないので、そんなに書ける内容が多いわけではありませんね...
