2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

時空のゆがみからキャラクターが出てくるときのディゾルブを作ることができるアセット「Advanced Dissolve」($38.5)の紹介です。有料なのですが、その分簡単にかっこいい演出ができるなと感じています。

adam_sample.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
    3. Advanced DissolveのStateをEnable、StandardのSourceをCsutom Mapに設定します
      2024-09-22_23h12_32.png
    4. MapにAssets/Amazing Assets/Example Scenes/Tutorial Scenes/Files/Textures/Cutout/Cutout Map 1を設定します
      2024-09-22_23h14_04.png
  2. CubeをHierarchy上に新規作成し、1で作成したマテリアルを適用します
  3. Clipの値を変更すればディゾルブが確認できます
    simple.gif

光ってる感じが欲しい

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

  1. Post Effectの導入します。【初心者向け】Post ProcessingのBloomを設定してCubeをふんわり光らせます を参考に導入してください
  2. EdgeのSourceをCutout Standard(①)、Colorを好きな色(②、SFっぽい感じの青にしました)、Intensityを1.3(③)に設定します
    2024-09-26_23h59_11.png
  3. これだけでClipの値を変更すれば光りながらディゾルブされます
    bloom.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
  3. HierarchyでCreateEmptyして、Add ComponentからAdvanced Dissovle Properties Controllerを追加します
  4. Map1にCutout Map 1を設定します
    2024-09-27_00h56_45.png
  5. EdgeのColor(①)、Color Intensity(②)を以下の値に設定します
    2024-09-27_00h57_53.png
  6. Materilasを設定します
    2024-09-27_01h00_04.png
  7. HierarchyでCreateEmptyして、Add ComponentからAdvanced Dissovle Geometric Cutout Controllerを追加します
  8. Type(①)、Noise(②)、Materials(③)を設定します
    2024-09-27_01h07_36.png
  9. ↑のCreateボタン(④)を押すと、Plane#1にTarget(1)が設定されます。Target(1)はHierarchyを見ると、AD Geometric Cutout Controllerの子として生成されています
    2024-09-27_01h11_35.png
  10. このTarget(1)を上下させれば、CubeがTarget(1)の位置に合わせてディゾルブします
    plane.gif

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

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

  1. Planeを作ります。白だとわかりにくいので合わせてMaterialも作って好きな色に変更します
    2024-09-27_01h25_54.png
  2. Target(1)をPlaneの子にします。このときにPositionのYを-0.1に設定します。Targetを起点にディゾルブするので、-0.1しないとPlane位置より少し上側でディゾルブされているように見えてしまうためです
    2024-09-27_01h27_23.png
  3. 後はCubeを下から上に移動させれば完成です
    plane2.gif

応用編

一番最初のAdamが出てくる動画を作ったときの手順です。
2024-09-27_19h40_47.png

  1. 必要なUnity Assetをインストールします
  2. 背景用のアセット
    1. 基本的にどのアセットもSampleシーンがあるので、そこからよさそうなところを探します
  3. Adamのディゾルブのための設定
    1. AdamのマテリアルがUnity Technorologies/Adam Character Pack/Adam/Materials配下にあるので、全てAmazing AssetsのStandar系のシェーダーに変更します
      2024-09-27_18h46_31.png
    2. 変更したマテリアルをAdvanced Dissovle Keywords Controller、Advanced Dissovle Properties Controller、Advanced Dissovle Geometric Cutout ControllerのMaterialsに登録します
  4. Adamの一般的な設定
    1. デフォルトだとアニメーションが設定されていません。アセットについているのでそれを設定してください
    2. サンプル動画のようにたくさん出す場合、以下プログラムを使ってください
      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を使って歪みシェーダを作る などを参考に、別途それ用のシェーダーを作成してもらう必要があります
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?