早速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:リニア) で紹介しました。
👇以下のようにSetEase(Ease.Linear)
という処理を
追加することでまったく同じアニメーションが再現できるでしょう。
transform.DOLocalMove(new Vector3(10f, 0, 0), 1f)
.SetEase(Ease.Linear);
「とりあえずDOTweenで動かす」
ということができました。
一行ソースコードを書いただけで動いてしまうのがすごい。
もう1歩踏み込むための基礎として次のチャプターでは文法について学びます。
文法を知ることでより後のチャプターが理解しやすくなります。