Chapter 21無料公開

🔰DOPath - パスを使った曲線アニメーション

オオバ@DOTweenの教科書
オオバ@DOTweenの教科書
2021.03.13に更新

👉曲線アニメーションを作る

DOPathまたはDOLocalPathを使うとパスを使ってカーブするトゥイーンを作ることができます。

transform.DOLocalPath(
    new[]
    {
        new Vector3(4f, -1.2f, 0f),
        new Vector3(10f, 0f, 0f),
        new Vector3(5, 1.5f, 0),
    },
    3f, PathType.CatmullRom);

👉DOPathの文法

引数 内容
1 移動する座標配列
2 トゥイーン時間
3 パスの種類(PathType)
4 パスのモード(PathMode)
5 解像度
6 Gizmosカラー

※DOPath、DOLocalPath共に引数の内容は同じです。

移動する座標配列にトゥイーン開始座標は不要です。

👉閉じたパス指定

transform.DOLocalPath(
    new[]
    {
        new Vector3(4f, -1.2f, 0f),
        new Vector3(10f, 0f, 0f),
        new Vector3(5, 1.5f, 0),
    },
    3f, PathType.CatmullRom)
    // SetOptionsで閉じたパスを指定
    .SetOptions(true);

SetOptions(true)を指定することで閉じたパスのトゥイーンを作成できます。
閉じたパスにすることで、トゥイーンを開始した座標に戻ることができます。

👉パスの確認方法

Gizmosでパスの軌跡を描画できます。

ゲームビュー

シーンビュー

ソースコードでGizmosのカラー設定

Gizmosの線の色はDOPath / DOLocalPath
引数のgizmoColorにColorを設定してください。

transform.DOLocalPath(
    new[]
    {
        new Vector3(4f, -1.2f, 0f),
        new Vector3(10f, 0f, 0f),
        new Vector3(5, 1.5f, 0),
    },
    3f, PathType.CatmullRom, 
    // 赤色を設定
    gizmoColor:Color.red)
    .SetOptions(true);

👆サンプルではColor.redを指定して赤色を描画しています。

👉PathTypeとPatyModeで制御する

DOPath / DOLocalPathにはPathTypePathModeという設定があります。
曲線の作り方トゥイーンする対象の向きを指定するパラメーターです。

PathType

PathTypeは曲線の種類を選びます。

パスの種類 内容
PathType.Linear 各座標を直線でつなぐ
PathType.CatmullRom Catmull-Rom曲線を使用
PathType.CubicBezier ベジェ曲線を使用

PathMode

PathModeDOPath / DOLocalPathと同時に使える
DOLookAtの挙動を設定します。

パスのモード 内容
PathMode.Ignore DOLookAtを無視
PathMode.Full3D 3D用
PathMode.TopDown2D 上から見下ろし2D用
PathMode.Sidescroller2D 横視点2D用

PathTypePathModeともに重要な設定項目なのですが、、、
😰正直、僕にとっては分かりづらいパラメーターでした。

Chapter 26📕DOPathの種類とモードの完全理解に詳しくまとめてみましたので、
興味ある方は確認してみてください。


次のチャプターではコルーチンやTaskと連携したDOTweenの使用方法を学びます。