【第2回】〜DOTween〜オブジェクトやUIなどを手軽に動かすことができる

2021年7月7日

DOTweenについて

Demigiantからリリースされている、

オブジェクト、UIなどを手軽なコードで動かしたりできるアセット。

簡単にアニメーションが出来る、という事でいいだと思うんですけど。

無料版と有料版があり、基本的には無料版で一通りの機能は使えるようです。

自分はチェック時にセールがあったので、せっかくだからと言うことでPro版を持っています。

有料版はコードを書かずにインスペクター上でアニメーションを作ることができたり、TextMeshProで使えたりします。

無料版

どんな人にオススメ?

  • とにかく簡単にあれこれ動かしたい!
  • テキストをこのくらいの時間かけてフェードインしたいのにコードの書き方よくわからない!
  • アニメーションで動かすより早い方法がないか・・・
  • まだコードに自信がないけどバンバンゲーム作りたい!
  • テキストに動きを出してカッコよくしたい!    etc・・・

・・・自分が感じたことですね・・・笑

やってみた

DOTweenでできる事はたくさんあるのですが、

その中で自分が導入してよく使ったり、コードに自信がない人、調べてやれるっちゃやれるけどパッと実装して仕様を整えていくのにリソースを振っていきたい、という方に刺さるかなーという点を紹介します。

まず、適当に3DObjectのCubeを置いて、C#Scriptを作成、名前はDOTweenTestってしてます。

早速コードを書いていきます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening; //←この行を追記

public class DOTweenTest : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        //5秒かけて(3f, 0, 0)へ移動する
        this.transform.DOMove(new Vector3(3f, 0, 0),5f);
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

DOTweenを使用する時はusing DG.Tweeningというのを追記しましょう!

そして11行目のようにDOMoveを使って移動先と秒数を書いて、

先ほど作ったCubeにスクリプトをアタッチして再生してみます。

これだけで秒数を指定して移動まで出来ました!

今だにオブジェクトの移動を覚えているようで覚えていなく、都度調べて思い出しながら書いている自分にとっては、すげー楽!と思いました笑

さらに色々な効果を追加したりできるのですが、

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

public class DOTweenTest : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
     //new Vector3のx軸の値を5fに変更、SetEaseを追記
        this.transform.DOMove(new Vector3(5f, 0, 0),3f).SetEase(Ease.OutBounce);
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

SetEaseというのを記入して、パターンが色々ある中でOutBounceというのを選択。

ちょっともっさりした動きだったんでVector3の3fのところを5fに、秒数だったところを5fから3fにかえてみてます。そうすると・・・

バウンドしたようになりました!

SetEaseは始まりと終わりをどう繋ぐかのパラメータを決めることができるようですね。

これを自前でやろうとすると・・・ちょっとわかんn

あとは回転とかも簡単に出来るようです。

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

public class DOTweenTest : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        //1秒かけて360度回転を繰り返す
        this.transform.DORotate(Vector3.up * 360f, 1f, RotateMode.FastBeyond360).SetLoops(-1, LoopType.Restart);
    }

    // Update is called once per frame
    void Update()
    { 
       
    }
}

DORotateをつかって回転、RotateMode.FastBeyond360といれれば0から360に向かっていくようになります。

SetLoopsには書いた回数分繰り返すみたいなんですが、-1をいれるとずっとループするようです。

あとはテキストをフェードインしたりフェードアウトさせたりっているのが結構使えそうです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening; //ここと↓
using UnityEngine.UI; //この行を追加!

public class DOTweenTextTest : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
     //テキストコンポーネントを取得
        Text text = GetComponent<Text>();
        text.DOFade(0f, 1f).SetLoops(-1,LoopType.Restart);
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

DOTweenTextTestという名前にして新たにC#スクリプトを作成。

上記のコードを書きました。

その後とりあえず配置したTextオブジェクトにDOTweenTextTestをアタッチ。

再生すると・・・文字が消えていくのが繰り返されました!

DOFadeの後の()内に、アルファ値をどこまで動かすかと時間を、その後にLoopするようにしています。

まとめ

いかがでしたでしょうか?

気になった方は是非AssetStoreでチェックしてみてください!

無料版

まずコードを書くと言う点でストレスが減りました!笑

頭の中でこうするか〜と思っても、自分はまだまだ思い出したり確認するのに細かくググってる状況です。

勇気出してDOTweenを触ってみて良かったと思います。

まだまだ沢山機能があって、自分でも試し切れていないので、自分の記事ではこの程度にさせていただきます笑

しかし仕組みが軽く分かれば結構すぐゲームづくりに活かせると思います。

パッと移動させたい時とか、とくにUI周りをなんとなくソレっぽく見せるのにどんどん使ってみています。

やり方をググるのに使う時間が短縮されるので、よりゲーム製作が捗りそうです。

無料版があるので、特にUnityを始めたばかりの方などは是非試してみていただけたらと思います。

今回はこんな感じで!

それでは💤