マップ端のエフェクトについて

Question

こちらで添付しているようなキャラがマップの端にふれると触れた部分周辺のみエフェクトが表示されるものを作りたいですがどう作っていいのか全くわかりません。
いろいろ説明が足りていない質問になってしまい申し訳ございませんがなにかアイデアをいただけませんでしょうか。
よろしくお願いいたします。

https://youtu.be/6yTbVFXOW60?t=214

Answer 1

方法を調べてみるにしても検索キーワードをどうしたらいいのか悩ましいですね...
ちょっと検索してみたところほとんどは無関係な記事ばかりだったのですが、POLYGONOMICON ステージ端エフェクトにステージ端のエフェクトを作ったとの日記がありました。近づくほどはっきり表示させるようなマテリアルだそうですが、おそらく比較的シンプルに作れそうでいいんじゃないかと思います。

ですがご質問者さんのご提示いただいたムービーの場合は、単純に近づくと表示されるだけでなく、触れた点を中心に波紋のようにエフェクトが広がっているようです。こういった表現をしたいとなるとひと工夫必要そうですね。
一案として、まず下記のようなスクリプトを用意し...

using System.Linq;
using UnityEngine;

public class Barrier : MonoBehaviour
{
    private const int MaximumImpulseCount = 8;
    private static readonly int ImpulsesProperty = Shader.PropertyToID("_Impulses");
    private static readonly Vector4[] Impulses = Enumerable.Repeat(
        new Vector4(0.0f, 0.0f, 0.0f, float.PositiveInfinity),
        MaximumImpulseCount).ToArray();
    private static int impulseIndex;
    private static Material sharedMaterial;
    private static bool needsUpdateMaterial;

    // ここにインスペクター上でバリア用マテリアルをセットしておく
    [SerializeField] private Material material;

    public static void ApplyImpulse(Vector3 position)
    {
        // キャラクターがバリアにぶつかった...などで衝突エフェクトを発生させたい場合、このメソッドを実行する
        // Impulsesにバリア衝突エフェクトの中心位置、および衝突が起こった時刻を記録するようになっている
        // 最大でMaximumImpulseCount個のデータを記録でき、それ以上は古いデータから順に上書きされていく
        Debug.Log($"Apply impulse {impulseIndex} at {position}");
        Impulses[impulseIndex].x = position.x;
        Impulses[impulseIndex].y = position.y;
        Impulses[impulseIndex].z = position.z;
        Impulses[impulseIndex].w = Time.timeSinceLevelLoad;
        impulseIndex = (impulseIndex + 1) % Impulses.Length;
    }

    private void Awake()
    {
        // すべてのバリアは一つのマテリアルを共有することにする
        if ((sharedMaterial == null) && (this.material != null))
        {
            sharedMaterial = this.material;
        }
    }

    private void Start()
    {
        // このタイミングで個々のオブジェクトのマテリアルは共有バリアマテリアルに置き換わる
        // そのため、非プレイモードの時点でレンダラーにセットしておくマテリアルは
        // 何であってもかまわないということになる
        // そこで、シーン編集の段階では常時表示される普通のマテリアルをセットしておくことで
        // バリアがシーン上にどのように配置されているか把握しやすくなるんじゃないかと思う
        var r = this.GetComponent<Renderer>();
        if (r != null)
        {
            r.sharedMaterial = sharedMaterial;
        }
    }

    private void Update()
    {
        needsUpdateMaterial = true;
    }

    private void LateUpdate()
    {
        if (needsUpdateMaterial && (sharedMaterial != null))
        {
            // 毎フレーム、シーン中のいずれかのBarrierが代表して
            // 共有バリアマテリアルに現在のImpulseデータを送る
            sharedMaterial.SetVectorArray(ImpulsesProperty, Impulses);
        }

        needsUpdateMaterial = false;
    }
}

それをQuadオブジェクトにアタッチ、さらにスケールを適当に広げてシーン上に配置してみました（これがマップ端の壁のつもりです）。
スクリプトにはマテリアルをセットするためのフィールドがありますが、そこには下記のようなマテリアルをセットしておきます。

Shader "Effect/Barrier"
{
    Properties
    {
        [HDR] _Color ("Color", Color) = (8.0, 1.0, 0.0, 1.0)
        [NoScaleOffset] _MainTex ("Pattern", 2D) = "white" {}
        _PatternAspect ("Pattern Vertical Aspect", Float) = 1.73205080757
        _PatternTiling ("Pattern Tiling", Float) = 2.0
        _PatternExponent ("Pattern Exponent", Float) = 32.0
        _ImpulseSpeed ("Impulse Speed", Range(0.01, 10.0)) = 4.0
        _ImpulseScale ("Impulse Scale", Range(0.001, 2.0)) = 0.5
        _ImpulseDecay ("Impulse Decay", Range(0.01, 10.0)) = 2.0
    }
    SubShader
    {
        Tags { "Queue"="Transparent" "RenderType"="Transparent" }

        Pass
        {
            // 加算合成
            Blend One One

            // Zテストは行うがZ書き込みは行わない
            ZTest Less
            ZWrite Off

            // 両面レンダリング
            Cull Off

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            // さしあたり、衝突エフェクトの同時描画数は8個までとする
            #define MAXIMUM_IMPULSE_COUNT 8

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float3 worldPos : TEXCOORD1;
                float4 vertex : SV_POSITION;
            };

            float4 _Color;
            sampler2D _MainTex;
            float _PatternAspect;
            float _PatternTiling;
            float _PatternExponent;
            float _ImpulseSpeed;
            float _ImpulseScale;
            float _ImpulseDecay;
            float4 _Impulses[MAXIMUM_IMPULSE_COUNT];

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);

                // ワールド座標を用意しておく
                o.worldPos = mul(unity_ObjectToWorld, v.vertex);

                // UVマッピングには_MainTex_STを使ったタイリング・オフセットは使用せず
                // 自前で用意したプロパティをもとにスケーリングすることにした（ただの気まぐれ）
                // また、バリアオブジェクトはさまざまな大きさに拡大縮小されて配置されると予想されるため
                // XとYの拡大率をUVにかけることでパターンの大きさが一定になるようにしてみた
                o.uv = v.uv * float2(_PatternAspect * length(unity_ObjectToWorld._11_21_31), length(unity_ObjectToWorld._12_22_32)) * _PatternTiling;
                return o;
            }

            float getImpulseIntensity(in float4 impulse, in float3 fragPos)
            {
                // まずこのフラグメントと衝突中心の距離、および経過時間を求める
                float3 p = fragPos - impulse.xyz;
                float lsq = dot(p, p);
                float l = sqrt(lsq);
                float t = _Time.y - impulse.w;

                // 衝撃の最前線は中心からこれだけ離れており...
                float f = _ImpulseSpeed * t;

                // 最前線がこのフラグメントを通り過ぎた距離はこうなる
                float x = f - l;

                // 値は0以上になるようにして...
                x = max(x, 0.0);

                // さらにスケーリングしてピークの太さを調節する
                x /= _ImpulseScale;

                // 衝撃の強度を求める
                // 強度関数として原子の電子の1s軌道の動径分布関数をベースに形状を調整したものを使った
                // 参考： http://sciencetips.web.fc2.com/quantam140.html
                // これでなければならない理由はなく、ただグラフの形が好都合そうだったから流用しただけ
                float i = x * x * exp(2.0 * (1.0 - x));

                // このフラグメントと衝突中心の距離の2乗に反比例して強度を減衰させる
                i /= lsq * _ImpulseDecay;

                return i;
            }

            float4 frag(v2f i) : SV_Target
            {
                // それぞれの衝突点に由来する衝撃強度を合算する
                float intensity = 0.0;
                for (int j = 0; j < MAXIMUM_IMPULSE_COUNT; j++)
                {
                    intensity += getImpulseIntensity(_Impulses[j], i.worldPos);
                }

                // テクスチャからバリアの模様を取得して...
                float pattern = tex2D(_MainTex, i.uv).r;

                // 冪乗して見た目を調節し...
                pattern = pow(pattern, _PatternExponent);

                // 色に模様と衝撃強度を乗算して返す
                return _Color * (pattern * intensity);
            }
            ENDCG
        }
    }
}

マテリアルの「Pattern」プロパティにはバリアの模様となるテクスチャをセットします。
さしあたり下図のような画像を使い...

インポート設定は下図のようにしました。Wrap Modeを「Mirror」とすることで上下左右に鏡映繰り返しさせ、六角形の蜂の巣模様にしようという魂胆です。また、1チャンネルさえあれば用は足りるので、フォーマットを「R 8」にしています。

そして、とりあえずプレイヤーキャラクターには下記のスクリプトをアタッチしました。
バリアとの衝突を検知して、衝突点のワールド座標を引数にApplyImpulseを実行するだけのものです。

using UnityEngine;

[RequireComponent(typeof(Rigidbody))]
public class BarrierImpulser : MonoBehaviour
{
    [SerializeField] private string barrierTag = "Barrier";

    private void OnCollisionEnter(Collision collision)
    {
        if (collision.gameObject.CompareTag(this.barrierTag))
        {
            Barrier.ApplyImpulse(collision.GetContact(0).point);
        }
    }
}

壁を2枚、さらについでにティーポットを守る球形のバリアを1個設置して動かしてみると、下図のようになりました。わりといい雰囲気になったんじゃないでしょうかね?

Comments

[退会済みユーザー]

Bongoさんありがとうございます…！参考スクリプトだけでなく素敵なサンプルまであり本当に驚きました。
まさにこんな感じですので参考にさせていただきます。本当にありがとうございました。