Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DOTween便利Tips集/dotween-tips

ゆーじ
March 24, 2021

 DOTween便利Tips集/dotween-tips

知らなかった!DOTween便利Tips集

ゆーじ

March 24, 2021
Tweet

More Decks by ゆーじ

Other Decks in Programming

Transcript

  1. 8 min
    Gotanda.unity #17 ゆーじ @yuji_ap

    View full-size slide

  2. 自己紹介
    『CUBE CLONES』
    AppStore / GooglePlay 370円
    DOTweenやUIデザインが好きなエンジニア
    最近パズルゲームをリリースしました

    View full-size slide

  3. 今日の内容
    便利だけど知らない人がいそうなDOTweenの機能をパパッと7つ紹介
    DOTween触ったことない方は、
    これだけ覚えてもらえれば何となく理解できるかと思います...!
    [ 対象 ] [ 操作 ] [ 値 ] [ 秒数 ]
    自身を X方向に動かす 3まで 0.5秒間で

    View full-size slide

  4. 秒数に0を指定する
    便利Tips ①

    View full-size slide

  5. 秒数に0を指定する
    position.xの値を変更したい場合
    DOMoveX()で秒数に0を指定すれば、同じことが1行でできる

    View full-size slide

  6. 相対的な値を指定する
    便利Tips ②

    View full-size slide

  7. 相対的な値を指定する
    通常は絶対的な値を指定する
    SetRelative(true) で相対的な値を指定できる

    View full-size slide

  8. timescaleを無視する
    便利Tips ③

    View full-size slide

  9. timescaleを無視する
    SetUpdate(true)をつけることでtimescaleを無視できる
    ちなみにTween自体のtimescaleは以下のように変えられる

    View full-size slide

  10. 開始時の値を指定する
    便利Tips ④

    View full-size slide

  11. 開始時の値を指定する
    通常は終了時の値を指定する
    From() で開始時の値を指定できる
    開始時に第一引数の値に瞬時に変わり、元の値まで進む

    View full-size slide

  12. 一定時間後に処理実行する
    便利Tips ⑤

    View full-size slide

  13. 一定時間後に処理実行する
    UniTask、コルーチン、Invokeメソッドなど
    広く知られている方法がいくつかある
    DOTweenを入れていれば、
    DOVirtual.DelayCall() でも実現できる

    View full-size slide

  14. 共通のパラメータを使う
    便利Tips ⑥

    View full-size slide

  15. 共通のパラメータを使う
    TweenParams型の変数にメソッドチェインでパラメータを指定することで、
    パラメータのプリセットのようなものが作れる
    SetAs() でTweenに適用できる
    →同じパラメータを複数Tweenで使い回すことができる

    View full-size slide

  16. SetAs()の別の使い方
    SetAs() は引数に直接Tweenを指定することもできる
    →パラメータをコピーできる

    View full-size slide

  17. 往復アニメーション
    便利Tips ⑦

    View full-size slide

  18. 往復アニメーション
    Loop回数を2、LoopTypeをYoyoにすることで
    往復アニメーションができる
    時間の都合上省略するが、
    Ease.Flash系でも似たことが実現できる

    View full-size slide

  19. まとめ
    DOTweenは便利な使い方がたくさん!
    使っていく中で見つける便利ハックみたいなものもあるが、
    今回紹介したものも半分以上は公式ドキュメントに書いてある
    http://dotween.demigiant.com/documentation.php

    View full-size slide

  20. おまけ
    DOTweenの逆引きサンプル集をいつか作りたい
    完成しているUIアニメーションを提示して、
    「これはDOTweenでどう作っているのか」を解説する形式
    「動かせます」「色が変わります」は機能として分かるけど、
    じゃあいい感じのアニメーションを作るには何を動かして何色に変えればいいの?
    →完成品を見て「これのこの部分を真似したい!」が効率的なのでは

    View full-size slide

  21. Gotanda.unity #17 ゆーじ @yuji_ap
    ① 秒数に0を指定する      DOMoveX(3f, 0)
    ② 相対的な値を指定する     SetRelative(true)
    ③ timescaleを無視する     SetUpdate(true)
    ④ 開始時の値を指定する     From()
    ⑤ 一定時間後に処理実行する   DOVirtual.DelayCall()
    ⑥ 共通のパラメータを使う    TweenParams, SetAs()
    ⑦ 往復アニメーション      SetLoops(2, LoopType.Yoyo)

    View full-size slide