ShapesでDOTweenのすゝめ - Kakoのいろいろやったこと記

Assetアドベントカレンダー参加記事!

本日9日目!
8日目の,揺れものアセット未開拓編,を書かれた汗人柱さんからバトンを受け取った,
www.asset-sale.net
Assetアドベントカレンダー参加記事!
assetstore.info
明日9日目は,たぬさんの MeshEffectsを使って、Vroidモデルに武器を持たせて動かし撮影しよう！,です!
twitter.com

この記事はなに?

ShapesとDOTweenを使ってお手軽モーショングラフィックス.
お手軽にShapesをアニメーションするためのテンプレスクリプトも,簡単ですが掲載しています.

Assetアドベントカレンダー参加記事!
この記事はなに?
モーショングラフィックスがしたい!

モーショングラフィックスがしたい!

ご本人の許可を得て,低レベルですが頑張ってできる範囲の真似をしました
ヤバさがやばい……無限の鍛錬の故だなって思いました
公開してくださっているので一部答え合わせだ……!(Fadeは特に許して……) https://t.co/Ca5DLhs5uG pic.twitter.com/9oFcOC7S4o
— vail(kako)🎶⛅ (@kako_vail) 2021年7月4日

したいよね!
でも,既存のImageやSpriteだと,Pivot調整や,自分の中の｢UIは動かすと重いぞ｣おじさんがささやいたり,なにかと面倒なことが起こる……そんなあなたにおすすめのAssetと,かの有名なDOTweenの組み合わせの紹介です!

今回使うAsset

Shapes

assetstore.unity.com

DOTween

無料
assetstore.unity.com
有料(おすすめですが,今回は無料のDOTweenで動くことしかしません!)
assetstore.unity.com

紹介

Shapes

独自のComponentで,軽量に図形を描画できます.
UIではないので注意,かつおすすめです.
文字で書くより見たほうが早いと思うので…….

f:id:Kakovail:20210801091045p:plain
まずHierarchyに,例えばRingを追加してみましょうか……そうしたら
f:id:Kakovail:20210801091437g:plain

お手軽にこんなことができます.もう恐ろしいですね.
通常のImageのFillAmount等だと,Transformを回転させつつAmountを変えて……など,ちょっと難しい,○度から△度,みたいな挙動がかんたんにできます.
これとDOTweenを組み合わせると,標準だとちょっと大変なこんな挙動が手軽にできます.

DiscとLine
f:id:Kakovail:20210801093026g:plain
DiscをDashedに設定
f:id:Kakovail:20210801093232g:plain

DOTween

こちらは,言わずもがなというか,多くの人が紹介されているので,今回は詳しく書きませんが,こちらと組み合わせることで本当に無限のことができます.
上記Gifでは,DOVirtual.Float(),もしくはDOTween.To()等を使って実現できます.
こういった用途以外にも｢○秒かけて■を△する｣ときには大万能のAssetです!有料版だと,スクリプトなしでEditorで設定できたり,TextMeshProの文字送り等に対応しています!
(余談ですが,かつては｢○秒かけて■を△する｣に文字送りまで含まれるとは夢にも思っていませんでした.DOTween強い)

実例

最近はほぼほぼこのAssetのみで見た目が構成されている,こんなのを作り始めました.
以前作った,Shapes+DOTweenの補助スクリプトのおかげでもあるのですが,実作業としては8時間以内にこんな感じになりました.すごいかどうかはわからないですが……
演出の実装はほぼ0です.数値を決めるだけ.

昨晩から作り始めた一人開発のほうの進捗です pic.twitter.com/b6VxCCpGC9
— vail(kako)🎶⛅ (@kako_vail) 2021年7月31日

お手軽モーション作成テンプレ

スクリプト

先述した,自作の補助スクリプト群のコア部分一つだけ抜き出してみました.そのままだと,一般的に全く使いやすくないので…….
ShapesとDOTweenが入っているプロジェクトで使ってあげてください.

using DG.Tweening;
using Shapes;
using UnityEngine;

namespace Motions.Scripts
{
    public class ShapesWithDOTween : MonoBehaviour
    {
        // ここの対象をDisc→Lineにしたり,floatをVector3にしたりすれば他でも使える
        [SerializeField] private Disc _disc;
        [SerializeField] private float _destinationFloat;
        [SerializeField] private float _duration;
        [SerializeField] private Ease _easeType;

        // publicにして,Manager等を作って一括で呼んだり?自由に!
        public void Move()
        {
            DOTween.To(
                    () => _disc.AngRadiansStart,
                    (x) => _disc.AngRadiansStart = x,
                    _destinationFloat,
                    _duration)
                .SetEase(_easeType);
        }
    }
}