【無料アセット】目的の位置に決めた秒数で到達させたいアニメーションに超便利なDOTweenの使い方!

【無料アセット】目的の位置に決めた秒数で到達させたいアニメーションに超便利なDOTweenの使い方!

 オブジェクトを移動させたい時にUpdate()内でTransformで移動させたことはありませんか? DOTweenという無料アセットを使えば、目的の位置に何秒で到達させるかを簡単に指定することができます。その他にも動作を繰り返したりなどアニメーションの管理をスクリプト内で行うことができます。非常に便利なので今回はわかりやすく解説していきます。

DOTweenとは?

 移動するアニメーションを簡単に実装できる便利なアセットです。

 例えば、x座標0の位置からx座標10の場所へ5秒で移動させたいとします。

 この時、スクリプトで書くならどうしますか?

 単純な直線移動なら『10(距離)/5(秒)』で1秒当たりに進ませる距離を計算して、毎秒実行すれば実装できますが、それがめんどくさいです。

 そんな問題を解決してくれるのが DOTween というアセットです! 有料のプロ版もありますが、無料版で十分使えます。

DOTweenの使い方

目的の位置へ指定の秒数で到達させる

using DG.Tweening;
using UnityEngine;

public class Move : MonoBehaviour
{
  void Update()
  {
    //キーボードのAを押すと移動開始
    if(Input.GetKeyDown(KeyCode.A)){

      // 5秒後に(10,0,0)へ到達する
      this.transform.DOMove(new Vector3(10f, 0f, 0f), 5f);

    }
  }
}

 このコードを移動させたいオブジェクトに張り付けてみてください。

 オブジェクトが5秒かけてx座標10だけ移動します。

using DG.Tweening;

 最初に必ず書きましょう。これを忘れるとエラーが発生します。

this.transform.DOMove(Vector3型,float型);

 移動させたいオブジェクトのtransformにDOMove(目標の座標,到達するまでの時間)と指定して使います。

x座標・y座標・z座標だけを指定して移動させる

 こっちの方が簡単にかけるので紹介しておきます。

//現在の座標からX+10の座標へ5秒で移動
this.transform.DOMoveX(10f, 5f);

//現在の座標からY+10の座標へ5秒で移動
this.transform.DOMoveY(10f, 5f);

//現在の座標からZ+10の座標へ5秒で移動
this.transform.DOMoveZ(10f, 5f);

移動を繰り返す

 移動が終わったら、元の位置に戻って繰り返したり、今の位置からさらに移動させたりしたいですよね。

  .DOMove(Vector3型,float型); に少し書き加えるだけで実装できるので紹介していきます。

using DG.Tweening;
using UnityEngine;

public class Move : MonoBehaviour
{
  void Update()
  {
    //キーボードのAを押すと移動開始
    if(Input.GetKeyDown(KeyCode.A)){

      // 5秒後に(10,0,0)へ到達する
      // 初期位置にワープしてから、5回ループ
      this.transform.DOMove(new Vector3(10f, 0f, 0f), 5f).SetLoops(5,LoopType.Restart);

    }
  }
}

このスクリプトを移動させたいオブジェクトに張り付けると動きます。

.SetLoops(ループ回数,LoopType.ループタイプを書く);

 ずっとループさせたいなら、ループ回数を-1にします。

ループタイプ:往復移動

 目的地にたどり着いてから初期位置に戻るタイプです。

  LoopType.Yoyo と書きます。ヨーヨーのように手元に戻る動作だからですかね。

// 5秒後に(10,0,0)へ到達する
// 到達後初期位置に向かって移動し、初期位置に戻ってから5回ループ
this.transform.DOMove(new Vector3(10f, 0f, 0f), 5f).SetLoops(5,LoopType.Yoyo);

ループタイプ:初期位置に戻る

 目的地に到達した後、初期位置から再び移動を始めるタイプです。

  LoopType.Restart と書きます。

// 5秒後に(10,0,0)へ到達する
// 初期位置にワープしてから、5回ループ
this.transform.DOMove(new Vector3(10f, 0f, 0f), 5f).SetLoops(5,LoopType.Restart);

ループタイプ:同じ距離だけ再び移動

 10進む移動を5回繰り返したら50進んでくれる。

 一番想像しやすいループタイプですね。

 LoopType.Incrementと書きます。

// 5秒後に(10,0,0)へ到達する
// 追加で5回移動
this.transform.DOMove(new Vector3(10f, 0f, 0f), 5f).SetLoops(5,LoopType.Increment);

おまけ:10秒かけて家まで忘れものを取りに帰るスクリプト

 Unity初心者向けにおまけのサンプルコードを置いておきます。

準備

GameObjectを用意する

  • GameManager(スクリプトを張り付ける空のオブジェクト)
  • Player(移動させるオブジェクト)
  • Home(目的地のオブジェクト)

 インスペクターから、GameObjectを指定してあげてください。

 スクリプト名はGameManager.csです。

using DG.Tweening;
using UnityEngine;

public class GameManager : MonoBehaviour
{

  //インスペクターからオブジェクトを指定
  public GameObject Player;
  public GameObject Home;

  void Update()
  {
    //キーボードのAを押すと移動開始
    if(Input.GetKeyDown(KeyCode.A)){

      //目的地をVector型にする
      Vector3 tmp = Home.transform.position;

      // 10秒後にHomeへ到達する
      //到達したら、Homeから初期位置に戻る
      Player.transform.DOMove(tmp, 5f).SetLoops(1,LoopType.Yoyo);

    }
  }
}

 これでOKです。

 簡単に実装できましたね。

本記事の参考はこちら