ディゾルブ演出が簡単にできるアセット「Advanced Dissolve」の紹介

時空のゆがみからキャラクターが出てくるときのディゾルブを作ることができるアセット「[Advanced Dissolve](https://assetstore.unity.com/packages/vfx/shaders/advanced-dissolve-111598)」（$38.5）の紹介です。有料なのですが、その分簡単にかっこいい演出ができるなと感じています。

![adam_sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/4ccfb9d4-173c-3e97-6f19-970ea46e419b.gif)

# ディゾルブさせるのに2つの方法があります
1. 単体で機能させる方法。シェーダーの値を変更して、適用しているGameObjectだけに影響させる方法
2. 何かと連携して機能させる方法。ディゾルブさせたいマテリアルを登録し、ディゾルブさせる方法（XYZ平面におけるポジションとかPlaneを利用するとか）を決めて、対象のGameObjectをディゾルブさせる方法。サンプルの動画はこちらの方法

1が簡単なので、まず1から紹介しています。

# 単体で機能させる方法のやり方
1. マテリアルの設定
    1. マテリアルを新規作成します
    2. Amasing Assets/Advanced Dissolve/Standard/Metallicを選択します        
        ![2024-09-22_23h10_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/03d124e5-9af0-0c7a-c093-30c8270ae0de.png)        
    3. Advanced DissolveのStateをEnable、StandardのSourceをCsutom Mapに設定します
        ![2024-09-22_23h12_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/f5ca3195-cc4b-5dad-4967-6856fd4a7533.png)
    4. MapにAssets/Amazing Assets/Example Scenes/Tutorial Scenes/Files/Textures/Cutout/Cutout Map 1を設定します
        ![2024-09-22_23h14_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/9786a9b0-5821-b9f1-3c6f-1135a070e7e1.png)        
2. CubeをHierarchy上に新規作成し、1で作成したマテリアルを適用します
3. Clipの値を変更すればディゾルブが確認できます
    ![simple.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/517b7221-d50c-c0d6-973d-d5af5adeb94c.gif)    

# 光ってる感じが欲しい

ここはAdvanced Dissolveから少し外れます。

1. Post Effectの導入します。[【初心者向け】Post ProcessingのBloomを設定してCubeをふんわり光らせます](https://qiita.com/matchyy/items/186d60699ad5c2ed8571) を参考に導入してください
2. EdgeのSourceをCutout Standard（①）、Colorを好きな色（②、SFっぽい感じの青にしました）、Intensityを1.3（③）に設定します
    ![2024-09-26_23h59_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/6fade54e-6f56-0bfb-af01-62ef8411a031.png)
3. これだけでClipの値を変更すれば光りながらディゾルブされます    
    ![bloom.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/68c65766-77ad-3a78-9791-f924ccb96e66.gif)


# 一定方向から消える、あるいは出るようにしたい

ここで何かと連携して機能させる方法を利用することになります。今回はPlaneを選択しています。

1. HierarchyでCreateEmptyして、Add ComponentからAdvanced Dissovle Keywords Controllerを追加します
2. State（①）、Standard Source（②）、Geometric Type（③）、Base Source（④）、Materials（⑤）を以下の値に設定します
    ![2024-09-27_00h53_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/9775d059-0ee7-7048-2c55-02242689cfae.png)
3. HierarchyでCreateEmptyして、Add ComponentからAdvanced Dissovle Properties Controllerを追加します
4. Map1にCutout Map 1を設定します    
    ![2024-09-27_00h56_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/d27281a6-1a84-c144-2128-c5d44395817d.png)    
5. EdgeのColor（①）、Color Intensity（②）を以下の値に設定します
    ![2024-09-27_00h57_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/cd59e3ec-f2b6-0dc7-8b22-b365ced14d28.png)    
6. Materilasを設定します
    ![2024-09-27_01h00_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/dd9a3f6b-ae12-4f8f-bc2d-67a6cafd624c.png)    
7. HierarchyでCreateEmptyして、Add ComponentからAdvanced Dissovle Geometric Cutout Controllerを追加します
8. Type（①）、Noise（②）、Materials（③）を設定します
    ![2024-09-27_01h07_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/a55757d3-7e66-a24d-391a-7d548b5237ce.png)    
9. ↑のCreateボタン（④）を押すと、Plane#1にTarget(1)が設定されます。Target(1)はHierarchyを見ると、AD Geometric Cutout Controllerの子として生成されています
    ![2024-09-27_01h11_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/5e52859f-3a4f-3986-b81e-8b4d606530c2.png)
10. このTarget(1)を上下させれば、CubeがTarget(1)の位置に合わせてディゾルブします
    ![plane.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/cecaae78-0f8b-ed11-f253-5db81eab5425.gif)    

# 面から出てくる演出を作りたい

実際に面が必要なわけではないんですが、見た目的に面があるほうがそれっぽく見えます。

1. Planeを作ります。白だとわかりにくいので合わせてMaterialも作って好きな色に変更します
    ![2024-09-27_01h25_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/51ac0452-58bc-d2be-62b1-5086af9f294d.png)
2. Target(1)をPlaneの子にします。このときにPositionのYを-0.1に設定します。Targetを起点にディゾルブするので、-0.1しないとPlane位置より少し上側でディゾルブされているように見えてしまうためです
    ![2024-09-27_01h27_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/e070a126-7587-df94-eec6-ab4340f956e2.png)
3. 後はCubeを下から上に移動させれば完成です
    ![plane2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/da84b2df-ddc4-6e37-1178-0ad5e4988a63.gif)    

# 応用編
一番最初のAdamが出てくる動画を作ったときの手順です。
![2024-09-27_19h40_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/d51a3770-8d9a-ff9f-98a7-3842b92f913f.png)

1. 必要なUnity Assetをインストールします
    - 背景用：[Castle Valley Collection 1](https://assetstore.unity.com/packages/3d/environments/landscapes/castle-valley-collection-1-165032)
        - 背景に使うだけなので、この有料アセットでなくてもなんでも大丈夫です
    - 登場キャラ用：[Adam Character Pack: Adam, Guard, Lu](https://assetstore.unity.com/packages/3d/characters/adam-character-pack-adam-guard-lu-74842)
2. 背景用のアセット
    1. 基本的にどのアセットもSampleシーンがあるので、そこからよさそうなところを探します
3. Adamのディゾルブのための設定
    1. AdamのマテリアルがUnity Technorologies/Adam Character Pack/Adam/Materials配下にあるので、全てAmazing AssetsのStandar系のシェーダーに変更します
        ![2024-09-27_18h46_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/217c0e6e-4831-deaa-5352-b87a4dd8490a.png)        
    2. 変更したマテリアルをAdvanced Dissovle Keywords Controller、Advanced Dissovle Properties Controller、Advanced Dissovle Geometric Cutout ControllerのMaterialsに登録します
4. Adamの一般的な設定
    1. デフォルトだとアニメーションが設定されていません。アセットについているのでそれを設定してください
    2. サンプル動画のようにたくさん出す場合、以下プログラムを使ってください
        ```csharp
        using UnityEngine;
        
        public class Adam : MonoBehaviour
        {
            [SerializeField] private GameObject adamPrefab;
        
            private float rand;
            private float delta;
            
            void Update()
            {
                delta += Time.deltaTime;
                if (delta > rand)
                {
                    Instantiate();
                    rand = Random.Range(1.0f, 3.0f);
                    delta = 0;
                }
            }
        
            private void Instantiate()
            {
                var pos = transform.position + new Vector3(Random.Range(-3.0f, 3.0f), 0, Random.Range(-1.0f, 1.0f));
                Instantiate(adamPrefab, pos, transform.rotation);
            }
        }
        ```
5. 面から出てくる演出で作ったPlaneを縦にして使えば、その面から出現してくる感じになります
    1. 奥側で見えて、手前で消えてしまう場合、AD Geometric Cutout ControllerのCoutoutにInvertのチェックボックスがあるので、そこにチェックを入れてください
    2. 空間が歪んだような表現をするには [【Unity】【シェーダ】GrabPassを使って歪みシェーダを作る](https://light11.hatenadiary.com/entry/2018/12/13/221902) などを参考に、別途それ用のシェーダーを作成してもらう必要があります