PONOS Advent Calendar 2019の18日目の記事です。

昨日は @nisei275 さんのRustとWebSocketで実現したリアルタイム通信環境にUnityで通信してみるでした。

はじめに

DOTweenとは

DOTweenとはUnityで使用できる線形補間ライブラリ自分が神アセットだと思うアセットの１つです。
読み方は「ドットゥイーン」
無料版と有料版のProがあります。

公式：http://dotween.demigiant.com/
AssetStore：https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

DOTweenを触るようになったきっかけ

かなり前の話ですが、cocos2d-xをメインにゲームを作っていました。
そんなcocos2d-xですが、標準でCocosActionという線形補間ライブラリが内蔵されています。

こんな感じのやつです。

cocosAction.cpp

auto enemySprite = Sprite::create("enemySprite.png");
auto moveTo = MoveTo::create(2, Vec2(50, 0));

enemySprite->runAction(moveTo);

cocos2d-xからUnityをメインに触るようになってから iTween -> DOTween を使用してきました。

前置きが長くなりましたが今回はそんな神アセット「DOTween」の使用法をご紹介をしたいと思います。

導入 -> 初期設定

・AssetStoreでDOTweenを入手 -> インポート
https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

・Setupタブ
こちらでセットアップができます。

・Preferenceタブ
こちらで初期設定が変更できます。

AutoPlayと初期EaseをLinearに変えておくと自分はやりやすかったです。

実装

Tweenの再生

Tweenの単発再生です。

TestTween.cs

using UnityEngine;
using DG.Tweening;

public class TestTween : MonoBehaviour
{
    // 現在再生中のTween
    Tween currentPlayTween;

    // 開始時
    void Start()
    {
        PlayMoveTween();
    }

    // Tweenの再生
    void PlayMoveTween()
    {
        // 移動時間
        float duration = 2f;

        // 移動値
        Vector3 endValue = new Vector3(10, 10, 0);

        // Tweenの作成
        currentPlayTween = transform.DOMove(endValue, duration);

        // 相対に切り替え
        currentPlayTween.SetRelative();

        // イーズタイプの指定
        currentPlayTween.SetEase(Ease.Linear);

        // 再生
        currentPlayTween.Play();
    }
}

結果

上記のコードでは２秒間で現在位置から(10, 10, 0) の距離を移動します。
SetRelative()をつけると絶対位置から相対位置になります

Sequence ~ Tweenの連結 ~

Tweenを連結し、より複雑なことができます

TestSequence.cs

using UnityEngine;
using DG.Tweening;

public class TestSequence : MonoBehaviour
{
    // 現在再生中のSequence
    Sequence currentPlaySequence;
    SpriteRenderer spriteRenderer;

    // 開始時
    void Start()
    {
        spriteRenderer = GetComponent<SpriteRenderer>();
        PlaySequence();
    }

    // Sequenceの再生
    void PlaySequence()
    {
        // 移動時間
        float moveDuration = 1f;

        // 移動の最終値
        Vector3 moveEndValue = new Vector3(10, 10, 0);

        // 待機時間
        float waitDuration = 1f;

        // 透過時間
        float fadeDuration = 1f;

        //  透過最終値
        float fadeEndValue = 0f;

        // 移動Tweenの作成
        Tween moveTween = transform.DOMove(moveEndValue, moveDuration).SetRelative().SetEase(Ease.Linear);

        // 透過Tweenの作成
        Tween fadeTween = spriteRenderer.DOFade(fadeEndValue, fadeDuration);

        // Sequenceを生成
        currentPlaySequence = DOTween.Sequence();

        // Sequenceの構築
        currentPlaySequence
            .Append(moveTween)
            .AppendInterval(waitDuration)
            .AppendCallback(()=>Debug.Log("AppendCallback()"))
            .Append(moveTween)
            .Join(fadeTween);

        // 再生
        currentPlaySequence.Play();
    }
}

Append(tween) ... Tweenの連結再生
Join(tween) ... Tweenの同時再生
AppendInterval(float) ... Tween終了時に空白の時間を設ける
AppendCallback(action) ... Tween再生時にコールバックを追加します

結果

１秒かけて(10, 10, 0)移動し、１秒間待機し、ログを出し、１秒かけて(10, 10, 0)移動しながらアルファを０にします。

任意の数値を線形補間する

DOTweenTo.cs

// 時間
float duration = 1f;

// 最終値
int endValue = 100;

// 現在の値
int currentValue = 0;

// Tweenの生成
currentPlayTween = DOTween.To
(
    () => currentValue,
    value => currentValue = value,
    endValue,
    duration
);
currentPlayTween.OnUpdate(() => Debug.Log(currentValue));

// 再生
currentPlayTween.Play();

結果

１秒かけて任意の変数の値が 0 から 100 になります
時間のカウントダウンなどに便利です

コールバック

特定のタイミングで処理を挟むこともできます

callback.cs

// 移動時間
float duration = 1f;

// 移動の最終値
Vector3 endValue = new Vector3(10, 10, 0);

// Tweenの生成
currentPlayTween = transform.DOMove(endValue, duration).SetRelative().SetEase(Ease.Linear);

// ループの指定
currentPlayTween.SetLoops(-1, LoopType.Incremental);

// コールバック群
currentPlayTween.OnPlay(() => Debug.Log("OnPlay()"));
currentPlayTween.OnUpdate(() => Debug.Log("OnUpdate()"));
currentPlayTween.OnKill(() => Debug.Log("OnKill()"));
currentPlayTween.OnPause(() => Debug.Log("OnPause()"));
currentPlayTween.OnComplete(() => Debug.Log("OnComplete()"));
currentPlayTween.OnStepComplete(() => Debug.Log("OnStepComplete()"));

// 再生
currentPlayTween.Play();

OnPlay() ... 再生した時
OnUpdate()... 数値が変わった時
OnKill() ... 破棄した時
OnPause() ... 一時停止した時
OnComplete() ... 完了した時
OnStepComplete() ... ループなど一節が完了した時

Tweenの破棄

kill.cs

if (currentPlayTween != null)
{
    // Tweenの破棄
    currentPlayTween.Kill();
    currentPlayTween = null;
}

Tweenに対してKill()を呼んでやることでTweenを破棄できます

おわりに

基本の使い方は以上です

そして今回ご紹介したTweenはほんの一部です
もしDOTweenに興味が出たらいろいろ調べて触ってみてください('ω')

明日は @FW14B さんです！

[Unity] DOTweenを使ってみよう