【Unity・アセット紹介】Text Animator for Unity を使ってみよう!
こんにちは! 今日はアセットの紹介記事を書いてみたいと思います!
今回は、 Asset Store にて有料販売している Text Animator for Unity の紹介です!
Cult of the Lamb 等でも採用されているらしいです。あの特徴的な会話シーンはこれで実装されていたのですね!
Hijack でも採用しています。 Text Animator for Unity を使うと、たとえば以下の動画のようなことができます!(5秒くらいからの書簡風の表現です!)
一番簡単な使い方! Text Animator コンポーネント
Text Animator は、 Text Mesh Pro を拡張するコンポーネントです。まずは GameObject > UI > Text Mesh Pro から Text Mesh Pro オブジェクトをつくって、それに Text Animator コンポーネントを追加する形で使います!
前準備
とりあえずなにはともあれ Text Mesh Pro を作成。
Text Animator - Text Mesh Pro を Add Component で追加します。
Web アトモスフィア漂うタグ形式でエフェクトを追加
Text Mesh Pro のテキストに、 HTML みたいなタグ形式で <shake>~</shake>
などと書きます。
使えるタグ一覧はここにあります:Built-in Effects list
(あとで説明しますが、 Behaviors と Appearances and Disappearances は違うので注意してください。今回使うのは Behaviors です)
あと、ついでに width / height とかも見やすいよう変更しておいてください。私は 1920x1040 サイズの画面に対して、半分の 960x540 のサイズの Text Mesh Pro を中央に表示することにしました。
これで Play ボタンを押すか、 Text Animator の Preview in Edit Mode というボタンを押します。
正常に動作すれば、以下の動画のように表示されるはずです!
テキストを文字ごとに表示しよう! Typewriter - By Character コンポーネント
Text Animator だけですと、文字を揺らしたりはできるのですが、「文字を1文字ずつ表示する」といったことはできません。それをするためには、 Typewriter - By Character コンポーネントを使います。
再び Web アトモスフィア漂うタグを追加
Typewriter 用のタグも追加します。ただし今度は {fade}~{/fade}
のように {~}
で囲うことに注意してください。
(前述した Appearances and Disappearances とはこのことです)
使えるタグ一覧はここにあります(再掲):Built-in Effects list
消える場合は {#fade}~{/#fade}
のように指定しますが、これはタグを指定しただけでは動作せず、後々説明するプログラムから操作しないと動きません。
ノーコード用の設定 Typewriter Starts Automatically
後で説明しますが、 Typewriter はプログラムで操作するのが基本です。しかし、とりあえず動かしてみたいという場合には、 Typewriter Starts Automatically という設定が使えます!
この設定は後でオフにしてください。
この状態で Play すると、以下のように表示されるはずです!
Typewriter をプログラムから操作してみよう!
特に「文字が1文字ずつ消える動作」を実現するには、プログラムを書くことが不可欠です!
だいたいこんな感じのコードになります。
using Febucci.UI;
var typewriter = GetComponent<TypewriterByCharacter>();
// テキストが表示されたら即消す
// 必要なら WaitForSeconds などで待つ
UnityAction onTextShowed = null;
onTextShowed = () => {
typewriter.onTextShowed.RemoveListener(onTextShowed);
typewriter.StartDisappearingText();
};
typewriter.onTextShowed.AddListener(onTextShowed);
// テキストを表示する
// 消すタグ {#fade}~{/#fade} も一緒に指定する
var text = "hello world";
typewriter.ShowText($"{{#fade}}{{fade}}{text}{{/fade}}{{/#fade}}");
Hijack 内部でマジで使われている特典コード
このあたりの処理は汎用的に書けますので、 Hijack 内部のコードを一部抽象化して公開します…!
なお、著作権は放棄していません。MPL 2.0 というライセンスで提供します。使用する場合は、クレジット表記・ライセンス表記はお願い致します。
また無保証です(OSSでよくある条件です)。このコードを使うことで起きたいかなる事態にも責任は負いかねますので、ご了承ください。
特典コードの利用規約
特典コードは Mozilla Public License, version 2.0 (MPL 2.0) で提供されています。 MPL 2.0 の日本語参考訳もあります。
フォロワー以上限定無料
無料プラン限定特典を受け取ることができます
無料