Dotweenで作る波紋エフェクト

目的

Unityで波紋のエフェクトが欲しく、諸々の事情からDotween Proの使用を検討し、Googleで[Unity 波紋 エフェクト Dotween]と検索したが出てこなかったため、記事にすることにした。

開発環境

• Mac Book air M1 2020 macOS Ventura 13.2
• Unity 2021.3.17f1
• Dotween Pro Version 1.0.335
• Dotween 1.2.705[Release build]

結果

Unityエディタでの作業

まずはこういう背景が透過してて、良い塩梅のドーナツ状の円の画像を用意します。

次にUnityエディタにインポートして、シーンに追加します。
ここではHamonCircleと命名しています。

そして、HamonCircleのSpriteRendererのColorのアルファ値を0にします。
その後、C#スクリプト(HamonEffect.cs)を作成して、HamonCircleにアタッチします。

最後にHamonEffectでSerializeFieldにしたSpriteRendererに、インスペクタービューからHamonCircleのSpriteRendererを設定します。

ソースコード

using System.Collections;
using System.Collections.Generic;
using DG.Tweening;
using UnityEngine;

// 波紋作成クラス
public class HamonEffect : MonoBehaviour
{
    // 波紋のSpriteRenderer
    // Unityエディタで設定
    [SerializeField]
    SpriteRenderer sr;

    // スタートメソッド    
    void Start()
    {
        // シーケンス作成
        var sequence = DOTween.Sequence();
        /*
         * ・2秒間で大きさを2倍にする
         * transform.DOScale(new Vector3(2f, 2f, 2f), 2f)
         * ・1秒間で透明度を50/100にする(半透明にする)
         * sr.DOFade(0.5f, 1f)
         * ・1秒間で透明度を0/100にする(透明にする)
         * sr.DOFade(0f, 1f)
         */
        sequence.Append(transform.DOScale(new Vector3(2f, 2f, 2f), 2f))
            .Join(sr.DOFade(0.8f, 1f).OnComplete(() => { sr.DOFade(0f, 1f); }));
    }
}

解説

Dotweenのシーケンスを利用して、2秒かけて画像のサイズを2倍に変えながら、1秒かけて半透明して、半透明にする処理が終わった後で1秒かけて透明にしています。