Kakoのいろいろやったこと記

主にUnity関連でやったことをかいていきます

ShapesでDOTweenのすゝめ

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

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

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

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

今回使うAsset

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です.数値を決めるだけ.



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

スクリプト

先述した,自作の補助スクリプト群のコア部分一つだけ抜き出してみました.そのままだと,一般的に全く使いやすくないので…….
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);
        }
    }
}
使い方

画像内の通りにパラメータを設定して,Move()を呼び出してあげるとこうなります.Discは上で使ったものに,そのまま上のスクリプトをくっつけています.
f:id:Kakovail:20210801111259g:plain

最後に

結構手軽に,玄人が苦労してる実装がスキップできちゃう!!!!!!
(玄人がこれを使ったら更に神になってしまうのは内緒です)
神Assetです.値段自体はしますが,実際に使ってみたところ全然高く思いません.最高.
是非使ってみてください.