読者です 読者をやめる 読者になる 読者になる

渋谷ほととぎす通信

完全趣味でやってるUnityメモ。説明できないところを説明できるようにするための個人ブログ。昨日の自分より少しでも大きく慣れるように。。。 ※所属団体とは一切関係がありません

今一番個人的にアツいUnityのTweenエンジン『DOTween』スニペット集 〜カスタムプロパティ編〜


f:id:esakun:20150825162207p:plain

開発環境


今回はカスタムプロパティをDOTweenを使ってTweenさせてみようと思います。

記事上で扱う『カスタムプロパティ』とは自分で定義したプロパティのことを指します。

public class Hoge
{
    public float Foo {
        get; set;
    }
}

例えばコチラのソースコード上では、float型のFooプロパティをカスタムプロパティとします。

HOTweenよりDOTweenが便利なポイントの1つは拡張メソッドです。
このおかげで非常にコード量を少なくすることが可能になりました。

しかしカスタムプロパティの場合、当たり前ですが開発者が独自に定義したものなので、あらかじめ用意された拡張メソッドは存在しません。

ということで今回紹介する内容は、カスタムプロパティをトゥイーンさせる方法です。
例としてカスタムプロパティであるfloat型のFooを0.5秒かけて0から1にトゥイーンさせてみます。

HOTweenとは全く文法が違います

DOTween.To (this, 0.5f, new TweenParams().Prop ("Foo", 1f));

とHOTweenライクに書いてはダメです。コンパイルが通りません。

DOTweenは何をトゥイーンさせ、どうトゥイーンさせるかを指定するためにgetter / setterを用意しなければなりません。
正しい文法はこちらです。

DOTween.To (()=>Foo, (x)=>Foo = x, 1f, 0.5f);

一風変わった書き方に見えてしまうかもしれないので少し解説を挟みます。

DOTweenクラスのクラスメソッドToの文法は、以下の構成になっています。

  • 第1引数 : トゥイーンさせるgetter関数
  • 第2引数 : トゥイーンさせるsetter関数
  • 第3引数 : トィーンさせる量
  • 第4引数 : トィーンさせる時間

第3, 4引数に関しては感覚的に理解できるかと思います。
問題は第1, 2引数です。

第1引数の意味

()=>Foo

このラムダ式が何を意味するのかというと、トゥイーンさせるプロパティの指定です。ラムダ式の中でFooというプロパティを返却することでFooがトゥイーンするようになります。

第2引数の意味

(x)=>Foo = x

トゥイーン時の値の代入指定です。
0.1秒経過した時 => 0.2、0.2秒経過した時 => 0.4と、xの値が更新されFooに代入されていきます。
※"x"という変数は、別に"x"でなくても問題ありません。任意の変数名が使用できます。

カスタムプロパティの使い道

ここまでDOTweenのカスタムプロパティのトゥイーン方法を説明してきましたが、どういった時にカスタムプロパティを使えばよいのか分からない方もいるかもしれないので少し補足します。

テキストの表示をアニメーションさせたい時などにカスタムプロパティは有効です。
f:id:esakun:20150914000034g:plain

以下のソースコードでは、Textコンポーネントの値を2秒かけた0から100まで順番に表示させます。

public class Hoge : MonoBehaviour
{
    public Text _text;
    private int _num;

        //  Numがカスタムプロパティ
    public int Num {
        set {
            _num = value;
                        // Numに値が代入されると画面上の文字が更新される
            _text.text = _num.ToString ();
        }
        get {
            return _num;
        }
    }

    void Start ()
    {
        DOTween.To (() => Num, (n) => Num = n, 100, 2f).SetEase (Ease.Linear);
    }
}

Textコンポーネントの値をトゥイーンさせるDOTextという拡張メソッドもありますが、こちらはあくまでstring型のアニメーションなので、指定した文字列にアニメーションさせる最中にランダムな文字列を表示させることが出来ます。(以下のgifアニメーション参考)
f:id:esakun:20150914000005g:plain
ただ、数字を順番に表示させるということは出来ません。

まとめ

DOTweenでカスタムプロパティのトゥイーン方法を説明してきました。
前回記事と合わせれば、大抵のものはトゥイーンさせることが出来るようになったのではないでしょうか。


アニメーションを深掘りする第1歩として役に立った本

◆関連記事

esakun.hateblo.jp

www.shibuya24.info

esakun.hateblo.jp