文字をフェードインさせながら大きくしたり、逆に小さくしながらフェードアウトさせたり、ちょっと動きを付けたりといった時に、Animation Clipを使うとスクリプトを書かずに済んで楽です。最初の設定がちょっと分かりづらかったので、その辺りの備忘録としてまとめておきます。
Animation Clipを作成しておけば、AnimatorやTimelineでも利用できます。
目次
前提条件
- Windows7
- Unity2017.1.1
- TextMesh Pro
以下のようにTextMesh Proで文字を表示して、適当な画像をQuadに貼り付けて配置しました。画像はSpriteでも構いません。
準備
試してみたい場合は、以下の手順でプロジェクトを作成してください。
- Unity2017.1以降で新規にプロジェクト作成
- Asset Storeから TextMesh Pro をダウンロードしてインポート
- https://am1.jp/blog/AnimationRensyu.unitypackage をダウンロードして、Unityの[Project]ビューにドラッグ&ドロップして読み込む
- AnimationRensyu シーンをダブルクリックして開く
テキストアニメーション
登場アニメーション
テキストが表示されていない状態から、拡大しながら現れるアニメーションを作成してみます。
Animation Clipを作成
[Project]ビューの[Create]から[Animation]を選択して、新しいアニメーションクリップを作成して、名前をSpawn Text
などにしておきます。
作成した[Spawn Text]をドラッグして、[Hierarchy]ビューのアニメーションさせたいテキストにドロップします。
自動的に[Animator Controller]がゲームオブジェクトにアタッチされて、アニメーションクリップがあったフォルダーに保存されます。
作成されたAnimator Controllerの名前をText Animator
などに変更しておくとよいでしょう。
アニメーションを作成するために、[Window]メニューから[Animation]を選んで、Animation Windowを開きます。
フォントサイズの変更アニメーションの作成
アニメーションを編集するには、[Hierarchy]ビューからアニメーションが割り当てられているオブジェクトを選ぶ必要があります。[Hierarchy]ビューからText Mesh Proのテキストを選びます。
スプライトなどをアニメーションさせる時は、該当するスプライトをAnimation Windowにドラッグしますが、表示するパターンを変更する必要がなければ、あの作業は不要です。変更したいプロパティーを追加して、値を変更していけばよいです。
サイズの変更をしたいので、[Text Mesh Pro]の[Font Size]プロパティーを追加します。[Add Property]をクリックして、[Text Mesh Pro UGUI (Script)]の左の三角をクリックして開きます。
表示されるメニューから[Font Size]を探して、右の(+)をクリックして追加します。
開始時のフォントサイズを0にしておきます。0のところの菱形をクリックして選択したら、左の欄の数字をクリックしてから0
を入力してサイズを0にします。
時間軸の部分をドラッグしてみてください。フレームにあわせて文字が拡大していくようになります。
少し大きさをオーバーして戻す
動きに変化をつけてみます。最終サイズより少し大きくしてから戻るようにしてみましょう。アニメーションカーブを使うと、アニメーションの仕方を調整できます。Animation Window下の[Curves]ボタンを押します。
カーブ編修ウィンドウに切り替わります。以下のような操作で、表示範囲を調整できます。
- マウスホイールボタンをドラッグして移動させると、表示範囲をスクロール
- [Ctrl]キーを押しながらホイールを回転させると、左右方向の拡大・縮小
- [Shift]キーを押しながらホイールを回転させると、上下方向の拡大・縮小
カーブを調整します。最後のところの角度を調整したいので、終端をクリックして選択します。
角度の調整ハンドルが表示されるので、ドラッグして、上に移動させてカーブを変更します。
再生ボタンで再生してみてください。文字が少し大きくなって戻るような表現になりました。
このようにしてアニメーションにちょっとした変化を加えることができます。
透明から現れるようにする
透明な状態から、文字が見えるようにしていきます。Text Mesh Proだとアルファ値を設定する場所がいくつかありそうですが、ここでは[Font Color]を使います。先ほど[Font Size]を追加したのと同じ手順で、[Add Property]ボタンを押して、[Text Mesh Pro UGUI (Script)]の左の三角を押して開いて、[Font Color]の右の(+)をクリックしてプロパティーを追加します。
(Colorじゃないので注意!Colorのアルファ値は反映しませんでした)
[0]フレームの値を設定したいので、時間軸の場所をドラッグして0
にカーソルを戻します。
Font Colorプロパティーの左の三角をクリックして開いたら、[Font.Color.a]の値を0にします。
これで再生すると、文字がふんわり浮かんでくるようになります。
練習問題
新しく文字のAnimationを作成して、文字がふんわりと消えるようなアニメーションを作ってみましょう。
1枚の画像にアニメーションをつける
Animationを使って、1枚の画像に動きをつけることもできます。基本的にやることは文字の時と同じです。画面いっぱいに画像が広がって、ホワイトアウトするようなアニメーションを作ってみましょう。
サンプルの画像は、[Quad]オブジェクトに、子カルガモのテクスチャを設定したMaterialを設定したものです。スプライトでも同様のことができますが、設定するパラメーターが変わるのでその部分を読み替えてください。
アニメーションクリップを作成する
Animation Windowから作成することができますので、その方法でやってみます。
[Hierarchy]ビューからアニメーションを設定したいオブジェクトを選択したら、[Animation Window]に[Create]ボタンが表示されるので押します。[Animation Window]が表示されていなかったら、[Window]メニューから[Animation]を選択して開きます。
アニメーションの保存先とファイル名を設定して保存します。これで、必要なAnimation ClipとAnimator Controllerが新規に作成されます。
アニメーションを設定する
画像を変更する必要はないので、[Animation Window]に画像をドラッグ&ドロップする必要はありません。変化させたいパラメーターの設定をすればそれで動きます。
- 画面いっぱいに画像が広がって
- ホワイトアウト
- 座標は画面中央に移動していく
上記をやりたいので、必要なプロパティーは[Transform]の[Position][Scale]と、[Renderer]の[_Emission Color]です。まとめて追加します。
[ Add Property]ボタンを押して、[Transform]の左の三角をクリックして開いて、[Position]と[Scale]の右の(+)をクリックして追加します。
同様に、[Mesh Renderer]の[_Emission Color]を追加します。
初期状態からアニメーションさせたいので、最後のパラメーターを設定します。まずは時間軸の部分をドラッグして、再生位置を最後のフレームに移動します。
それぞれのパラメーターを以下のように設定しました。[Scale]は画面いっぱいになるサイズにそれぞれ調整してください。
- [Position.x]と[Position.y]を
0
- [Scale.x]と[Scale.y]を
30
- [Emission Color.r][Emission Color.g][_Emission Color.b]を
1
これで基本となるアニメーションはできました。あとは、必要に応じて[Curve]を操作して、変化をつければ完成です。
練習問題
画像が出現するアニメーションを作成してみましょう。
まとめ
最初、Animationを使うには、画像をドラッグ&ドロップしなければならないものと思い込んでいました。画像を加える必要があるのはスプライトのパターンを切り替えたい場合のみで、本来の役割は、Animationコンポーネントがアタッチされているゲームオブジェクトが持っているコンポーネントのパラメーターを、時間経過に沿って変化させるというものでした。
そこを理解しておくと、見た目のアニメーションのために使うのではなく、時間が経過するごとに攻撃パターンを切り替えたり、強さを変化させるようなゲームバランスに関わる部分もAnimationで仕込めそうです。イベントを呼び出すことも可能なので、プログラマーが弾を撃つとか、プレイヤーを追うなどのキャラクターの行動を切り替える関数を用意しておいて、デザイナーがAnimationを使って敵の動きを構築するようなことも可能そうです。
作成したものはAnimation Clipですから、AnimatorやTimelineで様々な制御をさせることができます。応用範囲はかなり広そうです。
アセット
テキストにはこのアセットを使いました。
完成プロジェクトです。新規プロジェクトに[TextMesh Pro]をインポートしてから、このパッケージをインポートすると完成版のシーンをご覧いただけます。