この記事は Unity アセット真夏のアドベントカレンダー 2017 の8/19の記事となります。
昨日は baba_s さんによる 「Hierarchy を拡張する多機能アセット「PRO Hierarchy + Memory Monitoring + Navigator for Selecting」紹介」 でした。
実行環境
- Unity 2017.2.0b5
- DOTween v1.1.600
- DOTweenPro v0.9.685
- TextMeshPro 1.0.55.xx.0b12
はじめに
自分は普段ゲーム上で動きをつけるとき、 DOTween を愛用しています。
DOTween自体に関しては、過去に以下のような記事を書きました。
- [Unity] DOTweenを使ってUI要素を点滅させる
- [Unity] DOTweenのSequenceを使ってアニメーションを結合する
- [Unity] DOTweenで自動再生させない
- [Unity] DOTweenでの各ループ終了時にCallback処理を挟みたい
さて、DOTweenを普段使用している人は多いと思いますが、DOTweenProはどうでしょうか。
DOTweenPro は $16.20 で販売しているアセットです。
Unityエッセンシャルパックの2Dにも含まれていました。
今回は DOTween と DOTweenPro の違いの話、Unity側への統合を踏まえ、最近無料化された TextMeshPro と組み合わせた演出の話を記載しようと思います。
DOTweenProについて
DOTweenに出来なくて
DOTweenProに出来ることは、例えば以下のようなものがあります。
ビジュアルアニメーションエディタ (DOTweenAnimation)
- コードを記載しなくてもTweenを適応することができます。
- 複数の
DOTweenAnimationをアタッチすることでSequence相当の役割を持つことも可能です。
ビジュアル進路エディター (DOTweenPath)
- パスを指定することで、そのパスを経由するようにオブジェクトを動かすことができます。
TextMeshProについて
TextMeshPro はUnity標準のuGUIに比べ、よりリッチなスタイリングが可能で、かつズームしても滑らかに表示させることのできるテキストを作成することができるアセットです。
例えば、滑らかなアウトラインを適応することが出来たり
カーニング(文字間隔)を設定できたり
Materialを適応させたりすることが出来ます。
以下の資料が詳しいです。
【Unity道場 2017】TextMesh Pro を使いこなす！
TextMeshProで生成したテキストにTweenを適応する
DOTweenProのもう一つの特徴として、TextMeshPro用の拡張メソッドの提供があります。
http://dotween.demigiant.com/documentation.php#textMeshProShortcuts
具体的にいくつか例を見て行きましょう。
文字の大きさを変更する
.DOScale() か .DOFontSize()を使用します。
.DOScale() を使用した場合、文字のレイアウト(改行)は崩れません。
using UnityEngine;
using DG.Tweening;
using TMPro;
[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
void Start()
{
this.GetComponent<TextMeshProUGUI>()
.DOScale(1.2f, 1.0f)
.SetLoops(-1, LoopType.Yoyo)
.Play();
}
}
.DOFontSize() を使用した場合、文字の描画領域はそのままにフォントサイズが変更されるので、 Warpping & Overflow における設定に準拠して挙動が変わります。以下は Truncate を指定して、描画領域に納める例です。描画領域の外に出た文字列が切り取られています。
using UnityEngine;
using DG.Tweening;
using TMPro;
[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
void Start()
{
TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>();
text.DOFontSize(text.fontSize * 1.5f, 1.0f)
.SetLoops(-1, LoopType.Yoyo)
.Play();
}
}
文字をフェードイン/アウトさせる
文字全体をフェードイン/アウトさせるのであれば .DOFade() を使用します。
using UnityEngine;
using DG.Tweening;
using TMPro;
[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
void Start()
{
this.GetComponent<TextMeshProUGUI>()
.DOFade(0.0f, 1.0f)
.SetLoops(-1, LoopType.Yoyo)
.Play();
}
}
文字の塗り(Face)箇所だけフェードイン/アウトさせるのであれば .DOFaceFade() を使用します。
using UnityEngine;
using DG.Tweening;
using TMPro;
[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
void Start()
{
this.GetComponent<TextMeshProUGUI>()
.DOFaceFade(0.0f, 1.0f)
.SetLoops(-1, LoopType.Yoyo)
.Play();
}
}
文字の枠(Outline)箇所だけフェードイン/アウトさせるのであれば、 .DOOutlineColor() でα値を変更します。
using UnityEngine;
using DG.Tweening;
using TMPro;
[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
void Start()
{
TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>();
Color transparentColor = text.outlineColor;
transparentColor.a = 0.0f;
text.DOOutlineColor(transparentColor, 1.0f)
.SetLoops(-1, LoopType.Yoyo)
.Play();
}
}
文字を1文字ずつ表示/変更させる
文字を1文字ずつ表示させるのであれば .DOMaxVisibleCharacters を使います。
TextMeshProは maxVisibleCharacters プロパティに設定された値の文字数のみ、文字が描画されます。事前に0を代入し、未表示な状態にした上で、現在入力されている文字数をTweenで受け渡します。
using UnityEngine;
using DG.Tweening;
using TMPro;
[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
void Start()
{
TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>();
text.maxVisibleCharacters = 0;
text.DOMaxVisibleCharacters(text.text.Length, 3.0f).Play();
}
}
.DOText() を使用することで現状表示されている文字を1文字ずつ、指定した文字列に置き換えることが可能です。上の1文字ずつ出現する処理も、初期文字列を空文字にすることで実現できます。
(この辺りは UI.Text.DOText() と同じ挙動)
using UnityEngine;
using DG.Tweening;
using TMPro;
[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
[Multiline]
public string FromText;
[Multiline]
public string ToText;
void Start()
{
TextMeshProUGUI text = this.GetComponent<TextMeshProUGUI>();
text.text = this.FromText;
text.DOText(this.ToText, 3.0f).Play();
}
}
文字間隔を広げる
文字間隔の調整は DOTweenPro での拡張メソッド群に含まれていないので、独自に拡張メソッドを記載します。
(これは無償版のDOTweenでも対応可能)
using DG.Tweening;
using TMPro;
public static class TextMeshProExtesion
{
public static Tween DOCharacterSpacing(this TextMeshProUGUI textMeshProUgui, float amount, float duration)
{
return DOTween.To(() => textMeshProUgui.characterSpacing, x => textMeshProUgui.characterSpacing = x, amount, duration);
}
}
using UnityEngine;
using DG.Tweening;
using TMPro;
[RequireComponent(typeof(TextMeshProUGUI))]
public class TweenTextMeshProSample : MonoBehaviour
{
void Start()
{
this.GetComponent<TextMeshProUGUI>()
.DOCharacterSpacing(30, 2.0f)
.SetLoops(-1, LoopType.Yoyo)
.Play();
}
}
UI.Maskと組み合わせて金属感を出す
TextMeshPrpはuGUIにも対応しています (TextMeshProUGUI)。
こちらは UI.Graphic を継承しているため、 Maskコンポーネント を適応することが可能です。TextMeshProで生成したテキストに光沢のようなImageを重ね、それをDOTweenで動かすことで、金属のような見栄えを作ることが出来ます。
(これは無償版のDOTweenでも対応可能)
最後に
上記の動きを組み合わせて、こんな感じの演出を作ることができました。
(もっといい感じのものを作るセンスが欲しかった)
明日の Unity アセット真夏のアドベントカレンダー 2017 は SASE さんの 「【Unity】Pixel Art風な見た目にするアセット Stylizer - Extended」 です！
この作品はユニティちゃんライセンス条項の元に提供されています