コツコツエンジニアノート

【Unity Shader】UI粒子テレポートシェーダー

#UnityShader

投稿日:2024-08-03

更新日:2026-08-18

粒子テレポートシェーダー概要

まず実装結果のサンプル動画は次の通り。技術的にはドット欠けシェーダーの知識を応用しています。

内部にいくつか設定を用意していて、粒子の大きさを変えたり、色やバラつきも変更が出来ます。

実装がやや複雑なため、BitTeleportControllerというC#側の仲介スクリプトを作っておきました。
必要なシェーダー、マテリアル、C#スクリプトをまとめてUnityPackage化して、こちらにアップロードしてあります。

BitTeleportControllerではTweenという機能を使ってアニメーションを実装しています。
このため、あらかじめ DOTweenをアセットストアからインポートしておくが必要あります。

テレポート演出させたい画像に対しては、残念ながら強い制約があります。
この辺りの注意点は分割テレポートシェーダーと全く一緒です。

粒子テレポートシェーダーの実装の仕方

だいたいの部分は分割テレポートシェーダーと内容が一緒になります。
BitTeleport.UnityPackageをインポートすると、Projectに3つのファイルが追加されます。
インポート直後のProjectの状況

BitTeleportControllerはBitTeleportマテリアルを参照し、BitTeleportマテリアルはBitTeleportシェーダーを参照しています。

まずはBitTeleportControllerを、ImageコンポーネントがアタッチされたGameObjectにアタッチします。
するとBitTeleportController内のReset関数によって、自動でメンバ変数の「Target」と「Canvas」に代入が実行されます。
BitTeleportControllerのインスペクター

アニメーションテスト

UnityのPlayボタンを押して実行状態にし、BitTeleportControllerを右クリック、すると下の方にデバッグコマンドが出てきます。
BitTeleportControllerのデバッグコマンド

DebugDoTeleportがテレポートアニメーションの再生、DebugUndoTeleportがテレポートアニメーションの逆再生になります。

アニメーションの細かい設定

BitTeleportController内にDoTeleportとUndoTeleportがpublic関数として用意してあります。
他のC#スクリプトからこの関数にアクセスし、アニメーションを実行できます。

Copy Code


    /// <summary>
    /// テレポートを実行
    /// </summary>
    /// <param name="distance">テレポートの跳躍距離</param>
    /// <param name="duration">テレポートにかかる時間</param>
    public void DoTeleport(float distance, float duration)
    {
        SetBaseMaterialValue();
        target.material.SetFloat("_Distance", distance);
        target.material.SetFloat("_TeleportPow", 0);

        DOTween.To(() => target.material.GetFloat("_TeleportPow"), (val) =>
        {
            target.material.SetFloat("_TeleportPow", val);
        }, 1, duration).SetEase(Ease.InQuad);
    }

    /// <summary>
    /// テレポートの逆再生
    /// </summary>
    /// <param name="distance">テレポートの跳躍距離</param>
    /// <param name="duration">テレポートにかかる時間</param>
    public void UndoTeleport(float distance, float duration)
    {
        SetBaseMaterialValue();
        target.material.SetFloat("_Distance", distance);
        target.material.SetFloat("_TeleportPow", 1);

        DOTween.To(() => target.material.GetFloat("_TeleportPow"), (val) =>
        {
            target.material.SetFloat("_TeleportPow", val);
        }, 0, duration).SetEase(Ease.OutQuad).OnComplete(() =>
        {
            target.material.SetFloat("_Distance", 1);
            target.material.SetFloat("_PosY", 0);
        });
    }

アニメーションの設定は分割テレポートシェーダーと違う所がいくつかあります。
まず分割テレポートにあったSetSliceCount関数が削られていて、その代わりSetBitRoughnessとSetScattering関数が追加されています。

SetBitRoughnessは、テレポートする際の粒子の粗さを調整できます。
BitTeleportController内では初期値が100に設定されてあります。

Copy Code


    /// <summary>
    /// テレポートする際の粒子の粗さを変更する。おすすめは1~200の間。
    /// </summary>
    public void SetBitRoughness(int roughness)
    {
        this.roughness = roughness;
    }

左から順に1, 100, 200を設定した動画は次の通り。小さすぎると、演出として分かり辛いかもしれないです。

SetScatteringは、テレポートする際の粒子のバラつき具合を調整できます。
BitTeleportController内では初期値が2に設定されてあります。

Copy Code


    /// <summary>
    /// テレポートする際の粒子のバラつき具合を変更する。おすすめは1~10の間。
    /// </summary>
    public void SetScattering(int scattering)
    {
        this.scattering = scattering;
    }

左から順に1, 5, 10を設定した動画は次の通り。また違いを分かりやすくするためアニメーションのdurationを10秒に変更しています。

アニメーション完了までの時間はほぼ変わらないですが、粒子が上に登っていく速度が違うため結果的にバラつき具合異なって見えます。

続いてSeColorについて。このシェーダーは転送が進むにつれて画像が単一色に変化するが、その色を変更できます。
この辺りの設計は分割テレポートと全く一緒でコードは次の通りです。

Copy Code


    /// <summary>
    /// テレポートする際の単一色の指定
    /// </summary>
    public void SetColor(Color color)
    {
        isUseMonoCol = true;
        monoCol = color;
    }

試しに変化色を赤に変え、ついでにroughnessを50に変更すると次のような見た目になります。

血が滴るような、吸血鬼っぽさが演出出来てちょっとカッコイイ。

次のコードを呼ぶことで単一色の変化していく効果を切ることもできます。

Copy Code


    /// <summary>
    /// テレポートする際に単一色に変化させない設定
    /// </summary>
    public void UnsetColor()
    {
        isUseMonoCol = false;
    }

...

p.100

p.101

p.102

p.103

p.104

p.105

p.106

p.107

p.108

p.109

p.110

...

< 【Unity Shader】UI分割テレポートシェーダー

シェーダー内の数値を可視化するシェーダー >