Chapter 07無料公開

🔰SetEase - イージング(加減速はトゥイーンの肝)

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

命を吹き込むイージング

イージングとは動きの加速や減速のことを指します。

気持ちのよい動きを作るためには適切な イージング設定が必須です。

👇次のサンプルは速さが一定のトゥイーン(Linear)で一般的に退屈な動きです。
(イージングが設定されていない状態)

等速運動

イージングはトゥイーンに命を吹き込むことができます。

約30種類のイージングから選ぶことができ、
また自分でオリジナルのイージングを作成することもできます。

まずは先の退屈なトゥイーンにイージングを設定して
気持ちの良い動きにしてみましょう。

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

SetEaseメソッドでイージングを設定してみます。
今回はInOutQuartというイージングを設定しています。
加速して減速するイージングです。

Move:Ease.InOutQuart

InOutQuartを設定することで、
自然な動きが実装できたとは思いませんか?

イージングはゲームの世界観にに合わせて選択します。
この選択1つで大きく雰囲気を変えてしまうこともありますし、
クオリティを一気に引き上げることもできます。

実際に自分で試してみて各イージングの
雰囲気を感じ取ってもらえたらと思います。

後のチャプターでイージングの使い所とコツを
解説していますので、そちらも参考にしてください。

📘覚えておこう「Set~~メソッド」

  • SetEase: イージング設定
  • SetLoops: 繰り返し設定

といったSet~~メソッドを使ってトゥイーンの設定を追加できます。

transform.DOLocalMove(new Vector3(10f, 0, 0), 1f)
    .SetLoops(-1, LoopType.Yoyo)
    .SetEase(Ease.InOutQuart);

このようにSet~~は連結して複数同時に設定できます。


次のチャプターでは「イージング」と同レベルに重要な開始タイミングを調整する 「ディレイ」 について学んでいきます。

📘好きなイージングを見つけよう

長年トゥイーンを扱う仕事をしていると
自分の好きなトゥイーンパターンができてきます。

Unityエンジニアになる前、Flashを使ったWebの仕事の頃から考えると、
かれこれ10年以上トゥイーンに浸かった生活をしています。

僕の場合はQuart、Cubic、Backあたりが
レギュラーとしてベンチ入りです。

しかし、本書で紹介しているサンプル動画を見るだけでは自分の血肉にはなりません。

イージングは実際のゲームに組み込んでみて、
他のトゥイーン要素とのバランスを
取りながら選択していくのが良いでしょう。

30種類近くの全イージングをそれぞれ試してみて
「あーこの加速減速気持ち良いなぁ」 というのが
見つかるとトゥイーンを実装しやすくなると思います。