渋谷ほととぎす通信

Unity・ゲーム開発 技術で一生食べていく情報発信

とってもカンタンDOTweenでカスタムイージングの作り方

  • イージング(加減速)
  • トゥイーン時間

この2つがトゥイーンにとって最も重要です。
0.1秒違うだけで気持ちよさが変わりますし、
イージングのINとOUTを変えただけでも全く印象が変わってしまいます。

結論この2つを極めればUnityじゃなくても食っていけると確信しています。

今回はその中でも「イージング」の話です。

38という数字

DOTweenにはデフォルトで38種類のイージングをサポートしています。
これを多いと見るか、少なく見るか。

public enum Ease
{
    Unset,
    Linear,
    InSine,
    OutSine,
    InOutSine,
    InQuad,
    OutQuad,
    InOutQuad,
    InCubic,
    OutCubic,
    InOutCubic,
    InQuart,
    OutQuart,
    InOutQuart,
    InQuint,
    OutQuint,
    InOutQuint,
    InExpo,
    OutExpo,
    InOutExpo,
    InCirc,
    OutCirc,
    InOutCirc,
    InElastic,
    OutElastic,
    InOutElastic,
    InBack,
    OutBack,
    InOutBack,
    InBounce,
    OutBounce,
    InOutBounce,
    Flash,
    InFlash,
    OutFlash,
    InOutFlash,
    INTERNAL_Zero,
    INTERNAL_Custom
}

開発をしていると、38種以外の複雑なイージングを作りたくなる時があります。
そんなときにカスタムイージングです。

AnimationCurveがそのままイージング関数へ

AnimationCurveクラスを定義すると、
GUIから簡単にカーブを生成することが出来ます。

f:id:esakun:20161021032045p:plain

AnimationCurveをインスペクタに公開すると、
このようなGUIで表示されクリックすると
先のカーブ編集ウィンドウが開きます。

f:id:esakun:20161021030916p:plain

実行してみるとこのように最初と最後に勢いを持たせて
途中はじわじわ移動する特殊なトゥイーンが作成できます。

f:id:esakun:20161021031541g:plain

お手軽にカーブを編集できるため、
自分独自のカーブのストックを作っておくと
開発に入ったときに役立つかもしれません。

またGUIから変更できるという点でクリエーターとの分業ツールとしても候補に上がります。
ワークフローを構築する上での手段として会得しておくことをオススメします。

もっと詳しくDOTweenのことを知りたい方は、
DOTweenの教科書を読んでみてください。

環境

  • Unity5.4.2f1
  • DOTween v1.1.310

あわせてどうぞ