第1回 サブスタンスワークフロー会 にて登壇してきました！
タイトル通り、第1回 サブスタンスワークフロー会 にて登壇させてもらいました。
こちらのイベントですね。
後日公開としていた、スライドとSDのファイルを公開します。
上のファイルがスライドで
下のファイルがSDのファイルとなります。
【Niagara】BPで動的にNiagaraを制御する
Niagaraにて、BPと連動する事で、数値を動的に変える方法を一つ紹介します。
バージョンは4.22.0です。
まずは確認用のデータを作ります。
NiagaraSystemから
Create a new system from a set of selected emitters
から
Fountain
を選択してNiagaraSystemを作ります。
上に向かってparticleが放出され、重力によって下に落下する動きのものが、生成されています。
ただ、このままでは若干解りにくいので
少し弄ります。
まずは、Calculate Size by Massのモジュールから、particleの大きさを小さくします
今回はXとYに0.25にします。
次に、Colorのモジュールから色を変更します
見やすいように、今回は青色でエミッシブに高い数値を入れて発光させましょう
Bを100に設定しました。
発生数が少ないと確認しにくいので
SpawnRateを1000にして、発生数を増やします。
放出位置にブレ幅があり、少し確認しにくい部分もあるので
Sphere Locationの
Sphere Radiusを0に設定して、発生位置のブレ幅をなくしましょう。
これにて確認用のparticleとしては完成です
青い粒子が、大量に上昇し、重力によって落下します。
#Niagara
— moyasi@4/13日初の登壇決定！ (@torisutamoyasi) April 10, 2019
BPで動的にNiagaraの数値を変えるテスト
最近記事書いてないので、少し書きたい pic.twitter.com/FfIM6wefUg
#Niagara
— moyasi@4/13日初の登壇決定！ (@torisutamoyasi) April 10, 2019
色とか大きさとかを調整して、解りやすくしてみるとこんな感じ pic.twitter.com/K6NOw23NKH
今回は、BPで制御して、この様な動きを作りたいと思います。
今回はレベルブループリントで発生させています。
単純にレベルブループリントで発生させる場合は
このようになります。
発生の基準の座標は、レベルに配置したCubeから座標を取ってきています。
ブループリントで動的に制御する場合。
まずはNiagara側で、ブループリントで制御する用のパラメータが必要になります。
パラメータの部分の+のアイコンから出てくるメニューで
Vectorを選択し、Vector型のパラメータを追加します。
名前はUser.Locationとしました。
名前は自由と言いたい所ですが
最初のUser.までは必須なので注意です、全て小文字でも恐らく大丈夫です。
追加したパラメータが、ユーザーの中にあるかを確認してください。
ここの名前で判断しているようで、ここ以外の場所に入っている場合は
名前が間違っていると思われます。「.」まで必要なので注意してください。
次に、作ったパラメータをNiagaraのデータ内に挿入する必要があります。
Positionをこのように書き換えます。
Engine.Owner.Position は、エフェクトを配置した座標を取ってきてくれます。
今回の場合、User.Locationで配置した座標もとってこれば不要とはなりますが。
計算をわかりやすくする為に、この用に今回は設定しておきます。
これにて、Niagara側での設定は完了です。
今回は、円を描くように発生位置を制御したいので
この様に作りました
SinとCosを使って円を描く処理です。
また、最後にLocationの変数にSetしておきます。
最後に、このように繋げれば完成です。
先ほどの円を描いて、Locationの変数にSetした後に
Set Niagara Variable(Vector3)
を繋ぎます。
また、このノードには、Niagaraそのものを発生させているノードから
Retum Valueの情報をターゲットに接続して、発生させたエフェクトと関連付けます
In Variable Nameには、Niagaraで設定しておいたパラメータ名にしておきます。
最後に、SetしていたLocationの変数をGetしてきて繋げます。
これにより、BeginPlayにてエフェクトを発生させ
その発生させたエフェクトに対して
Set Niagara Variable(Vector3)
をTickで毎フレーム処理をさせる事で
User.Locationのパラメータに毎フレーム円を描く座標を持ってきて、それを更新させます。
このUser.LocationはNiagara上の設定で
エフェクトを配置した座標から加算しています
それにより、配置した場所を基準にくるくる回る処理が完成しました。
【AE】aftereffect始めました
タイトル通り、aftereffectを触りだしました。
「SubstanceDesigner使ってるのに使ってなかったの？」
と思われる方居るかもしれませんが、使っていませんでした
Photoshopも同様で、aftereffectとようやく同時購入。
Photoshopもそうですが、aftereffect関係の記事も今後かけていけたらなと思います。
最初というのもあるので、少し解った作り方の基準みたいなのを。
作り方の基準として定番になりそうなのは
この様なオーラをベースに使います
次に、コントラストを調整します
色をつけます
色を調整します
大まかな流れはこんな感じになると思います。
この辺だけなら、SubstanceDesignerと作り方の根本は大差はないと思います。
ノイズをベースにつくる場合、SubstanceDesignerの場合
ノイズ同士をブレンドで合成して細かい調整したりする。
というのは定番になってくると思いますが。
aftereffectの場合は、ノイズ同士で合成するというより、ノイズのパラメータで変えていく感じになりそうです。
タービュレントノイズ、というノイズだけでこれくらいのパターンが用意されています。
一つのノイズで出来る事が比較的多いと思われます。
また、加工したりする処理の場合
SubstanceDesignerの場合は、加工する為のノイズを使う場合は比較的に多いですが
aftereffectは加工自体にノイズ使うことは少ないと思います（今の段階では憶測でしかありませんが。）
また、その影響もあるのか
ノードグラフのようになっているのが、縦に並んでいます。
単純に上からの処理となっているので。
順番などは解りやすく、どこにどの処理を入れたのか？を探す手間そのものは減ると思います。
また、最終結果を確認しながら、ベースのノイズを変えたりして結果確認したりするのも、aftereffectでも可能です。
比較的にaftereffect解りやすくて便利そうというのはあるのですが。
ただ、ノイズはシームレスでは無かったりしやすいので
シームレスな加工は、別途する必要が出てきやすいとは思います。
シームレスに作りたいものをつくる場合は、この辺は注意したほうが良いかもしれません。
【GameSynth】Modularモデルで音を鳴らしてみる
GameSynthという、効果音作る為のツールがありまして
エフェクトには効果音も欠かせないので、効果音も少しづつ作っていこうかなと思ったので、少しづつ記事を書いていこうと思います。
このソフト、効果音を作る為にいくつかタイプがあります
その中でも、ノードベースでもある、Modularモデル（左から３番目）
でいろいろ作ったりしていこうかなと思っています。
これはどのモデルでもそうなのですが、結構最初から沢山のプリセットが用意されています。
最初からあるプリセットでも、特に複雑そうなのがこちら
ノードの色分けがある分かなり解りやすいと思います。
簡単に音を鳴らす場合だけれあれば、緑色のノードから黄色のOutputに繋げましょう
ノードは右クリックから出すことができます、一番上にある【Audio Generation】は一番基本となる音源です。
いろいろプリセットを見ているとよくあるのが、この音源の上にある水色のノードは緑色の音源そのものを加工するイメージでしょうか。
例えばこの、Noiseの音源のみ再生した場合
Noiseのノード自体で調整出来るパラメータこそありますが、全体の音量や、音の長さなどしかありません。
そこで、調整するノードである【Envelope】を繋げます、これは音量のカーブを作る様なノードになっています。
デフォルトでカーブが入っているので、繋ぐだけで、一定音量のみだったNoiseの音量に、フェードイン、フェードアウトを追加する事ができます。
ノードベースを普段から使っている方なら、大体想定出来るとは思いますが、当然ながら、この一つの音量のフェードイン、フェードアウトの情報を、他のノードと共有する事ができます。
赤色のノードは、受け取った音源を後から加工するイメージで大丈夫と思います。
例えばこのようにすれば、同じフェードイン、アウトのカーブを共有した二つのノイズを混ぜた音、となります。
今回は短いですがこの辺で。
またいろいろわかってきたら記事を書いていきたいと思います。
【SD】歪み機能を作ろう
今回はSubstanceDesignerで歪み機能を
Verは2018.2.0です
【どういう処理を作るか】
ワープ系での歪ませるものだと、若干イメージが湧きにくいので
エフェクトを作るツールでよく見る、RとGの情報をそれぞれX,Yに置き換えて動かす処理を作ります。
ノードの全体図はこんな感じになります。
パラメータはFloat型のこの一つのみになります。
移動量の量を調整する用のパラメータです。
インプットノードは、グレースケールとカラースケールを一つづつ。
グレースケールは、歪ませる元の情報で、カラースケールは、歪ませるのに使用する情報です。
チャンネルのこのノードを使い、RGBAを分離させます、今回はRとGしか使いません。
まずは、Rチャンネルの0.5を越える数値を持ってきます。
今回はpixel Processorで処理します。
Pixel Processorの中身はこうなっています。
非常に単純な計算です、まず0.5を引き算する事で、移動量として使わない部分が全て0以下になります。（-0.5～0.5）
その後、２倍にすることで、-1～1になります。
Pixel Processorの外に出ると、0～1に切り取られるので、これをそのまま、右方向への移動にします。
あとは、Directional Warpで、角度を180に設定して右方向にしてから
※処理が分かりやすいように、ベースと、歪みに使うノイズを表示しています。
※処理がわかりやすいように、Levelの強さを50に設定しています。
Intensityには、このノード自体に作ったLevelを入れておきます。
これで右方向は完了です。
あとは、これを各方向にしていくだけです、次は左方向
Pixel Processorの中身はこうなりました。
赤枠が追加したノードです。
これにより、0～1の数値が反転した状態になりました。
後は、角度を変更して終了です。
次は上にずらす処理です。
右にずらした処理を複製して、RではなくGチャンネルから情報をとってきた後に。
DirectionalWarpで上方向に設定します。
上方向を作ったのと同じ容量で、左に移動している処理を複製して、
下方向へ移動させるようにします。
最後に、この移動を全て繋げれば完成です。
今回はここまでです。
今回はちょっとした小ネタみたいになりましたが、エフェクトを作っている方には馴染み深い処理かなと思いますので、使っていただけたら幸いです。
サイト作りました！！！
明けましておめでとう御座います。
2019年元旦にて、報告があります。
Material Forward（マテリアル フォワード）という名前のサイトを作りました！
以前からエフェクトの販売もそろそろ始めたいな、と思っておりまして。
ただ、具体的にどうすればいいのか？という所もありましたので
その活動をしやすくする為のサイトを作り、今後活動しやすくしたいと思っております。
当面の目標としては、このブログで配布していまして、多くの方に使ってもらっています、「RPGツクールVXAce」「RPGツクールMV」仕様のスプライトシート形式の素材の有料販売から始めたいと思っております。
今まで配布していた無料素材は、サイトの方に移動しましたが、以前と同じように使っていただけます、無料素材自体をなくす予定は御座いません。
今までの無料素材は、自分が使うようとして作ったものをそのまま出していたのみでしたが、有料素材で出すからには、今までよりもしっかりしたものを出していきたいと思っております。
このブログではUnreal Engine4でエフェクト制作をメインにしていましたので、マーケットプレイスにもアセットとして販売もしたいと考えております。
2018年は、作品を上げることよりも、自身の勉強で手一杯でしたが、2019年は作品投稿や、作品販売をしていける年にしていきたいと思っております。
↑リンクはこちらから
【SD】スプライトシートを作る②（ちぎれ表現用
今回は、以前のこの記事の改良版となります
以前作ったものを改良していきます
今回の記事は、この以前の記事を見ている前提の部分もありますのでご了承ください。
今回も、基本的に4*4のマス目で進めていきます。
Verは2018.2.0です
【改良内容】
以前には対応していなかった、ノイズ自体を並べる処理も追加したりして
使いやすいように改善していきます。
根本的な作り方自体を変えています。
【パラメータ一覧】
パラメータはこのようになっています。
Tiling
XとYでそれぞれいくつ並べるかを選択
出力選択
読み込んだノイズだけを出力するのか
パターンだけを出力するのか
合わせたものを出力するのかの選択
正規化
１コマめの時点でちぎれが出るようにするのか、出ないようにするのかの選択
Patter_Pow
パターンの色に対して敵用するべき乗の指数
Noise_Pow
ノイズの色に対して敵用するべき乗の指数
【ノードの全体図】
ノードの全体図としてはこんな感じです
今回は、調整しやすくする為の、正規化やPow系のパラメータなどの敵用の為に増えているノードなどもあります。
【マス目の制作】
まずは、ベースとなるここから
以前の作り方から改良して、１つのFX-MAPで作っています
中身は非常にシンプルな構造です。
以前のように、TilingのInt2の変数から持ってきます。
IterateノードのIterationsを編集します（所謂反復回数です）
今回は、一つのFX-MAPで作るので、XとYのタイリング数を乗算したものが、そのまま反復回数となります。
Quadrantで設定しているパラメータはこの３箇所になります（青くなっている部分）
Pattern Offsetは、BranchOffsetに内容は結合しているので、以前の記事と、編集している部分は実質変わりません。
Patternは前回同様Squareに設定しておきましょう。
Color/Luminosity
ここでは色を設定します
ノードツリーとしてはこんな感じになりました。
ここは複雑なことはやってはいません、タイリングのXとYを乗算して、反復回数を取得してきて
現在の反復回数から、全体の反復回数を割る事で0/16～15/16に変換します
Pattern Size
BranchOffetよりも、構造が単純なこちらから
こちらは単純に一つ一つの大きさを制御します
ノードツリーはこのようになっています。
こちらは、各サイズを、タイリング数で割った大きさにしています。
Branch Offset
こちらは、色と大きさを設定したものを、実際に並べる処理を作ります。
フレームでのコメントを見てもらえれば解ると思いますが
基本的に原点が中心になるものを、左上にするのと、順番に並べる機能を作っています。
まずは、上半分の並べる処理を作ります。
具体的にはこのような模様になります
中心からになっていますが、ここの座標を変えるのは、後でやるので一旦、この順番に並べる処理を作りましょう。
並べる処理の部分の全体図はこうなっています。
まず、何マス毎に並べる必要があるのかを調べる為に
Tilingの変数の要素を分解します
今回の例では4*4なので、４マスづつ並べます
まずは横に並べる処理から
横のタイリング数である、Xを使います
反復回数を取得してから、そこからタイリング数で割ります
反復回数は0～15が出力されて、4で割るので
0/4～15/4になります
１を超えると画面外に出かねない、１を超えないように小刻みに並べても
ちゃんと並んでくれないので、この処理を入れます
これは１で割った余りを出力します。
１で割った余りは、小数点以下を切り出すのと同じになるので
これにより、4/4の時点で小数点以下のみ切り出すと0になり
その次の5/4は、1/4と同等になります。
これにより、左から右に並べて、右端まで行ったら左に戻る
というループして並べる事が出来ます。
次は縦に並べます。
こちらは、縦と横のタイリング数が両方必要になってきます。
まずは、反復回数から、横のタイリング数で割ります
こちらは縦でやったものと同様です。
今回は、ここから小数点を切り捨てます。
これにより、1～16の反復が0～3に変換されます
その変換されたものを、縦のタイリング数で割ります、そうすれば0～3に変換されていたものが0/4、1/4、2/4，3/4に変換され、これで敷き詰めることが出来ます。
最後に、それぞれXとYとしてFloat2に変換しておきましょう。
次に、原点を左上に持っていく処理を作ります、こちらは比較的単純です。
このように、左上に座標が来るようになります。
まずは左に寄せる処理
タイリング数のXをとってきて、１から割ります、今回だと0.25になります
中心が基準位置なので、0.25を足して0.75の位置に来ます
そこから、0.5を乗算して半分にします
数値としては0.25から割るので0.125に中心が0.5の位置なので0.625の位置に
その後、-0.5から足します（0.5を引いてます）
0.625の位置になっていたので、0.5を引いて0.125の位置に来ます
この0.125というのは、一つのコマサイズの半分の大きさです、
ソフトの都合上、0の位置にすると、このようにタイリングの処理が入ってしまいます。
次は上に持っていく処理...ですが
グラフノードツリー見てもらえば解ると思いますが、左に持っていく処理とほぼ変わりません、タイリング数のXをとってくるか、Yをとってくるかが変わるのみです。
最後に、作った要素をそれぞれ合成して完成です。
この様になっていればOKです
【タイリング処理の制作】
次に、先ほどの設定を流用して、読み込んだデータをタイリングさせます。
先ほどマス目用とパラメータを流用しているので、常に同じタイリングとなります。
まずは、一旦何でもいいのでノイズなどを、２番目の入力に繋げてから
マス目を作ったFX-Mapをコピーして、FX-Mapの編集をします。
Quadrantノードの、Colorの関数を編集し、Floatで１の定数を指定して、出力ノードに設定します。
下は、マス目を作った際のデータなので、消しても構いません。
この時点で真っ白になっています。
Patternを、Input Imageに変更します、これで読み込んだデータを使用出来ます
Input Image IndexでInput Image 0に設定する事で、第二入力のデータを読み込むことが出来ます。
順番に並べる処理は、マス目を作った時に作ってありますので、この時点で綺麗にタイリングしてくれます。
この時点で、BlendでAddした後に、PixelProcessor（中身は前の記事参照）で加工すればとりあえずは完成です。
ここからは、これを更に使いやすい改善をしていきます。
【出力選択】
機能追加の一つ目はこちら、この三つのうち、どれを出力するのかを選択出来るようにします。
パラメータはInteger1の、ドロップダウンリストにすると、リストを作れるので、それぞれ入れましょう。
ブレンディングにある
このノードを使って、どれを出力するのかの選択をします。
パラメータはこうなっています
Input Numberは、入力する数なので、今回は３
Input Selectionは、実際に出力する部分になるので、先ほど作った「出力選択」のパラメータを設定しておきましょう。
あとは、それぞれ選択するだけで大丈夫です。
【正規化】
良い名前がい思いつかなかったのでこの名前になっています。
見やすくするために2*2にしています。
ノイズ+パターンにのみ有効で
補正の有りor無しの選択で、有りにすると、１コマ目が無地になります。
UVアニメで再生した際に、１フレーム目から契れて描画が見にくいんを防ぎます。
また、以降のフレームも、破綻しないように少しだけ補正が掛かります。
まずはパラメータを作りましょう
Boolean型で作ればOKです。
この調整はPixel Processorにて行います、ノードの位置としてはここになります
読み込んだノードの直後です、並べたりする処理の前のノイズに補正をかけておく形となります。
ざっくりとノードの中身はこんな感じです。
簡単に中身の説明をすると、4*4の場合15/16を掛けています2*2なら3/43*3なら8/9になります。
これでうまくいく理由としての解説を挟みますと
ちぎれ表現での契れている部分は、ノイズから、定数を加算して1の部分を千切れる部分にしています。
実際に処理しているのは、この赤枠の部分です。
SubstanceDesignerでは、関数などの一部以外では基本的に数値は0～1として扱いますので、１が上限です。
ちぎれ表現自体は、定数を加算して１（超えた分は１になる）の部分のみ取得しています、１コマめは加算している定数が無いので
１未満であればちぎれる部分が一切無くなりますので、ノイズから15/16で掛けると、全て1未満になるので、ちぎれる部分が全て無くなります。
関数側の計算に戻ります。
赤枠では、タイリングのXとYを掛け算して全体のコマ数を出します
黄枠では、読み込んだノイズをコマ数で割ります
緑枠では、読み込んだコマ数から1を引きます
紫枠では、緑枠を掛けます
コマ数で割った後に、コマ数から１を引いた数値を加算する事で4*4なら16で割ってから15で掛けるので、実質15/16で掛けています。
最後に、ノードツリーに差し込みましょう
ブレンディングの
このノードを使います、単純なスイッチです
switchの変数に、作った正規化を入れます
その後、Pixel Processorを通るのと、通らないのをそれぞれ接続して、この補正を有効にするかどうかを設定できます。
【Patter_Pow&Noise_pow】
これはべき乗計算です、コントラストを調整したりしやすいように、あると結構便利です
ちぎれ表現の動き方が簡易的ですが、結構制御できるようになります。
Float1型で両方パラメータを作ります。
調整からこのノードを使います
このノードだけでほぼほぼ機能完結します
ノイズ側は、ノイズの直後に入れ込みます、補正処理したPixel Processorよりも前です。
一つしかないパラメータに、Noise_Powを設定して終了です。
パターン側にも同じ要領でパターンの直後に入れ込み、今度はPatter_Powの関数を設定すれば終了です。
最後に、最初に接続していたノイズをInputに
最後のMulti Switch Grayscaleの後にOutputを繋げて、完成です。
最初に上げたグラフと少々違いますが、配置が違うだけですので、この部分は自分の見やすいように調整してあげてください。
今回は長めになりましたが、少しでも参考にしていただけでば幸いです。
SubstanceDesignerでのスプライトシートの記事
次はSubstancePlayerなどを併用してもっと細かいのを作る例を予定しています。
