渋谷ほととぎす通信

「Unityをわかりやすく」初心者のためのゲーム作りブログ

【Unity】DOTweenのSetLookAtを使ってワンランク上の表現を手に入れよう

【Unity】DOTweenのSetLookAtを使ってワンランク上の表現を手に入れよう

こんにちは「DOTweenの教科書」執筆者のオオバです。

Unityのアニメーション実装を効率アップさせるDOTween。これまでこのブログでは何度も紹介してきていますが 「SetLookAt」 というメソッドをご存知でしょうか。

複雑な曲線アニメーションを作れる「DOPath」や「DOLocalPath」のみに実装された隠れメソッドです。詳しく自著電子書籍「DOTweenの教科書」の無料公開分の「🔰DOPath - パスを使った曲線アニメーション」を参考にしてみてください。

📚 参考サイト : 🔰DOPath - パスを使った曲線アニメーション|DOTweenの教科書

今回紹介する「SetLookAt」は、かなり面白い表現を作れます。ぜひ表現の引き出しを増やすために最後まで読んでみてください。

👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

SetLookAtはトゥイーン中の向きを指定可能

SetLookAtを使用すると トゥイーン中のオブジェクトの向き を変更してくれます。SetLookAtメソッドの引数には3種類の型を指定できます。

内容備考
Vector3型オブジェクトが向く座標※絶対座標
Transform型オブジェクトが向くTransform-
float型lookAhead値の範囲 : 0.0001〜1f ※後で詳しく解説

引数には3種の型をサポートしています。「Vector3型」と「Transform型」はイメージしやすいと思います。
しかし、 「float型」の lookAhead は分かりづらいですよね。

lookAheadとはアニメーション曲線の先読み具合を再現

lookAheadとはアニメーション曲線を先読みした向きを指定するパラメーター です。曲線アニメーション中に少し先の曲線の座標を向くことができるのです。車や自転車を運転中カーブを曲がる際にカーブの先を見ますよね。それと同じことがDOTweenでできるということです。

lookAheadは値が低ければ先読みしない。高ければ先読みをします。

lookAheadを使用したSetLookAtの文法はこちら。

SetLookAt(lookAhead値, 向かせる方向, 上方向);  

lookAhead値の他に「オブジェクトのどの方向を向かせるか」と「オブジェクトの上方向」を指定します。

サンプルはこちらです。

SetLookAt(0.5f, Vector3.forward, Vector3.up);  

「Vector3.forward」でオブジェクトの前方向を向かせる方向としています。「Vector3.up」はY軸の正の方向を上としました。

lookAheadは説明だけではイメージしづらいため、実際にどういう表現になるのか確認していきましょう。

lookAheadを使ったSetLookAtを使ってみる

繰り返しになりますが、SetLookAtは「DOLocalPath」「DOPath」のみに提供された機能です。今回はDOLocalPathでSetLookAtメソッドを使ってみます。

次のサンプルコードをベースにlookAheadの値を変化させていきましょう。

float lookAhead = 1f;  
transform.DOLocalPath (new Vector3[] { new Vector3 (2.6f, 0, -2f), Vector3.zero }, 4f, PathType.CatmullRom)  
    .SetLookAt (lookAhead, Vector3.forward)  
    .SetEase (Ease.Linear);  

「lookAhead」に最小値の0.001fを指定

lookAheadを最小値の「0.001」に設定すると先読みをしません。

【Unity】DOTweenのSetLookAtを使ってワンランク上の表現を手に入れよう_0

上の動画の通りUnityちゃんは曲線状の角度にあわせた方向に身体を向けているだけです。

transform.DOLocalPath (new Vector3[]{ new Vector3 (2.6f, 0, -2f), Vector3.zero }, 4f, PathType.CatmullRom)  
    .SetLookAt (0.001f, Vector3.forward)  
    .SetEase (Ease.Linear);  

「lookAhead」を0.3fに指定

lookAheadを0.3に上げてみます。lookAheadは値が上がるごとに先読みする具合が大きくなります。

【Unity】DOTweenのSetLookAtを使ってワンランク上の表現を手に入れよう_1

違いがわかりますでしょうか。

【Unity】DOTweenのSetLookAtを使ってワンランク上の表現を手に入れよう_2

とても細かい演出の違いですが、lookAheadが0.3の方が カーブを先読み して体を傾けていることがわかります。

💻ソースコード : lookAhead 0.3のLookAtサンプル
transform.DOLocalPath (new Vector3[]{ new Vector3 (2.6f, 0, -2f), Vector3.zero }, 4f, PathType.CatmullRom)  
    .SetLookAt (0.3f, Vector3.forward)  
    .SetEase (Ease.Linear);  

まとめ

この記事ではDOTweenの隠れメソッド「SetLookAt」について解説してきました。DOLocalPath、DOPathはの出番は少なめですが、面白い機能であることがわかったと覆います。

今回はSD Unityちゃんを走らせて挙動を確認してみました。2つのアニメーションを見比べるとlookAhead設定のないアニメーションには生きている感じがしません。

lookAhead値を調整することで簡単にリアリティを出すことができるのです。ぜひ、SetLookAtおよびlookAheadを使ってみてください。

DOTweenDOLocalPosやDOLocalEulerAnglesだけではありません。
もっと詳しくDOTweenのことを知りたい方は、自著の「DOTweenの教科書」をおすすめします。
ネット上にはバラバラとした情報が転がっていますが、体系的に学べる日本書籍はこれだけです。Unity歴11年 プログラマーをやりつつアニメーション実装を多数こなしてきた経験を詰め込みました。 無料公開分だけでもかなりの分量 があります。ぜひお手にとってお確かめください。
DOTweenの教科書はこちら

オススメ記事
検証環境
  • Unity 2021.3.0f1
  • DOTween 1.2.632