moyasiエフェクト館

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


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

このブログについて

ブログの名前の通り、エフェクトに関係することを上げていこうかと思います

自分がわかる範囲で、エフェクトに関係することであれば何でもいいかな?とは

エフェクト自体の作り方は勿論の事

エフェクトの再生手段や、エフェクトに使うテクスチャ等

 

エフェクト素材の配布も始めました

(http://tktknkyo.hatenadiary.jp/entry/2017/12/31/095520)

 

 

なお、情報はTwitter(moyasi@エフェクト垢 (@torisutamoyasi) | Twitter)

でも出していたりするので、興味のある方は是非

Twitterではmoyasiという名前になっていますので、tktkでもmoyasiでもどちらでも呼びやすい方で

 

また、Discordにて「エフェクト交流所」というサーバーというのも作りました

ここは、エフェクトを作ろうとしているor作っている人同士で

相談したり、情報の共有したりするのを目的としております。

discord.gg

 

【SD】HSV空間でカラーを生成する

f:id:tktknkyo:20211113112611p:plain

 

【初めに】

この記事はSubstance Designerを使い

色の制御をRGBではなくHSV(色相、彩度、明度)でしよう、という内容です。

 

HSVについて】

HSVはRGBとは違う制御方法で

・色相(赤とか青とか紫とか)

・彩度(色が鮮やかさ)

・明度(色の明るさ)

の三つで制御する方法です、エフェクトとして見た場合

ブルームの処理をかける場合にRGBで青から黄緑に色を変えようとした場合

ブルームでの光り方が変わりやすい、という面があるのですが

HSVの色相のみを動かす場合、このような事が起こりにくくなるので

もうちょっと赤っぽい色にとか、青っぽい色にとか

そういう色のイメージを直感的に操作しやすいメリットがあります

 

調整以外の面としては、虹色を作る場合RGB空間だと制御しにくいですが
HSV空間の場合、色相のみを動かすと自然とこのようなカラフルな色を作りやすいです。

 

なお、この記事では変換する場合の計算式などは載せませんのでご了承ください。

 

 

HSVの変換自体をしてみる】

 

f:id:tktknkyo:20211113113953p:plain

SDでつくる場合、PixelProcessor用の関数として、変換用のものがあらかじめ用意されています。

RGBからHSVではなく、HSVからRGBへの変換です。

最終の出力としては、RGB空間となります。あくまでHSV空間で色の制御をするだけです。

 

f:id:tktknkyo:20211113114450p:plain

Float3から数値を入れると、それだけで変換してくれます

なお、3チャンネルの場合、アルファが0になっていると真っ黒に表示されたりするので

出力時には4チャンネルに変換しましょう。

 

これだけでHSVで色は作れます...が

単色だけの画像...一体何に使うのでしょうか?

 

というわけで、ここからサムネイルのようなテクスチャを作る為の機能を増やして行きます。

 

【色幅などを作る】

 

そもそも何故単色になるのかという部分ですが

入力している3つの情報が、それぞれ固定の数値の情報でしか無いからです。

なので色幅を持たせる場合、この三つの色相、彩度、明度の情報を

単体の数値ではなく幅を持たせる必要があります。

数値の幅をどうやって持たせるのか?という部分もありますが

PixelProcessor、というよりSDの処理として

全てのピクセルに対して色情報の数値が全て入っているという処理になっています。

 

先ほどの定数を入れているものは、64*64の画像と想定すると

4096のピクセル全てに同じ数値が入っていることになるので、ここの数値を場所事に変える必要があります。

 

f:id:tktknkyo:20211113121106p:plain

PixelProcessorはGetFloat2にて$posという変数を取得してくると

横と縦(縦はYチャンネルに入っています)の座標を数値(色)として出力してくれます。

 

f:id:tktknkyo:20211113121537p:plain

色相に先ほどの$posから取得した情報を入れると

このようなカラフルな色が出力されてきます。

 

これてサムネイルのような画像自体が作れるようになります。

色相、彩度、明度、これら全てにこのようなグラデーションの情報を入れると自由に作れるようになります、が制御がややこしい部分もあります。

 

ここだけだと、色相が一周してしまい、緑要らないとか青要らないとなっても、全部引っ付いてきます。

 

f:id:tktknkyo:20211113122251p:plain

それぞれ端の制御をする場合は、Lerpなどを使うと良いです。

これにより、右端と左端の色相を自由に弄ることが可能です。

これを、彩度、明度にも入れると、かなり自由に色を作ることが出来るようになります。

一つ注意点として、負の数値は対応していないので

f:id:tktknkyo:20211113122633p:plain

このように、小数点以下の数値のみ取得するようにしておくと利便性が上がります。

この計算としては、1で割った余りを取得するというものです。

 

 

【Gradient(Dynamic)で更に制御する】

若干話題かわるかもしれないですが、Gradient(Dynamic)を使うと更に使い勝手がいいものがつくれます。

 

f:id:tktknkyo:20211113123101p:plain

先程までの手段だと、左右や上下のグラデーションのみでしたが

このノードを使うことで、色情報を別のグラデーションに載せることができます。

 

 

 

 

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

カラフルなテクスチャを作る機会はそう多くない気もしますが

黄色、オレンジ、赤のようなグラデーションも使えるので

必要そうな時に思い出してもらえればと

 

【UE4】デカールエフェクト、制御編

f:id:tktknkyo:20210504161850p:plain

Verは4.25です

 

【初めに】

この記事は

tktknkyo.hatenadiary.jp

 

この記事の続きのような内容となります。

 

 

【問題点や制御の考え方】

基礎編でやった内容でデカールのエフェクトの発生のみは出来ました...が

実際に組み込む場合は問題点などもあります。

 

f:id:tktknkyo:20210504173538p:plain

このようにタイムラインで制御していますが

タイムラインの難点として、終わる前に再度処理が走ると、そちらで上書きされてしまいます

なので、アクターの消える処理の前に再度この処理が発生すると、消えずに延々と残り続けてしまいます。

 

この部分をちゃんと制御するには、アクターとして分ける必要があります。

 

f:id:tktknkyo:20210504203134p:plain

こちらは、自身が使っているキャラクターBPの処理となります

単純に攻撃が発生するときに右側に処理が流れていくという内容ですが

タイムラインをこのキャラクターBp自体に入れるのではなく

右側にあるSpawnActorの中でタイムラインを走らせています。

 

処理のイメージとしては、タイムラインを複数発生させるのではなく

タイムラインが一つ入っているアクターを複数発生させます

 

【処理を作っていく】

今度はタイムラインを含むデカール情報なので

Decal用のではなく、普通のActorクラスのBPを作ります。

 

f:id:tktknkyo:20210504203848p:plain

処理の内容自体は基本同様なのでそのままコピーでも大丈夫です。

また、子ブループリントを使う事で

編集できるようにしてある変数は、そちらから調整する事も可能です。

 

何を編集出来るようにするのか、については用途によって変わりすぎるので

今回はデカールのマテリアルのみ変えれるように処理を組んであります。

 

SpawnActorに接続されている紫の変数がデカールの変数となります

f:id:tktknkyo:20210504204226p:plain

変数の型はDecal Actorのクラス参照となります。

変数を作ったら、外部から編集できるようにするのを忘れずに。

 

f:id:tktknkyo:20210504204357p:plain

その後、作ったBPを右クリックからの「子ブループリントクラスを作成します」から子ブループリントを作ります

 

f:id:tktknkyo:20210504204511p:plain

中を開くと、デフォルトの所に先ほど作った変数が出ていればここから編集できます

 

あとは、この作ったBPをSpawnActorで発生させると、自動で消えていく処理まで作られていると思います。

 

 

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

【UE4】デカールエフェクト、基礎編

f:id:tktknkyo:20210504161850p:plain

Verは4.25です

 

【初めに】

今回はデカールエフェクトについてです。

いろいろ詰めると長くなるのが解りきっているので、ある程度まとめて記事を分けていきます、ご了承ください。

 

そもそもまずデカールエフェクトについて、というよりも「デカール」について

 

f:id:tktknkyo:20210504162458p:plain

アクタを配置、ビジュアルエフェクト、の中にあるデカールをレベル上に配置するとこのようになると思います。

マテリアルを上から平行投影でシールのように貼り付ける。

大きいメリットとして、地形の形状にそって描画をすることが出来ること。

 

これにより、地面から少し浮いてしまうことや、地面の中に突き刺さってしまう

という事を回避できます。

 

エフェクトとしての用途であれば、武器を地面に叩きつけたときの地割れ、ひび割れであったり

キャラクターの足元に出る魔法陣などが代表的です。

 

 

なお、今回の記事はBPでの制御をメインとしています。

 

 

【準備】

まずは必要なものの準備として、デカール用のマテリアルとBPを作ります。

 

f:id:tktknkyo:20210504163336p:plain

マテリアル側での準備としては非常にシンプルで

Material Domainを「Deferred Decal」に

Blend Modeは「Translusent」にします

BlendModeはこれでないといけないわけではないですが、今回はTranslusentにしておきます。

 

f:id:tktknkyo:20210504163647p:plain

また、何も設定していないとそもそもデカールが見えないのでなにか入れておきましょう。

また名前を指定して制御するので

RGBの色を「Color」アルファを「Alpha」にしておきます。

また動かす部分はScaleParameterやVectorParameterにしておきましょう

今回は色とアルファを制御できるようにしています。

 

f:id:tktknkyo:20210504164435p:plain

色とか数値は弄っていますが、この時点でそのままマテリアルをレベルに配置できます

確認のために一旦此処で配置してみるのが良いかと思います。

 

 

次にBPです

デカール用のBPを検索して作っても良いのですが

f:id:tktknkyo:20210504164952p:plain

レベルに配置したマテリアルから、このボタンを押してBpを作ってしまうのが、検索の手間も省けて早いと思います。

検索して出す場合はDecalと打つと直ぐ出てきます。

 

 

f:id:tktknkyo:20210504165311p:plain

ここで作られたBPをそのままレベルに配置すると、このようになります。

青の大きい矢印がデカールを貼る向きであり

それが横に向いています、環境によるものかもしれませんが...

 

準備としてはここまでとなります。

 

 

【各種制御】

ここからは実際に発生させていきます

 

f:id:tktknkyo:20210504170627p:plain

デカール用のBPを発生させる処理自体はSpawnActorのActorにデカール用のBPを設定します。

大きさや角度は今回は固定にしていますが、発生位置はプレイヤーキャラの座標をとってきています。

 

発生そのものは至ってシンプル

 

f:id:tktknkyo:20210504172313p:plain

次にMIDによる調整

SpawnActorのReturn Valueから検索していくとスムーズにノードが出てくると思います。

右側にある「Set Scalar parameter Value」などで、マテリアル側で設定している数値を調整出来ます

「Parameter name」の名前で判断するので、マテリアル側で付けた名前は覚えておきましょう。

「Create Dynamic Material Instance」ノードからでないと

「Set Scalar parameter Value」などには繋げれないのも注意です。

 

この時点で、色や透明度をBP上で設定できるようになりました。

 

 

f:id:tktknkyo:20210504173538p:plain

次は発生から消えるまでの処理

 

一番最初にSequenceというノードが増えていますが

これは単純に上から順番に処理を流しているだけです。

やっている事としては、Alphaを制御している数値をタイムラインで調整している、という事です。

 

注意として、PlayではなくPlay from Startに繋ぐという事

Playは、前回止まったところからの再スタートとなるので、基本的にはPlay from Startに

そしてUpdateは何度も処理が発生する

ここからの出力をSpawnActorに繋いでしまうと、大量のデカールが出続けることになるので、意図しない場合は注意したほうがよいです。

 

最後に、FinishedからDestoy Actorで、タイムラインが終わったらデカールを消す処理を入れて完成です。

 

 

今回はここまでとなります、ここまででデカールエフェクトとして作れるとは思います。

細かい制御周りはまた次の記事で書ければなと。

乗算ではなく減算で合成するあれこれ

f:id:tktknkyo:20210125225518p:plain

今回は特定のツールの話というわけではありません

なので、ツールを問わずに影響のある内容だとは思います。

 

【初めに】

 

エフェクトではシームレス(繋ぎ目のない)テクスチャと

●などの形状を乗算して使う事がよくあります。

f:id:tktknkyo:20210125225841p:plain

非常に定番なのはこのような

形状と、ディテール用のテクスチャをそれぞれ乗算するという手法

白い部分だけ映るという、計算結果としては、分かりやすい手段な事に加え

 

f:id:tktknkyo:20210125230049p:plain

ディテール用のテクスチャ同士の乗算や

同じテクスチャでも、タイリング数のみ変えたものの乗算でディテールを細かくしたりもできます。

同じテクスチャを使う場合であれば、使うテクスチャの数も増えないというメリットもあります。

 

乗算、いわゆる掛け算にはなるのですが

こういう場合での乗算は主に暗くする場合に使われます。

そして減算はそのまま引き算なので、当然暗くなります。

 

ではこの二つの違いの部分について色々と書いていきます。

 

 

【原理的な内容】

 

原理そのものは非常に簡単で

両方とも普通の計算式でしかありません

例えば1に対して0.5の場合

 

乗算であれば

1*0.5=0.5

 

減算であれば

1-0.5=0.5

 

で変化はありません

ですが1の部分や0.5の部分の数字か変われば当然結果は変わってきます。

画像同士の合成でも、これがそのまま当てはまります。

(画像同士で想定する場合、両方0-1の数字で考えてください)

 

【色々違い検証】

 

f:id:tktknkyo:20210125230956p:plain

まずは乗算でよく使う形状を取るための乗算

乗算は明るい部分、減算は黒い部分が残るので

減算する場合は白黒を反転させましょう。

 

 

f:id:tktknkyo:20210125231131p:plainf:id:tktknkyo:20210125231159p:plain

左が乗算でしたもの

右が減算でしたもの

 

同じ画像ベースでしている場合、中央を抜いてきているのは同じではあるが

結果としてはこのような違いがある。

乗算の方が、合成に使った円の形状が見えやすい

 

理由としては、先ほどの計算式で当てはめる場合

減算でのみ真っ黒になっている部分というのは

計算でいえば0.5同士の部分というのが近いと思われる。

 

乗算は0.5*0.5=0.25で

薄いながらも灰色がしっかり残っているが

減算は0.5-0.5=0で

完全に真っ黒になる

 

f:id:tktknkyo:20210125231807p:plain

つづいてノイズ同士の合成の場合

 

f:id:tktknkyo:20210125231855p:plain

ノイズ同士を乗算した結果がこちら

暗めではあるが、全体にノイズがしっかり残っている

 

 

f:id:tktknkyo:20210125232018p:plain

つづいてこちらが減算したもの。

合成する側の白黒反転は入れたものの

 

非常に暗いです、当然選んだテクスチャが悪かったなどなどはあると思いますが...

その辺は実際に合成してみて色々試すしかないという部分は当然ありますが

 

基本的に減算は、真っ黒な領域が出てきやすいです。

真っ黒=0なので

減算したあとに、定数で乗算しても真っ黒のままです

そうなってくると、どうしても都合の悪い部分も出てきたりします。

 

そしてなによりUE4のマテリアル内などでする場合だと負の数にいきやすいです。

そうなってくると、定数で乗算するとどんどん暗くなります

ブルームで発光させたいのに一部はむしろかなりくらいなど、そういうのが起こります。

Clamp入れれば解決しますけど、あくまで一つの例として

 

f:id:tktknkyo:20210125233153p:plain

個人的に好きな例としては

雲模様とグラデーションで減算して炎のベースを作るものなどがあります。

これは小さい黒い領域の出やすい減算なのでやりやすい所もあると思います。

 

 

ゲームエンジン内で減算を使う場合は色々処理で面倒な部分があるのが正直な所ではありますが

画像そのものを作る段階で、形状を出したい場合であれば減算は中々便利な手段だと思います。

 

 

【差の絶対値について】

※2020/01/30追記

 

記事を完成した後でしたが

差の絶対値も触れておいたほうが良いと思ったので追記しておきます。

 

差の絶対値、PhotoShopなどにある合成方法の一つで

計算としては【引き算した後に負の数を正の数に変換したもの

 

負の数を正の数への変換は内部的にはおそらく二乗してから平方根だと思われます

(内部の計算式は自分で実装する場合以外は気にしなくてもいいです。)

 

f:id:tktknkyo:20210130183904p:plain

まずはグラデーションと雲模様の合成結果

雲模様から、グラデーションで差の絶対値で計算しています。

 

 

f:id:tktknkyo:20210130183951p:plain

先ほどの画像では解りにくいと思うので

拡大したものがこちら

 

減算の結果は上の部分は大体真っ黒になっていましたが

その黒い部分も白くなっています。

 

ただ、これではどのようなものに使うのか?が解りにくいと思うので

もう一つ例を出します

f:id:tktknkyo:20210130184311p:plain

三つ縦に並んだものの、一番下が差の絶対値での結果です

今度は〇の形状のものを使用しました。

 

そして一番右にあるのは、解りやすく色を極端にしたものです

 

f:id:tktknkyo:20210130184500p:plain

拡大するとこのような模様が出来上がっています。

ノイズの影響で四角に近いですが

計算に使った〇の形状と似た形状の、ノイズの掛かったラインが出来ているのが解ると思います。

差の絶対値を使う場合のメリットとしては

ノイズの掛かった細い筋などを作りたいときに便利な手法の一つです。

 

使う場面としては、減算や乗算に比べれば少ないとは思いますが

このような細い筋のようなものを作りたいときは、試してみるのもありだとは思います。

 

一つ注意としては、差の絶対値の場合

計算途中に負の数を持つことが必須になります

ツールによってはやりにくい場合もあると思うので、そこは注意してください。

 

SubstanceDesignerで差の絶対値を使う場合は以下の記事を参考にしてください。

tktknkyo.hatenadiary.jp

 

 

 

 

 

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

ちょっと変わった内容になりましたが、また何か思いついたら定期的に記事を書いていければなと。

 

 

 

【Photoshop】オーラ系のテクスチャを標準機能で作る

f:id:tktknkyo:20210109151525p:plain

 

 

【初めに】

Photoshopでエフェクトでよく使うオーラ系のテクスチャを作ろう、という内容です。

プラグインにその手の機能はありますが、今回は標準機能だけでできる内容です。

 

また、サムネイルはやや雑ですが、この記事は手描きがメインとなるので

どのくらい綺麗で使いやすいものができるかは、人によってだいぶ違うと思います

 

 

【実際に作っていきます】

 

f:id:tktknkyo:20210109152058p:plain

まず、黒塗りつぶしてからの雲模様のレイヤーを二つ作ります

そして上のレイヤーを「比較(暗)」で合成します。

雲模様は違う模様が必要なので、雲模様を作ってからのコピーは不可です

 

とはいえ、この部分はあくまでも目安で使うので、必ず必須というわけではありません。

 

f:id:tktknkyo:20210109152248p:plain

その合成結果はこのようになります。

そこまで変化があるわけでありませんが、赤枠の部分にひっそりと筋みたいなのが出来ていると思います。

 

一応似たようなディテール自体は、雲模様1を適用後の雲模様2でも出来るのはできます。

今回大事なのは、レイヤーの合成でこのディテールを作ったことです。

 

f:id:tktknkyo:20210109152523p:plain

そして今回は、三つの赤枠の部分から、一番右の部分をなぞるように

白で、両方のレイヤーに塗りました

どちらかのレイヤーを白で塗るとわかりますが、筋のようになっていた部分が若干動いたり明るくなったりします。

 

あとはこの要領で、白や黒を塗っていくだけです

 

f:id:tktknkyo:20210109153317p:plain

コツの一つとしては、このような白と黒の緩急の激しい場所を作りたい場合

真ん中の左右(もしくは上下)が黒くなっていますが

片方のレイヤーで右側を黒く塗り、もう片方のレイヤーでは左側を黒く塗る

というように、黒い場所が二つのレイヤーで被らないようにするといいです。

 

暗い方の色をとってくるので、片方だけ黒かったら結果は黒くなります

逆に白色を足す場合は、両方のレイヤーを白く塗ります

 

ただ位置が一緒だと、そのまましろ塗っただけになるので

そこから、二つのレイヤーで別の場所に黒色を足していくといいです

 

 

とはいえ、この部分はおそらく普段から手描きに慣れている人の方が私より慣れやすいと思います。

 

 

 

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

 

 

【Niagara】スクラッチパットで三角関数を使った発生位置の制御

f:id:tktknkyo:20210103164544p:plain

Verは4.26です

 

 

【初めに】

発生位置に三角関数を使うやり方

以前にも似たような内容は書きましたが

tktknkyo.hatenadiary.jp

 

こちらの記事は

既存の「Niagara Dynamic Imput Script」

が主体のやり方だったので、別の手法のやり方として

 

とくに以前のVerではなかったスクラッチパットの機能のおかげで

作りつつ、アセットにもできるような機能も増えたので

今後はスクラッチパットで作る機会も増えそうなのでこの機会に

 

 

【スクラッチパットについて】

いわゆるモジュールを作るのと同じノードベースで作れる機能ではありますが。

こちらは、Niagaraのエミッターやシステム編集中でも新しく作り

それをそのまま適応するのもそうですが

アセットとして出力することもできます

 

試しで作ってみて、汎用性があったらアセット化して

そうでない場合はそのエミッターやシステム内でのみ使う、という選択が可能です。

 

 

【下準備】

今回はあくまでスクラッチパットの機能の記事なので

f:id:tktknkyo:20210103165434p:plain

エミッターはテンプレートのこれから作っていきます。

 

上に動く動きがついているので、それでわかりにくい場合はチェックを外していきます。

座標は最後に上書きすればいいので、必須ではありません。

 

【実際に作っていきます】

f:id:tktknkyo:20210103165641p:plain

パーティクルのスポーンのところの+ボタンから

下の方にある「新しいスクラッチパットモジュール」をクリックして追加します。

 

f:id:tktknkyo:20210103165747p:plain

そうすると、このようなものが生成されるはずです

 

f:id:tktknkyo:20210103165857p:plain

その後、必要な情報を入れるためのFloatのパラメータを二つ生成します

名前は任意でいいですが、今回は「Length」と「Rot」としました。

 

 

f:id:tktknkyo:20210103170015p:plain

作ったパラメータ二つをマップ取得に登録します。

右下の+ボタンから追加できます。

 

f:id:tktknkyo:20210103170211p:plain

Rotの出力からSin(Degrees)とCosine(Degrees)に接続します。

その後Vectorに変換します。

 

このVectorのノードは3を押しながら右クリックでショートカットで作成できます。

普通にVectorと検索しても出すことができます。

 

f:id:tktknkyo:20210103170535p:plain

あとは出力したVectorとLengthと名づけたFloatのパラメータをMultplyで乗算します。

最後のMapSetは、座標としてそのまま使う場合はパーティクルのPositionに

ほかに計算をする場合は、自身で任意のパラメータに接続してください。

 

当然ですが、直接Positionに繋ぐ場合は、レベルの中心位置基準になるので注意してください。

 

 

f:id:tktknkyo:20210103170916p:plain

最後に、エミッター側で数値を入れておきましょう

発生位置を変えていきたい場合は

NormalizeLoopAgeなどと乗算すれば完成です

 

f:id:tktknkyo:20210103171016p:plain

Velocityなどの移動のモジュールを無効にすれば

このように発生位置がわかりやすくなると思います。

 

 

 

 

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

今回は分かりやすそうなテーマとしてSinとCosをつかったうずまきの形状にしましたが

四則演算などでできる形状であれば恐らく基本出来ると思います。