Labo Aquaria

UE4 is my life style.
Here is the Labo I show my creation with UE4 and Oreo...
<< Morphing with render target texture in Niagara (3) | main | Switch of post process >>
Widget and Niagara
0

    ごきげんいかがですかー。

    とうとうCGWORLD Vol.250が発売されました。

    https://cgworld.jp/magazine/cgw250.html

     

     

    私はUIデザイナー向けのNiagaraEditorチュートリアルを担当させて頂きました。

    みんなでNiagaraを楽しみましょう。

    雑誌で紹介したプロジェクトファイルは下記です。

    https://github.com/Aquariaue4/UE4Projects

     

    では、さっそく作り方をご紹介。


     

    [ざいりょう]

    • "Niagara System"*1
    • "Niagara Emitter"*1
    • "Niagara Module Script" *2
    • "RenderTargetTexture" *1
    • "WidgetBP"*1
    • ”良い感じのフォント”

     

    Ex.

    "Niagara Module Script"

    A: テクスチャからパーティクルポジションとカラーを取得して特定のプロパティに格納するモジュール。

    B: 格納したプロパティを利用してモーフィングさせるモジュール。

     

    "Blueprint"

    レンダーターゲットにWidgetを描画して、Niagaraをスポーンさせる。

     

    ”いい感じのフォント”

    あまり細いと見えない。太目推奨。

     


     

    [Niagara Emitter]

    まずは大量のパーティクルを利用するために、SimTargetをGPUに変更します。

     

    1.今回は一度しかパーティクルを発生させないので、値を”1”に変更します。

    2.最終的にRenderTargetTextureを入れますが、まずは確認用のテクスチャを入れます。

     

    Spawn Burst Instantaneousはパーティクルを一度に発生させるものです。今回はマシンが動く限りの数値を入れてみました。通常は処理との相談になりますけど。

     

    パーティクルの発生位置・色・ライフを定め、各プロパティに順番に格納します。

     

    1.まずはパーティクルをBoxの形に発生させます。

    次に作成するモジュールをBoxLocationの下に置きます。BoxScaleは発生させたパーティクルの範囲、つまりBoxLocationと同じ数値を入力します。この数値をテクスチャのUVに変換して、該当部分の色を取得します。

     

    2.テクスチャの特定チャンネルを利用する事で、色ごとに処理を分ける事が出来ます。

     

     

    [Niagara Module Script]

    現在のパーティクル位置をUVに変換し、テクスチャの色を取得する処理を作ります。

    MapGetに以下のプロパティを呼び出します。

     

    Particles.Vector

    • Particles.Position

    Module.Vector

    • Module.BoxScale

    Module.Int

    • Module.ColorChannel

    Emitter.TextureSample

    • Emitter.TextureSample

    1.IntをChannelに変換します。これをターゲットチャンネルとして次に説明するノードに繋ぎます。

    2.取得したBoxScaleの値からUVを算出し、各パーティクルの位置に相当するテクスチャの色を取得します。

     

    1.色を取得した各パーティクルを特定の色でふるいにかけます。

     

    2.カラーの値がAlphaで指定された値より小さければ、パーティクルは新たに指定されたポジション・色・ライフを与えられます。ここではライフを0にして、発生した後このモジュールを通った時点でパーティクルは消えるようにしています。

     

    3.パーティクル発生範囲のX軸をカーブの値の横軸として利用するため、Floatとして保存します。

     

     

    [Niagara Emitter]

    1.新しくプロパティを作成し、アニメーション開始時の色を登録します。

    2.アニメーション開始時の位置を決めるため、Locationモジュールを利用して、パーティクルを再配置します。今回はBoxの形状に一旦配置した後、CurlNoiseLocationを利用してノイズを与えています。

     

    3.再配置した値は現在のパーティクル位置、Particles.Positionです。新しく作成したプロパティにこれを繋ぎます。▽のドロップダウンメニューから選択します。

     

     

    CurlNoiseForceを使用して、パーティクルに動きを与えます。

     

     

    [Niagara Module Script]

    Particles.Spawnで設定した値を使って、モーフィングの処理を作ります。

    まずはMapGetで必要な情報を取得します。

    Particles.Vector

    • Particles.BeginningPosition
    • Particles.EndPosition

    Module.float

    • Module.MorphRate
    • Module.AffectedPosition
    • Module.WorldPosition
    • Module.NewVariable

    Particles.LinearColor

    • Particles.BeginningColor
    • Particles.EndColor

    Engine.DeltaTime

    • Engine.DeltaTime

    Particles.float

    • Particles.NewTime

    Particles.Position

    • Particles.Position

    1.Lerpを使って、パーティクルのポジションとカラーを決めます。1に近ければテクスチャ通りの見た目になるはずです。

    2.現在のX座標より多い値が入力されたら、1で決定した値を現在のパーティクルに影響させ、カーブ用に用意した新しい時間をカウントします。

     

    3.カーブの横軸の為に新しい時間を作ります。

     

     

    [Niagara Emitter]

    先に作成したモジュールをParticleUpdateの一番下に追加します。

    あとは任意のカーブを設定すると、モーフィングアニメーションの完成です。

    1.影響を与える範囲をここで設定します。まずはカーブに切り替えて、0-1の値を設定します。

     

    2.今回は正規化されたパーティクルAgeを使いましたが、ここは自分の作りたいものに応じて変更してください。

     

    3.パーティクルの位置と色を調整するFloatです。これもカーブに切り替えて編集します。

     

    4.カーブの横軸は先に設定した、影響を受けた時点からカウントされる時間です。モジュールで設定したParticles.NewTimeを繋げてください。

     

    5.ここでは4と同じくParticles.NewTimeを繋いでますが、上のNewVariable(カラーのLerpに作用するFloat値)の横軸として、例えばBPを用いて別の値を入力しても面白いかもしれません

     

     

    この時点で、パーティクルがXに沿ってテクスチャと同じ見た目に並ぶはずです。

    次はBluePrintの設定を行います。

     


     

    [Blue Print]

    まずはおかずさん宅の”RenderWidgetToTarget Plugin”というプラグインをオンにしているか確認してください。

    https://github.com/pafuhana1213/RenderWidgetToTarget#renderwidgettotarget-plugin 

    @pafuhana1213

     

    一番初めにWidgetをレンダーターゲットに描画します。

    1.Draw Widget to Target を呼び出し、先に設定したレンダーターゲットテクスチャを設定します。この時、DrawSizeはテクスチャと同じにします。

     

    確認しやすいように、任意のキーを割り当てて、NiagaraEmitterを発生させます。

    最終的にはカスタムeventに置き換えてください。

     

    今回は使いませんが、任意のストリングデータをレンダーターゲットに描き込むことができるので、これを利用してもパーティクルで文字が出せます。

    "Begin Draw Canvas to Render Target"の後に、実際に描き込みたいものを指定し、”End Draw Canvas to Render Target”で描画を終了します。

     

    ふわあああ。結構まじめに書いたー。

    最後まで読んでくれた方は、感謝!

    実際にNiagaraでこれ試してくれた方には、Doble thums up!

     

    Thank you guys!

    Peace!

    | UE4 | 03:48 | comments(0) | - |
    コメント
    コメントする









    CALENDAR
    S M T W T F S
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
    << December 2019 >>
    SELECTED ENTRIES
    CATEGORIES
    ARCHIVES
    モバイル
    qrcode
    PROFILE