Chapter 04無料公開

🔰とりあえずDOTweenで動かしてみる

早速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)へ直線移動させています。


「ここまでの手順がよくわからない」
という方に向けた解説です。

🔰初心者向けの細かい手順

1.C#ファイルの作成

HelloWorldDOTween.csという名前でC#ファイルを作り、
以下のソースをコピペします。

👇ソースコードを全文

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

public class HelloWorldDOTween : MonoBehaviour
{
    void Start()
    {
        transform.DOLocalMove(new Vector3(10f, 0, 0), 1f);
    }
}

2.トゥイーンさせたいGameObjectにAddComponent

HelloWorldDOTween.csをヒエラルキーのGameObjectに
AddComponent(ドラッグ&ドロップ)します。

3.Unityの再生

Unityを再生してみてください。

等速運動

キューブはトゥイーンを始めたのではないでしょうか。


補足説明

ソースコードをコピペはしたもののトゥイーンの動きの印象に違いが出たかも知れません。

DOTweenのデフォルトイージングが影響しています。
イージングとは動きの加速・減速のことです。

OutQuadというイージングがデフォルト設定されているため
少し緩急のついたトゥイーンが実装されているのではないでしょうか。

今回のサンプルでは今後の説明を分かりやすくするために
あえて一定のスピードで動くトゥイーン(Linear:リニア) で紹介しました。

DOTween設定画面からデフォルトイージングの変更が可能です。

📖 関連チャプター

👇以下のようにSetEase(Ease.Linear)という処理を
追加することでまったく同じアニメーションが再現できるでしょう。

transform.DOLocalMove(new Vector3(10f, 0, 0), 1f)
    .SetEase(Ease.Linear);

「とりあえずDOTweenで動かす」
ということができました。

一行ソースコードを書いただけで動いてしまうのがすごい。
もう1歩踏み込むための基礎として次のチャプターでは文法について学びます。

文法を知ることでより後のチャプターが理解しやすくなります。