TextMeshProとDOTweenを使って開発する時の自分用メモです。
最近DOTextをさわる機会が多いので、やったことなどをまとめておきます。
DOTextの表示速度を一定にする方法と、タップされたら即座に表示する方法~などなど。
8月1日
他にもいくつかメモを追加しました
DOTextについてはこちら。
- 開発環境
- 前提
- 1. デフォルトのEaseタイプを変える
- 2. テキスト表示速度を一定にする
- 3. 表示中にタップされたら即座に表示させる
- 4. 文字列を不規則に揺らす
- 5. 文字に表示される枠を消す
- 6. 縦書きで表示したい
- 7. ボタンが反応しない時
- 参考資料
開発環境
Unity 2020.1.0f
Text Mesh Pro v3.0.1
DOTween Pro v1.0.244
前提
DOTweenをTextMeshProで使うにはDOTween PRO(有料版)が必要です。
また、最初のセットアップ時にTextMeshProのモジュールを追加する必要があります。
知らないうちにDeAudioとDeUnityExtendedというのが新しく追加されていますね。
---------ここから本題---------
1. デフォルトのEaseタイプを変える
DOTextに関わらず、DOTweenはSetEaseでEaseタイプを設定できますが、
何も設定されていない場合はOutQuadになります。
解決方法
ユーティリティパネルから変更できます。
UnityEditorのTools/Demigiant/DOTween Utility Panelから開くことができます。
パネルが表示されたら、右上のPreferencesを押します。
すると様々な設定を変更できるようになるので、Easeからデフォルトに設定したいEaseを設定しましょう。
2. テキスト表示速度を一定にする
DOTextは第二引数の値でduration(持続時間)を設定できます。
持続時間とは表示を完了するまでの時間です。つまり、このdurationは表示速度ではありません。
TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>(); string mes = "これは1つ目のメッセージです。\n約25文字あります。"; tmpro.DOText(mes, 10);
TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>(); string mes = "これは2つ目のメッセージです。\n1つ目から10文字も増え約35文字になります。"; tmpro.DOText(mes, 10);
TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>(); string mes = "これは3つ目のメッセージです。\n2つ目から更に文字数が増えてしまい、\nなんとだいたい50文字まであります。"; tmpro.DOText(mes, 10);
durationが同じ値であっても、文字数が25と50の場合では表示速度に差が出てしまいます。
同じタイミングで表示を終了させたい場合はこれでもいいかもしれませんが。
解決方法
文字数を考慮した第二引数を与えると解決します。
文字数 * 1文字の表示時間 を代入しましょう。1文字あたり0.1秒で表示します。
tmpro.DOText(mes, mes.Length * 0.1f);
3. 表示中にタップされたら即座に表示させる
やりたいこと
DOTextで表示中に画面がタップなりクリックされたらTweenを終了し即座に文字を表示したい。
解決方法
タップされたらKillを呼んでtextに即座に書き込む。
KillはTweenを即座に終了させるコマンドです。あとはそのままtextに書き込んで終わり!
TextMeshProUGUI tmpro; string[] mes = new string[3]; int mesNum = 0; string mesText; void Start() { tmpro = GetComponent<TextMeshProUGUI>(); mesNum = 0; mes[0] = "これは1つ目のメッセージです。\n約25文字あります。"; mes[1] = "これは2つ目のメッセージです。\n1つ目から10文字も増え約35文字になります。"; mes[2] = "これは3つ目のメッセージです。\n2つ目から更に文字数が増えてしまい、\nなんとだいたい50文字まであります。"; } //画面とかタップされたらよばれる関数 public void OnDown() { //tmproがTweenしているかどうか if(DOTween.IsTweening(tmpro)) { //Tween中なら即終了 tmpro.text = mes[mesNum - 1]; tmpro.DOKill(); } else { if(mesNum > mes.Length - 1) return; mesText = mes[mesNum]; //一度textを無にしてから書き込もうね tmpro.text = ""; tmpro.DOText(mes[mesNum], mes[mesNum].Length * 0.1f); mesNum++; } }
4. 文字列を不規則に揺らす
参考元
Undertaleで見た・・・ような気がする演出。
似たような機能をピンポイントで実装する機会があったので、Undertale風にして書き残します。
以下コード
void Start () { TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>(); DOTweenTMPAnimator tmproAnimator = new DOTweenTMPAnimator(tmpro); Sequence seq; for(int i = 0; i < tmproAnimator.textInfo.characterCount; ++i) { // '*'は揺らさないよ if(tmpro.textInfo.characterInfo[i].character == '*') continue; //文字ごとにSequenceを作る seq = DOTween.Sequence(); seq.SetDelay(Random.Range(3f, 6f)); seq.Append( tmproAnimator.DOShakeCharOffset(i, 0.1f, 5f, 0) ); seq.SetLoops(-1); } }
ちなみにこれはまだ改善点があります。
SetDelayに乱数を与え揺らすタイミングを文字ごとにずらしているわけですが、
これはSequenceを実行した時点で固定されます。
同じく揺れる向きも固定されるので、実は不規則に揺れてはいないんですよね。
いろいろ試してもうまく改善できなかった。。。
5. 文字に表示される枠を消す
TextMeshProで表示する文字に枠が表示される問題がたまにおきます。
ちなみにFontSizeを大きくすると枠が消えます。
ちゃんとした原因はわかりませんが解決方法はあったので書き残します。
解決方法
Font Assetの作成時、Sampling Point SizeをAuto Sizingにせず、CustomSizeにして値を設定しましょう。
↓Auto Sizeの場合、Sizeが255になっていました
これを60にしてジェネレートしなおすと解決します。
これは作成するフォントの文字数が少なく、文字数に対してAtlas Resolutionが大きい場合に発生するようです。
(とても大きな文字が作られるため)
Sizeはいくつがいいのかはプロジェクトによると思いますが、テラシュールブログさんによると60前後がいいそうです。
Unityゲーム開発者ギルドで似たような話題を見た気がしますが忘れちゃった。。。
6. 縦書きで表示したい
Undertaleのパピルスのように縦書きで表示したい場合
すでに先駆者がいらっしゃったのでそちらで。
7. ボタンが反応しない時
Text Mesh ProのRaycastが有効になっていると起こります。
例えば↓の図の場合、TextMeshProの範囲(黄色い枠内)は下にButtonがあっても反応しません。
これはTextMeshPro-TextのExtra Setting/Raycast Targetのチェックを外すことで解決します。
これ以外にも、TextMeshProをButtonの子オブジェクトにすることでも解決します。
参考資料
(:3[kanのメモ帳]
DOTweenに関してはKanさんの記事でまとめられています。
ゲームUIネット
実はDOTweenは最近アップデートされました。
そちらについてはゆーじさんのゲームUIネットがとても学びになります。
本日開催のyokohama.unityでも登壇されていました。
本日の #yokohamaunity の登壇資料ですhttps://t.co/IXc6JjwWjE
— ゆーじ (@yuji_ap) 2020年7月31日
Unity使いこなし術
天神いなさんの投稿しているUnity使いこなし術シリーズでDOTweenが解説されています。
他、わかりにくい所、間違っている所がありましたらコメントまでお願いします!