Anime Aura VFX Manual

Manual for Unreal Engine 5 asset Anime Aura VFX (NiagaraSystem)

Contents:

 

Abount Anime Aura VFX:

Store URL:

Anime Aura VFX in Visual Effects - UE Marketplace

 

Support:

mail : nkdtr2011@gmail.com

 

Brief:

Anime Aura VFX is a set of NiagaraSystem that shows flat shaped aura VFX as seen in animes.

Particle-based:

Not a flipbook but particle-based and have these benefits:

-The pose of characters are reflected into the shape of VFX

-Its behaviors and looks can be changeed dynamically

youtu.be

How to use:

Using Presets

More than 30 preset NiagaraSystems are also contained.

They can be used in place of NS_AuraEffect to shortcut setting parameters.

Manual Setup

Method 1:

- Duplicate NS_AuraEffect or another preset NiagaraSystem

- Modify parameters / emitters in it

This is recommended because the created NiagaraSystems can be reused (of course).

 

Method 2:

- Attach NiagaraComponent under SkeletalMeshComponent and set NS_AuraEffect

- Modify Override Parameters

The good point is that the effect can be previewed in the actual scene.

This process doesn't make changes in NiagaraSystem asset.

Parameter Detals

Please see this page:

nkdtr.hatenablog.com

Mechanisms:

This part is technical, for those who customizes aura effects.

Reading this may help you to take a more logical approach to achieve the target expression.

Overview

A NiagaraSystem in Anime Aura VFX  has an emitter that controls particles (Particle Controller) and one that renders them into texture and shows as a sprite (Sprite Renderer).

 

Particle Controller

This is almost an ordinary emitter, like Fountain in the template.

But renderer is turned off and particles are not rendered in ordinary way.

Sprite Renderer reads positions and sizes of particles from this emitter.

 

By modifying this emitter, the behavior of the VFX can be customized (turning the renderer on should be convenient while working).

This can be done as an ordinary VFXs. It's OK to add forces / bursts.

Too many particles can be bad for performance, but Anime Aura VFX doesn't get much benefit from spawning large number of particles.

 

Sprite Renderer

Sprite Renderer reads positions and sizes of particles from this emitter to render them into a texture and pass it to a material that is assigned to a sprite.

If attached to a skeletal mesh, positions of its bones and sockets can be used as virtual particles.

The main part of Sprite Renderer is in the Simulation Stage and it doesn't emit particles.

Since this is a composition of specialized modules, customization is not recommended for those unused to develop Niagara Systems.

But number of parameters are exposed as user parameters to help controlling the amount / size of aura VFX.

Drawing particles into texture

Sprite Renderer draws desity map according to the position and the size of particles relative to the view point.

Finally, the density map is blended with the previous frame.

It is shown in the viewport of NiagaraSystem editor.

Since a T-posed skeletal mesh is referenced for previewing, the density map is also T-shaped.

Density map is one dimensional and it is shown red.

 

Mapping density to color via materials

Final draw color is decided in the material assigned to the sprite, using the value sampled from density map.

Sampling colors from a curve atlas is a typical implementation.

In this case, UVs for sampling from the density map and the sampled density can be processed in the material to give variations in appearance.

This material can also be changed in the NiagaraSystem user parameter, so those who are familiar with handling materials can create their own and achieve a variety of expressions.

(example 1, 2) just by modifying materials (patterns/noises)

 

(example 3) particle controller and material

Limitations:

Multiple viewports not supported

Animi Aura VFX depends on view matrix (camera transform), that means this VFX is not seen correctly from 2 or more viewpoints at the same time. This happens when your application uses scene capture or has multiple viewports (ex. multiplayer by splitting screen).

There is an optional parameter "Custom Viewport" to choose the viewpoint  from which the VFX should be seen correctly(typically a SceneCapture2D will be set).

Anime Aura VFX 製品紹介

Unreal Engine 5 用アセット Anime Aura VFX(NiagaraSystem)についての仕組みを説明します。

目次:

 

Anime Aura VFX について:

ストア:

Anime Aura VFX in Visual Effects - UE Marketplace

 

サポート:

mail : nkdtr2011@gmail.com

 

概略:

アニメーションに見られるような、平面的なオーラエフェクトを表示できるNiagaraSystemです。

フリップブック式ではなくパーティクルで制御されているため、

・キャラクターのポーズを反映できます

・エフェクトの挙動や見た目を柔軟に変えることができます

youtu.be

使い方:

プリセットを用いる

30を超える NiagaraSystem がアセットに含まれています。

殆どのものは基本となる NS_AuraEffect のパラメータを調整していくことで再現できますが、この作業をショートカットできます。

手動セットアップ

方法①:

NS_AuraEffect または他のプリセットを複製しパラメータを調整します。

作成した新しい NS_AuraEffect を使い回すことができるため、こちらがおすすめです。

方法②:

NS_AuraEffect を SkeletalMeshComponent の下にアタッチした後でパラメータを調整することもできます。

実際に表示されるシーン上でプレビューできる優位性があります。

こちらは NiagaraSystem アセットに影響を与えませんので、テスト用の意味合いが強いかもしれません。

パラメータ詳細(英語)

Please see this page:

nkdtr.hatenablog.com

 

仕組みについて:

以下はややテクニカルな内容で、カスタマイズを行いたい人向けです。

これを把握することによって、目標とする表現のためのカスタマイズをより論理的に考えることができるかもしれません。

 

全体像

Anime Aura VFX の NiagaraSystem にはパーティクルの挙動を制御するエミッターとそれをテクスチャ化し表示するエミッターが配置されています。

 

パーティクル制御エミッター

こちらはほぼ通常のエミッターです。テンプレートの Fountain 等とさほど違いません。

ただし Renderer がオフになっているため、パーティクル自体が表示されることはありません。

表示用エミッターからはこのエミッターにあるパーティクルの座標・サイズ等の情報が読み取られます。

 

このエミッターを編集することで、エフェクトの挙動をカスタマイズすることが可能です(作業中はRendererをオンにすると確認しやすいと思います)。

こちらに関しては普通の(?)エフェクトと同様の感覚で調整すればよく、Force や Burst の追加等も問題ありません。

パーティクル数が多すぎると負荷が問題になるかもしれません。また、このエフェクトの性質上パーティクル数を増やすことによる恩恵は小さめです。

 

表示用エミッター

表示エミッターはパーティクル制御エミッターからパーティクルの情報を読み取り、これをテクスチャに書き込んだ上でマテリアルに渡します。そのマテリアルを適用したスプライトを一枚表示します。

SkeletalMeshにアタッチされている場合は、ボーンやソケットの位置をも仮想的なパーティクルとして用います。

こちらは SimulationStage がメインのエミッターで、パーティクルを発生させることはありません。

かなり特殊な内容になっていますので、Niagara に不慣れなうちはカスタマイズは難しいかもしれません。

ただし量や大きさに関する様々な数値が NiagaraSystem のユーザーパラメータとして触れるようになっているため、そちらの調整で事足りることが多いと思います。

パーティクルをテクスチャに書き込む

パーティクルの中心で濃く、離れるほど薄くなるグラデーションを重ねて書き込んでいきます。

NiagaraSystemを中心として配置したスプライトをスクリーンに見立て、カメラの姿勢を参照しながらしかるべき位置に描画していきます。

直前のフレームの状態とブレンドしてできあがるのがこのようなテクスチャです。

NiagaraSystem のプレビュー画面に表示されます。

プレビュー用にTポーズ状態の SkeletalMesh を参照しているためTポーズ型になっています。

色をもたない濃淡データのみのため、R成分だけで表示されるようです。

 

スプライトのマテリアルで色をマッピングする

マテリアルでは、テクスチャに書き込まれた濃度をキーとして表示色を決定します。

典型的な実装としては CurveAtlas から色を取るようになっています。

この際、テクスチャからサンプリングするための UV やサンプリングした濃度そのものをマテリアル内で加工するすることで外見にバリエーションを与えることができます。

このマテリアルの指定も NiagaraSystem のユーザーパラメータで変更可能ですので、マテリアルの扱いに慣れた人であれば自分なりのものを作成して様々な表現を実現できると思います。

パターンを入れたりノイズをかけたり(マテリアルのみの置き換え)

 

こちらはパーティクル制御エミッターもいじっています。

制限事項

パーティクルをテクスチャへ描画する段階で視点の情報を参照する関係で、同時に正しく描画できる視点が一つだけになってしまう制限があります(画面分割を行った場合やSceneCaptureを用いる場合に問題になります)。

これに関しては技術的に解決が困難と思われますが、せめてもの処置として上記計算に用いる視点をユーザーパラメータで指定できるようにしてあります(CustomViewport )。

Anime Aura VFX Technical Reference

Anime Aura VFX Technical Reference

Effect Sources

Anim Aura VFX has 3 effect sources:

  • Particles
    • Most flexible and highest cost(depends on the number of particles)
    • You can define the behavior of particles as ordinary NiagaraEmitter
  • PositionArray
    • Positions in local space
  • Bones/Sockets
    • Good for SkeletalMeshes

A "canvas" is filled with "densities" calculated by these effect sources and finally drawn onto the screen with the given material.

Parameters

Parameters can be modified in the details view of NiagaraComponent.

  • ArrayIntensity
  • ArrayPointSize
    • Size and intensity of position array effect sources
  • bNormalizeByAtan
    • (technical) If turned on, the "density" is normalized by atan function
  • BoneIntensity
  • BonePointSize
    • Size and intensity of bone/socket effect sources
  • bUseVelocityFlow
    • If turned on, the effect blurs by the movement of actor
  • ColorCurveAtlas
    • CurveAtlas that defines the mapping from "density" to color and opacity
  • CustomView
    • (technical) If an actor is set, use its transform as the view matrix which is used when filling the "canvas"
  • Damping
    • "Density" decreases every frame depending on this value
    • Low value makes the effect blobby and high value solid
  • DrawMaterial
    • The material used to draw the effect onto the screen referring to the "canvas"
  • Flow
    • Flow vector in world space. The effect blurs by this value
  • GridResolutionX
  • GridResolutionY
    • Resolution of the"canvas"
    • These effect on GPU cost
  • Margin
    • "Density" is decreased around the edge of the "canvas" by this value
  • MasterIntensity
    • Intensity of all effect sources
  • ParticleIntensity
  • ParticleSizeScale
  • ParticleSpawnRate
    • Intensity, size scale and spawn rate for particle effect sources
    • Size of each particle is also taken into account
  • Positions
    • Local space locations of position array effect source, but 4th element works as intensity scale
  • Power
    • This defines the curve that decides the mapping from distance from center of effect source to "density"
    • Low value makes the effect smooth and high value sharp
  • SKM
    • Referenced skeletal mesh
    • Filtered Bones/Sockets
      • Used as effect sources
  • SpriteSize
    • Finally rendered size of sprite in world space

Anime Aura VFX Manual


Anime Aura VFX Manual



Store URL:

Anime Aura VFX in Visual Effects - UE Marketplace

 

Support:

mail : nkdtr2011@gmail.com

 

What is this?:

Anime Aura VFX is a particle-based but flat aura VFX as seen in animes.

The advantage compared to (prepared) texture based one is its flexibility.

youtu.be

 

Customizable:

-Color mapping curve(maps "dencity" to color with opacity)

-Post effect material

-Other numeric parameters

Please see the reference page for details.

 

Quickstart:

Using Presets

More than 10 preset NiagaraSystems are also contained.

They can be used in place of NS_AuraEffect to shortcut setting parameters.

Manual Setup

-Attach NiagaraComponent under SkeletalMeshComponent and set NS_AuraEffect

-Modify Override Parameters

youtu.be

 

 

Limitations:

Multiple viewports not supported

Animi Aura VFX depends on view matrix (camera transform), that means this VFX is not seen correctly from 2 or more viewpoints at the same time. This happens when your application uses scene capture or has multiple viewports (ex. multiplayer by splitting screen).

There is an optional parameter "Custom Viewport" to choose the viewpoint  from which the VFX should be seen correctly(typically a SceneCapture2D will be set).

Kaleidoscope Designer : Editor reference

 

youtu.be


How to open editor:

f:id:nkdtr:20220103163558p:plain

Right click on the EditorUtilityWidget "EUW_SetupKaleidoscope" and select "Run Editor Utility Widget".

Common parameters:

f:id:nkdtr:20220103163650p:plain

  • Aspect : aspect ratio where this material should be applied
  • Texture : texture to be reflected and repeated in mirrors
  • Reflection Color : color that is modulated per reflection
  • Two Mirrors : if checked, two mirrors are placed (instead of three)

Arrange mirrors:

f:id:nkdtr:20220103165230p:plain

Drag circular markers to arrange mirros.

Three mirrors are placed on edges of triangle.

f:id:nkdtr:20220103165432p:plain

If "Two Mirrors" is checked, two mirrors are placed on two edges crossing the red marker.

Creating new material instance:

f:id:nkdtr:20220103165820p:plain

Confirm "New" button is shown with light color (if dark, just click it).

Modify "Directory" and "Name" (if you need to), click "Create" button to generate new material instance.

Modifying existing material instance:

youtu.be


  1. Click "modify" button
  2. Set existing material instance(made with this editor)
  3. Modify parameters
  4. Click "Apply" button

Using kaleidoscopic material in retainer box:

youtu.be


 

 

Kaleidoscope Designer Manual

Kaleidoscope Designer Manual 

 

Store URL :

www.unrealengine.com

 

Support :

mail : nkdtr2011@gmail.com

 

What's new :

2022/01/18

Released

 

What is this? :

youtu.be

Provides utility to setup kaleidoscopic material available in 3D scenes and also in widgets.

 

Quickstart :

Editor Utility Widget

This sets up material instances for 3DScene/UI(and retainer box) as assets.

See the reference page for details.

  1. Run Editor Utility Widget (KaleidoscopeDesigner/Editor/EUW_SetupKaleidoscope)
  2. Modify parameters and triangle shape
  3. Press "Create" button to instantiate designed material

youtu.be

 

More Details :

nkdtr.hatenablog.com

Crystal Renderer -Creating meshes-

Crystal Renderer -Creating meshes-

Crystal Renderer is equipped with blueprints to create jewel meshes.

It can be used as it is, and extracting mesh as StaticMesh is also possible.

f:id:nkdtr:20210131165554p:plain

Getting StaticMesh

Round Brilliant Cut

Place "BP_ProcCrystal_RoundBrilliant" on your level and configure parameters.

Wireframe view is good for examine the shape.

f:id:nkdtr:20210131161359p:plain

BP_ProcCrystal_RoundBrilliant

youtu.be

Step Cut

Place "BP_ProcCrystal_Step" on your level.

Create "CurveFloat" asset and fill the property "Curve" with it.

f:id:nkdtr:20210131161549p:plain

BP_ProcCrystal_Step

f:id:nkdtr:20210131161920p:plain

Creating Curve asset

f:id:nkdtr:20210131162228p:plain

Editing curve

youtu.be

Keys between time 0 and time 1 are used to form the mesh.

Interpolation mode should be "linear" through the curve to preview the shape well.

In the curve,

-Time 0 corresponds the top

-Time 1 corresponds the bottom

-Value 0 corresponds the center

-Values are normalized so that the largest value corresponds the "Radius"