Chapter 17無料公開

🔰uGUI - Image・Textのトゥイーン

Imageクラスのトゥイーン

ImageクラスはGraphicクラスのサブクラスです。Imageクラスのトゥイーンを紹介しつつGraphicクラスを継承したクラスのトゥイーンも紹介します。

DOColorは色を変更するトゥイーンです。Graphicクラス（Imageの親クラス）に定義されているcolorプロパティを操作します。

などで使用できます。

_target.DOColor(new Color(1f, 0, 0), 1.5f);

R:255 G:0 B:0（赤色）に変更するサンプルです。

_target.DOFade(0.2f, 1.5f);

DOFadeを使うとRGBAチャンネルのAチャンネル（透明度）だけをトゥイーンしてくれます。透明度だけをトゥイーンさせるということは開発中によく発生しますので覚えておきましょう。

Graphicクラスの他にCanvasGroupクラスでもDOFadeは使用できます。

var color = _target.color;
color.a = 0;
_target.DOColor(new Color(color, 1.5f);

このようにDOFadeはDOColorで置き換え可能です。ただし、コード量が必然的に増えてしまうため、可読性の観点から素直にDOFadeを使う場面の方が多いです。

DOFillAmountはImageクラス限定のメソッドです。画像を端から塗りつぶすトゥイーンを作ることができます。

_target.gameObject.SetActive(true);
_target.DOFillAmount(1f, 2f)
    .SetEase(Ease.InQuart);

👇ソースコードに加えインスペクターからImageの設定を変更します。

FilledとRadial 360に設定することで

ドーナツ型の塗りつぶすトゥイーンを作成できます。DOFillAmountはゲームUIでしょっちゅう出てくるので、覚えておきましょう。

👆直線型の塗りつぶしトゥイーンは上記の設定で作れます。

Textクラスは文字を扱います。文字関連のトゥイーンを紹介していきます。

DOTextはTextクラス専用です。指定の文字列を流し込んてトゥイーンを作ることができます。

_text.DOText("DOTweenの教科書", 1f);

1文字ずつ表示するシンプルなトゥイーンです。

DOTextメソッドの引数にScrambleModeを指定して👇次のようにトゥイーンの表現を変化させることができます。

DOCounterもまたTextクラス専用のメソッドです。

_text.DOCounter(500, 9999, 1.5f, true);

DOCounterは数字をカウントアップまたはダウンする便利なトゥイーンです。

第4引数にtrueをセットすれば、3桁区切りでカンマを挿入してくれます。

// _textはTextクラスのインスタンス
_text.text = "HP : 9,999"

任意の文字列を含みつつ数値をトゥイーンさせるにはどうすればよいでしょうか？
文字列と数値を別のオブジェクトにするというのも手です。

カスタムトゥイーンを定義すれば1つのTextで実装することは可能です。

uGUIのトゥイーンはボリュームがありましたね。ただどれもよく使うため、覚えておきましょう。

次のチャプターはかなり重要です。トゥイーンのグループ化について学んでいきます。