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

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

#UnityShader

投稿日:2024-07-24

更新日:2026-08-18

分割テレポートシェーダー概要

まず実装結果のサンプル動画は次の通り。

今回のシェーダーは事前に対象画像の座標やスケール情報をC#からシェーダーに受け渡す必要があります。
この辺りの処理が複雑で説明するのも少し面倒なので、SliceTeleportControllerというC#の仲介クラスも一緒に作っておきました。
実装に必要なシェーダー、マテリアル、C#スクリプトをまとめてUnityPackage化して、こちらにアップロードしてあります。

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

TweenではなくUnity Coroutineで対応したい場合は、SliceTeleportController内のコードを少し書き換える必要があります。
複雑なことはやっていないので、書き換える場合もそんなに難しくないと思います。

後述しますがテレポート演出させたい画像に対しては、結構制約があります。
例えばSpriteEditorでスライスしてある画像や、アトラス内にパッケージしてある画像は上手く座標移動ができないです。
周囲に透明部分のマージンがない画像は謎の線が走ったりするし、MeshTypeが適切でないと奇妙に画像が途切れます。

分割テレポートシェーダーの実装の仕方

SliceTeleport.UnityPackageをインポートすると、Projectに3つのファイルが追加されます。
UnityPackageインポートした結果のProject

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

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

代入が実行されなかった場合（Imageコンポーネントがアタッチされてなかった場合など）はDebug.LogErrorが表示されます。

アニメーションテスト

これだけでほぼ前準備は終わりなので、続いてテストに入ります。
UnityのPlayボタンを押して実行状態にし、SliceTeleportControllerを右クリック、すると下の方にデバッグコマンドが出てきます。
SliceTeleportControllerのデバッグコマンド

DebugDoTeleportがテレポートアニメーションの再生、DebugUndoTeleportがテレポートアニメーションの逆再生になります。
下はSliceTeleportController内のC#のコードです。

Copy Code


#if UNITY_EDITOR
    [ContextMenu("DebugDoTeleport")]
    private void DebugDoTeleport()
    {
        DoTeleport(8, 1.5f);
    }

    [ContextMenu("DebugUndoTeleport")]
    private void DebugUndoTeleport()
    {
        UndoTeleport(8, 1.5f);
    }
#endif

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

SliceTeleportController内にDoTeleportとUndoTeleportがpublic関数として用意してあります。
他のC#スクリプトからこの関数にアクセスし、アニメーションを実行できます。
第1引数の跳躍距離は、ピクセル距離とかではなく自分のImageの高さの何倍かという値になるので注意。

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);
        });
    }

他の機能として、x軸にスライスする回数の変更と、色の変更処理があります。
それぞれ、DoTeleportやUndoTeleportを呼ぶ前に実行する必要があります。

下はスライス回数変更のSliceTeleportController.SetSeliceCount関数。

Copy Code


    /// <summary>
    /// テレポートする際の画像の分割数を変更する。1~20の指定が可能
    /// </summary>
    public void SetSeliceCount(int sliceCount)
    {
        this.sliceCount = sliceCount;
    }

引数のsliceCountに2を渡すとx軸に3分割、3を渡すと5分割、4を渡すと7分割になります。
つまり1 + (sliceCount - 1) * 2みたいな計算式で我ながら少し分かり辛いです。

下はSliceCountを操作した際の見た目の違い。20まで上げると最早ただの矢印になります。

上の動画ではシェーダー内のプロパティに設定してある[HideInspector]を削除し、C#を介さずに直接マテリアルのSliceCountを弄っています。

Copy Code


    Properties
    {
        //以下4つの変数は適切にImageの座標を調整するために必要
        [HideInInspector]_CanvasScreenHeight("CanvasScreenHeight", float) = 1000
        [HideInInspector]_PosY("PosY", float) = 0
        [HideInInspector]_ScaleY("ScaleY", float) = 1
        [HideInInspector]_ImageHeight("ImageHeight", float) = 100

        [Space(10)]
        [HideInInspector]_SliceCount("SliceCount", Range(1, 20)) = 4 //テレポートする際の画像の分割数
        [HideInInspector]_Distance ("Distance", Range(1, 20)) = 1 //テレポートの移動距離
        [HideInInspector]_TeleportPow ("TeleportPow", Range(0, 1)) = 0 //テレポートの進捗、1で完全にテレポート完了

        [Space(10)]
        [Toggle] 
        [HideInInspector]_UseMonoCol("UseMonoCol", float) = 1 //テレポートの途中で単一色に変化するかどうか
        [HideInInspector]_MonoCol("MonoCol", Color) =  (1.0, 1.0, 1.0, 1.0) //単一色の色
    }

動画を撮るために一時的に[HideInspector]を削除しましたが、今回のシェーダーはちょっとデリケートなのであまりお勧めしない行為です。
特にPosYやScaleYを無闇に弄るとエラいことになります。SliceTeleportControllerからのアクセスに限定させた方が安全です。

続いて色の変更処理について。このシェーダーは転送が進むにつれて画像が単一色に変化しますが、その色を変更できます。
下がその変更処理のSliceTeleportController.SetColor関数です。

Copy Code


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

下の動画は、色を変更するとどうなるかのサンプルです。

また単一色の変化していく効果を切ることもできます。
下はそのSliceTeleportController.UnsetColor関数のコードとサンプル動画です。

Copy Code


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

実装する際の注意点

テレポートシェーダーを適用させる画像は独立した画像である必要があります。
例えば下のようなキャラチップをまとめた画像があったとします。
シェーダーで使うキャラチップ

SpriteEditorで適切に分割します。

分割した一番最初の画像をImageに割り当てたとします。
分割したキャラチップのアタッチ

この状態のImageコンポーネントに対し、テレポートシェーダーを使うと次のようになります。

色々おかしいですが、まずもって画像がx軸に分割されていないです。
画像全体に対しては分割処理をしていますが、対象のキャラチップは画像全体の左端にあり、その狭い範囲では分割されていません。
テレポートする際の画像の座標移動も、キャラチップ単体ではなく、画像全体を基準にして実行しています。

似た理屈で、画像をアトラス化してしまうと上手くシェーダーが機能しないです。
アトラス化画像のサンプル

まだ独立した画像であっても、周囲に透明マージンがないとおかしな事になります。
例えば下のような画像があったとします。見ての通り周囲に全くマージンがないです。
マージンがない画像のサンプル

これに対しテレポートシェーダーを走らせると次のようになります。

上下に謎の線が走っているのが確認できます。
内部的なことを言うと、このシェーダーはプロパティのDistanceの値の分だけ、頂点シェーダーでy軸に画像を引き伸ばしています。
この引き伸ばし処理の時に、画像端に接してる部分のピクセル色をそのままコピーし続けてしまいます。

なので下の画像のように、周囲に透明部分を作って画像端のピクセル色はα=0である必要があります。
マージンを入れた画像のサンプル

画像を用意しただけでは不十分で、インスペクター上で対象画像のMeshTypeをFullRectにする必要があります。
画像のMeshTypeの変更

こうしないと親切にもUnity側で勝手にマージン部分を切り詰めてしまいます。

ここまで調整すると、まともなテレポート演出が確認できます。

...

p.99

p.100

p.101

p.102

p.103

p.104

p.105

p.106

p.107

p.108

p.109

...

< 【Unity Shader】UI陽炎シェーダー

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