EasyCustomVFXUI2 操作マニュアル

英語版はこちら。
旧バージョン、V1のマニュアルはこちら。

EasyCustomVFXUI(ECVFX/UI)は、ゲームをよりリッチに見せるための、基本的な演出や加工処理をまとめたアセットです。

動作要件

前作、EasyCustomVFX/UI Ver1 を利用いただいていた方へ

EasyCustomVFX/UI2では、前作で実装していた仕組みを踏襲しつつ、多くの画面効果の追加や、パフォーマンスの向上、初心者でも手軽に演出が実装出来るようなエディタ拡張等、大幅なパワーアップがされています。

前作で出来ていたことは基本的にVer2でもほとんどが実現出来ますが、仕組みを根本から変えたことで互換性はありません。

1. Sprite Shader

SpriteRenderer に 複数の効果を適用することができます。
それぞれ独立して効果のON/OFFが可能で、OFF になっている効果は描画コストに一切影響しません。

効果付きSpriteのセットアップ方法

1．ヒエラルキーウィンドウを右クリックし、EasyCustomVFXUI/Sprite Effectを追加

2．マテリアルを作成

デフォルトの状態では、何も効果が付いていないマテリアルがセットされています。
オリジナルの効果を作るには、ECVFXSpriteApplier にある、Create Editabale Material
をクリックします。

クリックをすると、新規マテリアルが作成され、任意の効果を掛けることが出来るようになります。

マテリアルの保存先は
Edit > Project Settings > EasyCustomVFXUI で変更できます。

Lit/Unlit の切替

ECVFX Sprite Applier から、Lit/Unlitを切り替えることが出来ます。
Litにすることで、Light2Dの影響を受けた表現が可能です。

効果内容の一覧

効果の内容はそれぞれ重ねがけすることが可能です。効果を重ねれば重ねるほど負荷は増えます。

BASE

基本の設定です。

• Tint
  ベースのテクスチャに色を乗算することが出来ます。
• Time Phase 
  効果の時間に加算されるオフセット（秒）。通常は変更不要。同じ効果を使うオブジェクトが複数あるとき(例えば沢山の揺れる木を配置するなど)に、動きにバラツキを出す場合に値をデフォルトから変更することで、同じマテリアルでも動きが同期しなくなります。
• Sprite UV Rect
  スプライトがテクスチャ上で占める UV 範囲（Min XY / Max XY）。
  単体スプライトは既定値 (0,0,1,1) から触ることはありません。Sprite Atlas 使用時のみ、ECVFX Sprite Rect Binder を付けて自動設定します

Mask

スプライトにマスクを掛けることが出来ます。

四角形の形状か円形の形状でマスクを掛けることが可能です。

UVExpand

TransformのGameObjectのサイズを変えることなく、スプライトのサイズを変更することが出来ます

Outline(輪郭線)

Spriteの周囲に輪郭線を付けます。内側と外側で二重の輪郭線を付けることが出来ます。

Outline部分にTextureをセットすることも可能です。
テクスチャをスクロールさせることで、動きを出すことも可能です。

Drop Shadow

落影表現です。

Blurの値を上げると、より自然なぼかしの効いた影にすることが出来ます。

また、ModeをBlobにすると、足元に落ちる丸い影を作ることができます(スプライトの下部に余白が必要)。

Sway

揺らす効果です、草や旗などの表現で使うことを想定しています。

Swayは、「揺らす設定」と「揺らさない箇所を指定するマスクの設定」の2つの設定があります。
揺らす設定

揺らさない箇所のマスク設定

また、同じマテリアルを使っているが、オブジェクトによって動きにちょっと違いを出したいケースがあります。
シーン内のすべての木が同じ動きをすると、不自然に見えるようなケースです。

その場合は、ECVFXSpriteApplier を使って、PhaseOffsetを変えることで同じマテリアルであってもオブジェクトごとに異なる動きを演出出来ます。
DEMO_SpriteFX シーンにある、Terrain_Grass_1-3を見てもらえれば構成が把握出来ると思います。

Twirl

渦のように回転する効果です。ワープホールに吸い込まれるような表現などで使えるかもしれません。

Continuous Spin の値を0以上にすると常時動かすことも可能です。
Spriteにノイズテクスチャを使うことで、下記のようなワープホールを実現出来ます。

Distortion(歪み)

水の中に入っているような歪みを掛けることが出来ます。
Auto Flow Speed の値をあげることで常時揺らぎ続けます。

Pixelate/Mosaic

ドット絵のような表現にすることができます。

BlockSizeが大きいほど、粗くなります。

Chromatic Aberation(色収差)

色をずらした表現が出来ます。グリッチなどの表現と相性がよいです。

RadialMode を選択すると、スプライトからの距離に応じて広がるようになり、自然な見た目の色収差表現になります。(デフォルトではONになっています)

Blur(Gaussian)

画像全体をぼかします。ぼかし方はガウシアンブラーと呼ばれる方法です。

Blur(ぼかし)効果はサンプリング数が多くなるため、他の効果に比べて負荷が少しだけ大きいです。

Glitch

モニターに映っている映像や、電波が悪いときに使うグリッチ表現です。

基本設定

Burst設定(一定間隔で大きめな効果が発生)

InnerLine

暗い領域に色を被せる効果です。劇画のような印象を作ることが出来ます。

Dissolve

SFによくある、出現/消失 表現が出来ます。ノイズテクスチャによって表現や印象が変わります。

ColorRamp

別の色に置き換える効果です。

SourceをColorsにするとグラデーションで最大3色のグラデーションを作ることができます。

ColorRamp用のTexutureを割り当てることも可能です。4色以上のグラデーションが必要な場合などはColorRampTextureを使用してください。

Negative(色反転)

すべての色を反転します。絶望した時なんかに使うといいんじゃないでしょうか。

Emission

発光させる効果です。

Maskテクスチャを用意すれば、狙った箇所だけ(たとえばアクセサリのある箇所だけ)を発光することも出来ます。透明度(アルファ)の値は50-100くらいにするのがオススメです。

Pulseのパラメータを設定することで点滅するような表現も可能です。

Shine

光の帯をキャラの上に掛けます。レアリティなどの表現に使うと良いでしょう。

Hologram

ホログラム表現です。SF世界での通信などに使うといいと思います。

ベースの色の設定

スキャンライン（横縞）の設定

縞は正規化 UV の Y 基準なので、アトラス内でもスプライトに正しく張り付きます。効果は「本体を暗くする縞」と「上に加算する光る縞」の2層があり、それぞれ Intensity と Scanline Color で独立制御します。

フリッカー（ちらつき）の設定

Overlay

ベースのスプライトの上に、テクスチャを合成することが出来ます。

各パラメータ

Blend Mode の4種

Halftone

ハーフトーンでの表現です。モニターに映る映像などの表現に使えます。

Aura

キャラの背景にオーラを出すことが出来ます。色をグラデーションさせることで、炎をまとったような表現が出来ます。

色

形状

揺らぎ

ノイズテクスチャ

ノイズを使った表現をカスタムをするには、ノイズテクスチャが必要です。
本アセットでは、以下のパスにサンプルノイズテクスチャを同梱しています。

Assets/EasyCustomVFXUI/Texture/Noise

また、私の公開している、Free Game UI Assetsからノイズテクスチャを無料で好きなだけ作成可能です。
ノイズテクスチャによって表現が大きく変わります。テクスチャを差し替えてみて、いろんな表現を試してみてください。

SpriteShaderを使う上での注意事項

スプライトの外側にはみ出す効果は余白が必要

アウトライン（外側）・オーラ・ドロップシャドウは、スプライト自体の矩形の外に描画できません
（また Blur は矩形の外を参照するため、余白がないと画像の端がフェードアウトして見えます）。

スプライトの外側にはみ出す効果を使用する場合、元の素材に余白を確保して、スプライトのインポート設定で
Mesh Type を Full Rect にしてください。

既定の Tight は透明部分をメッシュから削ってしまうため、効果が途中で切れてしまいます。

アートワークを再書き出しできない場合は、UV Expand を ON にする救済策があります。
スプライトを中心方向に縮小してサンプリングすることで余白を作り出す仕組みで、その結果
画像は小さく描画されます（既定の Expand Margin 0.25 では半分のサイズになります）。

スクリプトから効果を制御する方法

スクリプトからスプライトの効果を変化させたい場合は ECVFX Sprite Applier を使います。
このコンポーネントは MaterialPropertyBlock を通して値を上書きするため、マテリアルは共有されたままで、複製もバッチングの分断も起きません。

変更したいパラメータは ECVFXSpritePropertyIDs で指定します。シェーダーの全パラメータを列挙した定数クラスで、文字列を直接書く場合と違い、名前の間違いがコンパイル時に分かります。

パラメータ名は次のどちらかで調べられます。

(1)インスペクタのツールチップ — 各項目にマウスを合わせると、説明の末尾に Script: EmissionColor のように表示されます。この名前をそのまま使います（括弧内の shader: _EmissionColor はシェーダー内部の名前で、Animation クリップから直接アニメーションさせる場合などに使います）

(2)EasyCustomVFXUI/Manual/Reference/ の各リファレンス — 全パラメータの一覧表があります。

スクリプトから制御する場合のサンプルスクリプトは以下の通りです。

using System.Collections;
using UnityEngine;
using EasyCustomVFXUI.Sprite;

public class CharacterEffects : MonoBehaviour
{
    [SerializeField] ECVFXSpriteApplier _applier;

    // 呼び出し例: StartCoroutine(DamageFlash());

    /// 被弾フラッシュ：赤く光らせて素早く戻す
    /// ※ マテリアルの Emission を ON にしておくこと
    public IEnumerator DamageFlash()
    {
        Color flash = new Color(1f, 0.2f, 0.2f, 1f);

        for (float t = 0f; t < 0.25f; t += Time.deltaTime)
        {
            // Emission は色の「アルファ」が強度。色ごと差し替える
            flash.a = 1f - t / 0.25f;
            _applier.SetColor(ECVFXSpritePropertyIDs.EmissionColor, flash);
            yield return null;
        }
        flash.a = 0f;
        _applier.SetColor(ECVFXSpritePropertyIDs.EmissionColor, flash);
    }

    /// 全オーバーライドを破棄してマテリアル本来の値に戻す
    public void ResetAll() => _applier.ClearOverrides();
}

各効果の有効/無効を実行中に切り替えることが出来ません。
これは Unity のシェーダーキーワードの仕様上の制約です。
効果をアニメーションさせたい場合は、トグルは ON のままにし、強さのパラメータを 0 からアニメーションさせてください。

シェーダアニメーションの時間の進み方を選ぶ

Sprite Applier の Phase Mode で、アニメーションする効果の時間基準を選べます。

Sprite Atlas との併用

アトラスに詰め込まれたスプライトは、アトラス内の一部の UV 範囲しか占有しないため、既定のままでは
効果が本来と違う位置に出てしまいます。

SpriteAtlasを使用する場合、Add Component から EasyCustomVFXUI/ECVFX Sprite Rect Binder を追加してください。
アトラス内の UV 範囲を自動的にシェーダーへ渡します。

2. UI Shader（Procedural Image）

ECVFXProceduralImage は スプライトの代わりに SDF（符号付き距離関数）で形状を描きます。
テクスチャも 9-slice もインポート設定も不要で、RectTransform をリサイズしても、角・アウトライン・
破線はいつでもくっきりしたままです。

Image を置き換えるコンポーネントのため、既存のImageが付いているGameObjectに追加する使い方は出来ません。

使い方

GameObject > EasyCustomVFXUI > UI > から、選択中のオブジェクトの下にプリセットを作成できます:
Rounded Rect / Circle / Polygon / Star / Ring Gauge / Parallelogram / Dashed Frame / Rotating Outline。
Canvas の下に配置してください（Canvas の外に作ろうとするとメニューが警告します）。

すべてインスペクター 1 つで完結します。
マテリアルはコンポーネントが生成・所有するため、編集前に何かを割り当てたり複製したりする必要はありません。

効果-Shape(図形の形状)

以下の形状を選択が可能です。

RoundedRect

角丸四角形です。

Corner Radius pxを個別にすることで、角ごとの丸みを設定出来ます。

他にも、以下のような図形を作ることが出来ます。パラメータでサイズの形状は設定が可能です

効果-Progress

塗りの量を設定出来ます。Sliderのような使用感になります。

効果-Fill(塗り)

図形に塗る色やパターンを設定出来ます。

Solid

Linear Gradient

Radial Gradient

Stripe

Grid

Checker

Dots

TextureStamp

任意のテクスチャを並べて配置できます

効果-Outline/Dash

輪郭線を付けることができます。

アウトラインにテクスチャを割り当ててスクロールさせると、以下のような動きのあるアウトライン表現もできます。

また、Dashにチェックを入れると、破線にすることが出来ます。

InnerとOuterで二重の輪郭線を掛けることも可能です。

効果-DropShadow

図形背面に描くシャドウを入れることが出来ます。

シャドウに、ぼかしを掛けることも可能です。

効果-InnerShadow

図形の中にシャドウを入れられます。浮かび上がるようなボタンなどと相性が良いと思います。

効果-Blur

ぼかし表現です。

Blur pxの値をあげると、より広範囲に境界のぼかしが掛かります。

スクリプトから効果を制御する

スクリプトから Procedural Image を変化させる場合、専用のコンポーネントは不要です。ECVFXProceduralImage のプロパティを直接書き換えることが出来ます。

パラメータ名は次のどちらかで調べられます。

• インスペクタのツールチップ — 各項目にマウスを合わせると、説明の末尾に Script: StarRatio のように表示されます。この名前をそのまま使います

• EasyCustomVFXUI/Manual/Reference/ProceduralImage.md — 全パラメータの一覧表があります

サンプルコード

using UnityEngine;
using EasyCustomVFXUI.UI;

public class HudGauge : MonoBehaviour
{
    [SerializeField] ECVFXProceduralImage _hpBar;

    /// HP バー：毎フレーム呼んでよい
    public void SetHealth(float ratio)
    {
        _hpBar.ProgressAmount = ratio;   // Refresh() は不要
    }
}

再描画（Refresh）の扱い

スクリプトでパラメータを書き換えたあとに Refresh() が必要な場合があります。

グループ（Fill など）は値を保持しているだけのオブジェクトなので、書き換えを検知できません。そのため手動で Refresh() を呼びます。複数の値をまとめて変更し、最後に一度だけ呼ぶのが効率的です。

ProgressAmount だけは、ゲージが毎フレーム更新される前提で、頂点の再構築を省いてシェーダーの値だけを書き換える実装になっています。ゲージの増減に使う場合、負荷を気にする必要はありません。

注意事項・制限

• uGUI 専用です。 Graphic のため SpriteRenderer には置けません。ワールド空間のオブジェクトには
  Sprite シェーダーを使用してください。
• 1 インスタンスにつき 1 マテリアルを生成します。 同士でバッチングされないため、パネルやゲージなどの装飾用途に向いています。同じ見た目を何百個も並べる用途には適しません
  パラメータには形状ごとの有効・無効があります。 例えば RingThickness は ShapeType が Ring のときだけ効きます。インスペクタでは現在の形状に関係のない項目が隠されますが、スクリプトからはすべて書き換えられるため、形状と対応しているか確認してください
• このシェーダーは既存の Image / RawImage に効果を後掛けするものではありません。
• アウトライン・シャドウ・エッジソフトネスは矩形の外側に描画されます。コンポーネントが自身の
  メッシュを拡張するため余白設定は不要ですが、レイアウト側にはみ出す分の余地を残してください。

3. LineRendererEffect

LineRendererEffectでは、LineRendererで描画を前提とした様々なエフェクトを掛けることが出来ます。

使い方

ヒエラルキーウィンドウで右クリックすると追加が可能です。
右クリックから、EasyCustomVFXUI > Line メニューから選択が可能です。

LineRendererの子オブジェクトとして生成される、StartPointとEndPointが、Lineの始点と終点になり思い描く線を作ることが出来ます。

Lineの形状の設定

Lineの形状は、Straight、Wave、ZigZag、Arc の4種類から選択が出来ます。いずれもランタイム中に形状やパラメータの値を変えることが出来ます。

Straight

まっすぐな線。

Wave

波線。プロパティのSmoothnessの値を上げると滑らかに、さげるとギザギザした線になります。

ScrollSpeedに値を入れると、波打つような線になります。

ZigZag

ジグザグしたトゲのある線にすることが出来ます。

Arc

円弧の線にすることができます。パラメータのHeightの値をあげると、ロープのような広がりのある円弧になります。

Lineの見た目の設定 Line Standard Shader

EasyCustomVFXUI/LineBeam は LineRenderer / TrailRenderer 用の汎用シェーダです。

Shape

線の色や太さなどの基本的な形状を決めます。

また、テクスチャを割り当てて、UVスクロールが可能です。
左右シームレスなテクスチャを使い、スクロールさせることで、動きのあるLineを表現することが出来ます。

上記の例では以下のサイトのテクスチャ(CC0)を使用しました。
※上記のGIF画像に使っているテクスチャはアセットに同梱していません

Dash

破線の設定が出来ます。

Countなどのパラメータを設定することで、破線の見た目を調整可能です。

Dissolve

線をディゾルブさせて消すことが出来ます。ビームの終わり際の演出などで使えると思います。
NoiseTextureを設定しないと、ノイズの効果が掛からないので注意してください。

Sweepの値を高くすることで、線に沿ったディゾルブ表現が可能です。

Sweap=0の場合

Sweap=0.5の場合

Distortion

雷のようなゆらゆら動くような線にすることが出来ます。

EndAnchorの値をあげると、両端を本来のLineRendererのPointから動かないように固定することが出来ます。

EndAnchor=0.2

EndAnchor=0

Overlay

LineRendererの上にノイズなどを合成することが出来ます。
ベースのLineに、ノイズテクスチャをOverlayすると、よりカッコイイビームが作れます。

Flicker

Lineを点滅させることが出来ます。稲妻のような表現のLineに重ねるとより雷らしさが出ると思います。
頻度の高い点滅は不快感や、光過敏性発作を引き起こす可能性があるため、効果が強くなりすぎないように注意してください。

スクリプトからパラメータを制御する方法

線の見た目を制御する（ECVFX Line Applier）

スクリプトからラインの効果を変化させる場合は ECVFX Line Applier を使います。GameObject > EasyCustomVFXUI > Line > から作成したラインには最初から付いています（手動で LineRenderer を組んだ場合は追加してください）。

変更したいパラメータは ECVFXLinePropertyIDs で指定します。

パラメータ名は次のどちらかで調べられます。

• インスペクタのツールチップ — 各項目にマウスを合わせると、説明の末尾に Script: LineStrength のように表示されます。この名前をそのまま使います
• EasyCustomVFXUI/Manual/Reference/Line.md — 全パラメータの一覧表があります

サンプルスクリプト

using System.Collections;
using UnityEngine;
using EasyCustomVFXUI.Line;

public class BeamController : MonoBehaviour
{
    [SerializeField] ECVFXLineApplier _applier;

    /// ビーム発射：立ち上げ → 維持 → 端から焼き切って消す
    public IEnumerator Fire(float holdTime = 0.6f)
    {
        for (float t = 0f; t < 0.1f; t += Time.deltaTime)
        {
            _applier.SetFloat(ECVFXLinePropertyIDs.LineStrength, t / 0.1f);
            yield return null;
        }
        _applier.SetFloat(ECVFXLinePropertyIDs.LineStrength, 1f);

        yield return new WaitForSeconds(holdTime);

        // ディゾルブで始点側から消す
        _applier.SetFloat(ECVFXLinePropertyIDs.DissolveSweep, 1f);
        for (float t = 0f; t < 0.3f; t += Time.deltaTime)
        {
            _applier.SetFloat(ECVFXLinePropertyIDs.DissolveProgress, t / 0.3f);
            yield return null;
        }

        // 上書きを全て破棄して、マテリアル本来の値に戻す
        _applier.ClearOverrides();
    }
}

線の形を制御する（ECVFX Line Drawer）

上記はラインの見た目の制御です。始点・終点や波形といった線の形そのものは ECVFX Line Drawer が担当します。

using UnityEngine;
using EasyCustomVFXUI.Line;

public class BeamAiming : MonoBehaviour
{
    [SerializeField] ECVFXLineDrawer _drawer;
    [SerializeField] Transform _muzzle;

    /// 銃口と標的を結ぶ（Transform を渡すと毎フレーム追従する）
    public void AimAt(Transform target) => _drawer.SetEndpoints(_muzzle, target);

    /// 座標で固定する場合
    public void AimAt(Vector3 from, Vector3 to) => _drawer.SetEndpoints(from, to);

    public void SetLightningShape()
    {
        _drawer.Style     = ECVFXLineStyle.Zigzag;   // Straight / Wave / Zigzag / Arc
        _drawer.Amplitude = 0.4f;
        _drawer.WaveCount = 6f;
    }

    /// 着弾位置にエフェクトを出す
    public void SpawnImpact(GameObject prefab)
        => Instantiate(prefab, _drawer.EndWorldPosition, Quaternion.identity);
}

始点・終点は SetEndpoints() で設定します。 Transform を渡す形と座標を渡す形があり、Transform 版は毎フレーム追従します。現在の位置は StartWorldPosition / EndWorldPosition で読み取れます。

Line Drawer のその他の項目（Smoothness、Swing Axis、Scroll Speed など）はインスペクタで設定する項目で、スクリプトから変更できるのは Style / Amplitude / WaveCount / Phase です。

注意点

• TrailRenderer でも同じように使えます。 マテリアルのパラメータはすべて同じ動作です
• スクロールするテクスチャは Wrap Mode を Repeat にしてください。Clamp のままだと線の端が引き伸ばされます
• プリセットのマテリアルは複製してから編集してください。 Material/Line/Preset/ 内のマテリアルはパッケージ更新時に上書きされてしまいます。

4. Transition(画面遷移)

シーン切り替えなどの場面転換に使う、汎用的な画面遷移エフェクトです。
uGUI キャンバス経由で描画します。

セットアップ

トランジッション機能を使う場合、トランジッションを開始するシーンに、
GameObject > EasyCustomVFXUI > Screen Transition を追加します。

追加された、ECVFXTransitionCanvasに、掛けたい効果を指定したTransitionPresetをセットします。
デフォルトでは、フェードアウト/フェードイン の効果が設定されています。

あとは、このECVFXScreenTransitionの、Progressの値を、スクリプトやアニメーションクリップ等から変えるだけでトランジッションアニメーションが可能になります。

既定で Persist Across Scenes が ON になっており、シーンをまたいでも生き続け(DontDestroyOnLoad)ます。もちろんシーンを跨がない演出でも使用可能です。

ECVFX Screen Transitionの使い方

トランジッションの設定は、ECVFX Screen Transition から行います。

■Preset
トランジッションプリセットを設定します。
あらかじめ、アウトとインの組み合わせを指定しておき、その組み合わせ通りに、アウト/インのアニメーションを行う仕様です。
プリセットは、プロジェクトウィンドウから右クリックメニューで追加出来ます。

■Progress
トランジッションの進行度合いです。
0が開始前、1がアウト完了後の状態です。

また、Playモード限定で任意のタイミングでインスペクタから、アウト/インのアニメーションを行うことが可能です。

TransitionPresetの内容

Fade

一般的なアルファを変えるフェードアウト、フェードインです。ColorやBackgroundTextureを指定することで任意の背景にすることも可能です。

Wipe

画面端から端までをワイプで覆う方式です。

■WipeMode

Straight
真っ直ぐな線でワイプします。

stripe
交差するようなワイプです。

Blind
帯が太くなるようなワイプです。

Stairs
階段がせり上がってくるようなワイプです。

Tile

幾何学的な模様のタイルのサイズを変化させることで、アウト/インするアニメーションです。

TileShape(タイルの中の形状)は、Circle/Square/Hexagon/Checker の4種類から選択が出来ます。

TileOrderは、タイルの並べ方です。
Simulutaneousで、等間隔。

Directionalで、直線上にグラデーション配置

Randomで、ランダムな並びになります。

Shape

円などの形状を変えることで、アウト/インのアニメーションを行います。
いわゆる「アイリスイン/アウト」というものです。

RuleTextureに任意のテクスチャを入れることで、テクスチャを使ったアイリスイン/アウトが可能です。

Radial

時計のように円を描くようなトランジッションです。

RadialReverseにチェックを入れると、回転方向を逆に出来ます。

Dissolve

画面が徐々に暗くなる表現です。

また、任意のテクスチャを割り当てることで、自由なディゾルブ表現が可能です。
テクスチャを設定しなくても、ディゾルブ表現は出来るようになっています。

以下の効果は、Outのアニメーションを開始する瞬間の画面をキャプチャし、そのキャプチャした映像に効果を加えるようにして動きます。
Inでは使用出来ません。

Twirl(Outのみ)

画面を回転するようにしてフェードアウトします。

RadialZoom(Outのみ)

画面奥から迫ってくるようなアニメーションです。戦闘の開始時などに使うと良いと思います。

Glitch(Outのみ)

グリッチを掛けながらフェードアウトするアニメーションです。

CrtOff(Outのみ)

テレビの電源を切るようなアニメーションです。パチンコの演出やテレビ画面が消えるときに使うと良いと思います。

スクリプトからパラメータを制御する方法

アニメーションを挟むため、非同期な処理を行う必要があります。

コルーチンの中で yield return するだけです。

using System.Collections;
using UnityEngine;
using UnityEngine.SceneManagement;
using EasyCustomVFXUI.Transition;

public class SceneChanger : MonoBehaviour
{
    [SerializeField] ECVFXTransitionPreset _preset;

    public void Change(string sceneName) => StartCoroutine(ChangeRoutine(sceneName));

    IEnumerator ChangeRoutine(string sceneName)
    {
        yield return ECVFXScreenTransition.Out(_preset);   // 画面を覆う
        SceneManager.LoadScene(sceneName);                 // シーンをロード
        yield return ECVFXScreenTransition.In(_preset);    // 新しいシーンを開く
    }
}

コルーチンを使いたくない場合は、完了コールバックを登録できます。

ECVFXScreenTransition.Out().OnCompleted(() => Debug.Log("finished covering"));

また、プリセットを外部から渡して、指定したPresetパターンで、トランジッションを行うことも出来ます。その場合は以下のように記述します。

using System.Collections;
using UnityEngine;
using UnityEngine.SceneManagement;
using EasyCustomVFXUI.Transition;

public class SceneFlow : MonoBehaviour
{
    [SerializeField] ECVFXTransitionPreset _presetX;   // A → B 用
    [SerializeField] ECVFXTransitionPreset _presetY;   // B → A 用

    public void GoToB() => StartCoroutine(Change("SceneB", _presetX));
    public void BackToA() => StartCoroutine(Change("SceneA", _presetY));

    IEnumerator Change(string scene, ECVFXTransitionPreset preset)
    {
        yield return ECVFXScreenTransition.Out(preset);
        SceneManager.LoadScene(scene);
        yield return ECVFXScreenTransition.In(preset);
    }
}

UniTaskを使う場合

本パッケージはUniTaskには依存していませんが、UniTaskを使う場合は、以下のコードで新規ファイルを作ればasync/awaitでトランジッションを呼び出せます。

以下の内容を ECVFXTransitionUniTaskExtensions.cs というファイル名で、プロジェクト内の 任意の場所(例: Assets/Scripts/)にそのまま保存してください。これで準備は完了です。

// ECVFXTransitionUniTaskExtensions.cs

using Cysharp.Threading.Tasks;
using EasyCustomVFXUI.Transition;

public static class ECVFXTransitionUniTaskExtensions
{
    /// <summary>トランジションの完了を UniTask として待てるようにします。</summary>
    public static UniTask ToUniTask(this ECVFXTransitionHandle handle)
    {
        if (handle.IsDone) return UniTask.CompletedTask;
        var source = new UniTaskCompletionSource();
        handle.OnCompleted(() => source.TrySetResult());
        return source.Task;
    }

    /// <summary>ハンドルを直接 await できるようにします(await ECVFXScreenTransition.Out(); と書けます)。</summary>
    public static UniTask.Awaiter GetAwaiter(this ECVFXTransitionHandle handle)
        => handle.ToUniTask().GetAwaiter();
}

トランジッションを呼び出す時は、任意のクラスから以下のように書くことが出来ます。

using Cysharp.Threading.Tasks;
using UnityEngine.SceneManagement;
using EasyCustomVFXUI.Transition;

public async UniTask ChangeSceneAsync(string sceneName)
{
    await ECVFXScreenTransition.Out(_preset);
    await SceneManager.LoadSceneAsync(sceneName);
    await ECVFXScreenTransition.In(_preset);
}

その他の注意事項

5. Screen FX

URP のレンダラー機能を使ったフルスクリーンエフェクトです。

グレースケール・セピア、2 値化、波状の歪み、グリッチ、モザイク、ブラー、放射状ブラー、集中線（スピードライン）などを、ポストプロセスのように掛けることが出来ます。
各効果を重複して掛けることも可能です。

また、パラメータはすべてスクリプトからランタイム制御が可能です。

セットアップ

ヒエラルキーウィンドウで、右クリックから、EasyCustomVFXUI > ScreenFX を選択します。

Renderer Feature が URP レンダラーにまだ追加されていない場合、追加するかどうかのダイアログが
表示されます。Add を押すと自動的に設定されます。

RendererFeatureのセットアップは、Tools > EasyCustomVFXUI > Add ScreenFX Renderer Feature からも実行できます。

・シーン内で有効になっている ECVFXScreenFX は 1 つだけが効果を持ちます（2 つ目を追加しようとすると警告が出ます）
・既定ではすべてのカメラに効果が適用されますが、Target Camera を設定すれば
特定のカメラだけに制限できます。

効果とパラメータ

すべての強さ系パラメータは 0〜1 に正規化されており、0 はその効果を完全にスキップします
（オフの効果は描画コストは掛かりません）。

Color

Grayscale/Binarize(白黒化)/Negative(色反転)の3種類の加工が出来ます。

Grayscale

GrayscaleColorを設定すると、セピアっぽい表現も可能です。回想の演出などで使うといいでしょう。

Binarize

全体を白黒の2値にします。必殺技の画面演出などで使えます。

Negative

色を反転します。攻撃のインパクトの瞬間などに一瞬だけ挟んだりすると、技の強力さを演出できます。

Distort（波状の歪み）

ぐにゃぁ～とした歪み表現が出来ます。

歪みの強さや頻度などを調整可能です。

■DistorotMode

Sine
規則正しい揺れ、画面全体が一定リズムでうねる。

Noise
不規則な揺れ。場所ごとに揺れの量がバラつきがあります。

Both
規則的なうねりの上に不規則なムラが乗る。水中や、陽炎表現などで使うと良いと思います。

Glitch

グリッチ表現です。画面全体がバグったような表現が出来ます。

パラメータが多いので以下にて詳細を解説。

Look — グリッチの中身

Timing — いつグリッチエフェクトが画面に出るか
ConstantLevel = 1 だと常時グリッチエフェクトが掛かる。
ConstantLevel = 0 だとバースト(一定間隔)でエフェクトが掛かる。

Pixelate

モザイクのような表現に出来ます。
PixelateCellsが小さいほど、粗いモザイクになります。

Blur

ガウシアンブラーです。一律で画面全体をぼかします。

Blurの数値が1に近づくつほど強く掛かります。

RadialBlur

ラディアルブラーです。戦闘に入る直前の遷移や、ワープ移動などの表現で使えます。

こちらもRadialBlurの値が大きいほど強くかかります。

SpeedLine

みんな大好き集中線です。

集中線の密度や色などを設定出来ます。

■SpeedLineMode

• Radial
  画面中央に向かっていく集中線になります。強いられているんだ!

• Linear
  画面 を縦/横に流れるスピード線になります。疾走感のあるシーンや、必殺技演出に使うと良いと思います。

パラメータをスクリプトから制御する

各パラメータの値は、スクリプトから制御が出来ます。

スクリプトから画面全体の効果を変化させる場合は、ECVFXScreenFX のプロパティを直接書き換えます。仲介コンポーネントは不要です。

パラメータ名は次のどちらかで調べられます。

• インスペクタのツールチップ — 各項目にマウスを合わせると、説明の末尾に Script: GlitchIdle のように表示されます。この名前をそのまま使います
• EasyCustomVFXUI/Manual/Reference/ScreenFX.md — 全 44 パラメータの一覧表があります

サンプルコード

using System.Collections;
using UnityEngine;
using EasyCustomVFXUI.ScreenFX;

public class ScreenEffects : MonoBehaviour
{
    [SerializeField] ECVFXScreenFX _screenFX;

    /// 被弾：グリッチを一瞬走らせて戻す
    public IEnumerator DamageGlitch()
    {
        for (float t = 0f; t < 0.3f; t += Time.deltaTime)
        {
            _screenFX.GlitchStrength = 1f - t / 0.3f;
            yield return null;
        }
        _screenFX.GlitchStrength = 0f;
    }

    /// 全効果をオフにする
    public void ClearAll() => _screenFX.ClearAll();
}

2 つのメソッドの違い

開発ロードマップ

V1.1.0(2026年10月予定)

汎用パーティクルパックを追加。
前作のEasyCustomVFX/UIのパーティクルの同梱内容を、大幅にパワーアップした内容でお届け！

サポート

不具合報告・ご要望は、Discordにて受け付けております。

また、不具合の報告時は、Unity のバージョン、URP のバージョン、再現手順を添えていただけると調査がスムーズです。

FAQ

Spriteが発光してくれない

ポストプロセスの Bloom が効いていないと発光しません。 このパッケージが行うのは「1 を超える明るさ（HDR）を出力する」ところまでで、 それを光の滲みに変えるのは URP 側の Bloom。

確認する順番はこの 3 つ。

1. シーンに Volume があり、Bloom が追加されているか （GameObject > Volume > Global Volume → Add Override → Post-processing > Bloom）
2. カメラの Post Processing にチェックが入っているか
3. 色が 1 を超えているか — HDR カラーピッカーの Intensity を上げる。 1.0 のままでは、どれだけ Bloom を強くしても光らない

Bloom の Threshold が高すぎても拾われない。効いているか怪しいときは Threshold を一時的に 0 付近まで下げて確認するとわかりやすい。

ScreenFX の値を変更しても画面が何も変わらない

ScreenFX Renderer Feature が URP の Renderer に入っていない。 インスペクターの Add Renderer Feature ボタンを押す （Tools > EasyCustomVFXUI > Add ScreenFX Renderer Feature でも同じ）。

Quality レベルごとに URP Asset が分かれている場合は、いま使われている URP Asset の Renderer に入っているかを確認する。
RendererFeatureの設定ファイルは、Assets/Settings フォルダに入っていることが多い。