早速DOTweenを使ってアニメーションを作っていきましょう。まずは基礎的な直線移動を題材にして解説します。
👇コチラの青いキューブを使います。
ちなみに 「アニメーションする」 を本記事では 「トゥイーンする」 と呼称しています。
DOTweenを始める準備
DOTweenのソースコードを使うために👇準備として以下の1文をC#の冒頭に記載しておきましょう。
using DG.Tweening;
準備は以上です。
Hello World DOTween!
以下のようにStartメソッドにtransformを直線移動させる処理を書いてみましょう。
👇以下のソースコードのコピペで大丈夫です。
void Start()
{
transform.DOLocalMove(new Vector3(10f, 0, 0), 1f);
}
Unityを再生すると動き出すと思います。
処理としては指定のtransformを1秒かけて(10f, 0, 0)へ直線移動させています。
「ここまでの手順がよくわからない」 という方に向けてDOTweenをUnityで動かす手順を解説します。
🔰Unity初心者向けの手順の紹介
DOTweenをUnityで動かすまでには以下の3つの手順があります。
- C#ファイルの作成
- トゥイーンさせたいGameObjectにAddComponent
- Unityの再生
手順1.C#ファイルの作成
UnityのProjectウィンドウ内のAssets内で右クリックします。
Create > C# Script を選択肢ましょう。するとC#ファイルが作られます。
HelloWorldDOTween.csという名前でC#ファイルを作りました。このC#ファイルをテキストエディタで開いて以下のソースをコピペします。
👇ソースコードを全文
using System.Collections;
using UnityEngine;
using DG.Tweening;
public class HelloWorldDOTween : MonoBehaviour
{
void Start()
{
transform.DOLocalMove(new Vector3(10f, 0, 0), 1f);
}
}
Unity初心者の方にオススメのテキストエディタはVisual Studioです（無料）。Unityをインストールするときにセットでインストールされます。もしインストールできていない方は次の記事を読んでみてください。
手順2.トゥイーンさせたいGameObjectにAddComponent
HelloWorldDOTween.csをHierarchy（ヒエラルキー）ウィンドウのGameObjectにAddComponent（ドラッグ&ドロップ）しましょう。今回で言えば「Cube（キューブ）」です。
手順3.Unityの再生
Unityエディタ上部の再生ボタンを押してください。
するとUnityの再生が始まります。Unityの再生とはゲームを動かしたということ。今回の場合は「キューブを動かすプログラムを動作させた」ということです。
このようにキューブがトゥイーンを始めたのではないでしょうか。これ以降に紹介するサンプルは基本的に本書のソースコードをコピーするだけで動かすことができます。ぜひ各章で紹介しているテクニックを実際に手で動かして学んでみてください。
補足説明
ソースコードを正しくコピペはしたもののトゥイーンの印象に違いが出たかも知れません。この違いはDOTweenのデフォルトイージング設定が影響しています。イージングとは動きの加速・減速のことです。DOTweenでは OutQuad というイージングがデフォルト設定されているため少し緩急のついたトゥイーンが実装されているのではないでしょうか。
今回のサンプルでは今後の説明を分かりやすくするために あえて一定のスピードで動くトゥイーン（Linear:リニア） で紹介しました。
👇以下のようにSetEase(Ease.Linear）という処理を追加することでまったく同じアニメーションが再現できます。
transform.DOLocalMove(new Vector3(10f, 0, 0), 1f)
.SetEase(Ease.Linear);
「とりあえずDOTweenで動かす」ということができました。
一行ソースコードを書いただけで動いてしまうのがすごい。もう1歩踏み込むための基礎として、次のチャプターではDOTweenの 文法 について学びます。正しいDOTweenの文法を知ることで、以降のチャプターが理解しやすくなります。