Chapter 17無料公開

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

Imageクラスのトゥイーン

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

👉DOColor

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

  • Image
  • RawImage
  • Text

などで使用できます。

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

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

👉DOFade - 透明度だけトゥイーン

_target.DOFade(0.2f, 1.5f);

DOFadeを使うとRGBAチャンネルの
Aチャンネルだけをトゥイーンしてくれます。

透明度だけをトゥイーンさせるということは
開発中によく発生しますので覚えておきましょう。

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

DOFadeはDOColorで置き換え可能

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

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

CanvasGroupは透明度プロパティのみ保持しているため、
DOColorで置き換えることはできません。

👉DOFillAmount

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

ドーナツ型

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

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

  • Image Type: Filled
  • Fill Method: Radial 360

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

ドーナツ型の塗りつぶすトゥイーンを作成できます。

DOFillAmountはゲームUIでしょっちゅう出てくるので、
覚えておきましょう。

直線型

  • Image Type: Filled
  • Fill Method: Horizontal

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

Textクラスのトゥイーン

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

👉DOText - 文字列の流し込み

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

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

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

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

👉DOCounter - 数字をトゥイーン

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

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

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

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

引数 内容
1 開始の値
2 完了の値
3 トゥイーン時間
4 カンマ区切りフラグ
5 CultureInfo

CultureInfoはDOTweenの説明からは
大きく外れてしまうため割愛します。
巻末のリンク集をご覧ください。
Chapter 49📖リンク集・更新履歴【無料】

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

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

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


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

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