2023-07-23

AnimToSprite Manual -Runtime-

A2S documentation has been moved to the Wiki.

This page may not be up-to-date.

github.com

This page describes how to display sprites using an AnimSpriteSets created in the Editor.

Contents
Setting up
Sample maps
- SideView
- QuarterView
Features
Recommended Settings

Setting up

BP_SideViewPawn (side view) and BP_QuarterViewPawn (quarter view) are provided as samples.

1. Attach UAnimSpriteRenderComponent to your actor

2. Setup its properties

See "Features" below for details.

3. Set AnimSpriteSet to it

Sample maps

SideView

[SideViewDemo_P]

AWSD : move

Space : jump

P : switch character

L : switch lighting

QuarterView

[QuarterViewMap]

AWSD : move

P : switch character

Features

Animation finish callback

A callback is dispatched when the animation playback is complete.

To receive callback, bind an event to OnAnimationFinished delegate.

The demo blueprint BP_SideViewPawn is a good sample of its use.

Auto Rotation

"AutoRotate" option of AnimSpriteRenderComponent determines the appropriate sprite "orientation" (expressed as an image index) from the Actor's orientation.
It is intended to be used with Billboard materials.

QuaterViewMap is a sample of this feature.

Material(instance)s

Billboards / Quads

The Billboard materials (MI_AnimSprite_Billboard / MI_AnimSprite_Toon_Billboard) controls the mesh so that it always faces the camera.
This is useful when the camera is facing a variable or skewed direction.

The non-Billboard materials (MI_AnimSprite / MI_AnimSprite_Toon) controls only the size of the Quad.
This is a better fit for SideView.
The limited deformation caused by the shader makes it easier to keep the socket position consistent.

Toon Lighting / Ordinary Lighting

Toon materials (MI_AnimSprite_Toon/ MI_AnimSprite_Toon_Billboard) cannot directly obtain information about light sources other than parallel light sources, and lighting is performed through the MaterialParameterCollection (MPC_ToonLighting).
The best method for setting up light sources is likely to vary from application to application, but BP_LightFinder should serve as a sample.

For non-Toon materials (MI_AnimSprite / MI_AnimSprite_Billboard), no special precautions are required abount lighting.

Recommended Settings

To make the pixel art look good, several rendering settings are recommended.

Antialias Method=0

No VSM

No motion blur

2022-12-21

Anime Aura VFX Manual

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

Contents：

Abount Anime Aura VFX:
- Store URL:
- Support:
Brief:
- Particle-based:
How to use:
Mechanisms:
Limitations:
- Multiple viewports not supported

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).

2022-12-17

Anime Aura VFX 製品紹介

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

目次：

Anime Aura VFX について:
- ストア:
- サポート:
概略:
- 使い方:
仕組みについて:
制限事項

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 ）。

2022-11-27

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

2022-11-27

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

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).