tanaka's Programming Memo

プログラミングについてのメモ。

Animationクリップで文字や画像をアニメーションさせる

文字をフェードインさせながら大きくしたり、逆に小さくしながらフェードアウトさせたり、ちょっと動きを付けたりといった時に、Animation Clipを使うとスクリプトを書かずに済んで楽です。最初の設定がちょっと分かりづらかったので、その辺りの備忘録としてまとめておきます。

Animation Clipを作成しておけば、AnimatorやTimelineでも利用できます。

f:id:am1tanaka:20171125195651g:plain

目次

前提条件

以下のようにTextMesh Proで文字を表示して、適当な画像をQuadに貼り付けて配置しました。画像はSpriteでも構いません。

f:id:am1tanaka:20171125164802p:plain

準備

試してみたい場合は、以下の手順でプロジェクトを作成してください。

  • Unity2017.1以降で新規にプロジェクト作成
  • Asset Storeから TextMesh Pro をダウンロードしてインポート
  • https://am1.jp/blog/AnimationRensyu.unitypackage をダウンロードして、Unityの[Project]ビューにドラッグ&ドロップして読み込む
  • AnimationRensyu シーンをダブルクリックして開く

テキストアニメーション

登場アニメーション

テキストが表示されていない状態から、拡大しながら現れるアニメーションを作成してみます。

Animation Clipを作成

[Project]ビューの[Create]から[Animation]を選択して、新しいアニメーションクリップを作成して、名前をSpawn Textなどにしておきます。

f:id:am1tanaka:20171125170942p:plain

作成した[Spawn Text]をドラッグして、[Hierarchy]ビューのアニメーションさせたいテキストにドロップします。

f:id:am1tanaka:20171125171122p:plain

自動的に[Animator Controller]がゲームオブジェクトにアタッチされて、アニメーションクリップがあったフォルダーに保存されます。

f:id:am1tanaka:20171125171315p:plain

作成されたAnimator Controllerの名前をText Animatorなどに変更しておくとよいでしょう。

アニメーションを作成するために、[Window]メニューから[Animation]を選んで、Animation Windowを開きます。

f:id:am1tanaka:20171125171508p:plain

フォントサイズの変更アニメーションの作成

アニメーションを編集するには、[Hierarchy]ビューからアニメーションが割り当てられているオブジェクトを選ぶ必要があります。[Hierarchy]ビューからText Mesh Proのテキストを選びます。

f:id:am1tanaka:20171125171659p:plain

スプライトなどをアニメーションさせる時は、該当するスプライトをAnimation Windowにドラッグしますが、表示するパターンを変更する必要がなければ、あの作業は不要です。変更したいプロパティーを追加して、値を変更していけばよいです。

サイズの変更をしたいので、[Text Mesh Pro]の[Font Size]プロパティーを追加します。[Add Property]をクリックして、[Text Mesh Pro UGUI (Script)]の左の三角をクリックして開きます。

f:id:am1tanaka:20171125172100p:plain

表示されるメニューから[Font Size]を探して、右の(+)をクリックして追加します。

f:id:am1tanaka:20171125172230p:plain

開始時のフォントサイズを0にしておきます。0のところの菱形をクリックして選択したら、左の欄の数字をクリックしてから0を入力してサイズを0にします。

f:id:am1tanaka:20171125172335p:plain

時間軸の部分をドラッグしてみてください。フレームにあわせて文字が拡大していくようになります。

f:id:am1tanaka:20171125174803g:plain

少し大きさをオーバーして戻す

動きに変化をつけてみます。最終サイズより少し大きくしてから戻るようにしてみましょう。アニメーションカーブを使うと、アニメーションの仕方を調整できます。Animation Window下の[Curves]ボタンを押します。

f:id:am1tanaka:20171125173308p:plain

カーブ編修ウィンドウに切り替わります。以下のような操作で、表示範囲を調整できます。

f:id:am1tanaka:20171125175817g:plain

  • マウスホイールボタンをドラッグして移動させると、表示範囲をスクロール
  • [Ctrl]キーを押しながらホイールを回転させると、左右方向の拡大・縮小
  • [Shift]キーを押しながらホイールを回転させると、上下方向の拡大・縮小

カーブを調整します。最後のところの角度を調整したいので、終端をクリックして選択します。

f:id:am1tanaka:20171125173600p:plain

角度の調整ハンドルが表示されるので、ドラッグして、上に移動させてカーブを変更します。

f:id:am1tanaka:20171125173742p:plain

再生ボタンで再生してみてください。文字が少し大きくなって戻るような表現になりました。

f:id:am1tanaka:20171125174006p:plain

f:id:am1tanaka:20171125174318g:plain

このようにしてアニメーションにちょっとした変化を加えることができます。

透明から現れるようにする

透明な状態から、文字が見えるようにしていきます。Text Mesh Proだとアルファ値を設定する場所がいくつかありそうですが、ここでは[Font Color]を使います。先ほど[Font Size]を追加したのと同じ手順で、[Add Property]ボタンを押して、[Text Mesh Pro UGUI (Script)]の左の三角を押して開いて、[Font Color]の右の(+)をクリックしてプロパティーを追加します。

f:id:am1tanaka:20171125181121p:plain

(Colorじゃないので注意!Colorのアルファ値は反映しませんでした)

[0]フレームの値を設定したいので、時間軸の場所をドラッグして0にカーソルを戻します。

f:id:am1tanaka:20171125181401p:plain

Font Colorプロパティーの左の三角をクリックして開いたら、[Font.Color.a]の値を0にします。

f:id:am1tanaka:20171125181508p:plain

これで再生すると、文字がふんわり浮かんでくるようになります。

f:id:am1tanaka:20171125181841g:plain

練習問題

新しく文字のAnimationを作成して、文字がふんわりと消えるようなアニメーションを作ってみましょう。

1枚の画像にアニメーションをつける

Animationを使って、1枚の画像に動きをつけることもできます。基本的にやることは文字の時と同じです。画面いっぱいに画像が広がって、ホワイトアウトするようなアニメーションを作ってみましょう。

サンプルの画像は、[Quad]オブジェクトに、子カルガモのテクスチャを設定したMaterialを設定したものです。スプライトでも同様のことができますが、設定するパラメーターが変わるのでその部分を読み替えてください。

アニメーションクリップを作成する

Animation Windowから作成することができますので、その方法でやってみます。

[Hierarchy]ビューからアニメーションを設定したいオブジェクトを選択したら、[Anif:id:am1tanaka:20171125193345p:plainmation Window]に[Create]ボタンが表示されるので押します。[Animation Window]が表示されていなかったら、[Window]メニューから[Animation]を選択して開きます。

f:id:am1tanaka:20171125193100p:plain

アニメーションの保存先とファイル名を設定して保存します。これで、必要なAnimation ClipとAnimator Controllerが新規に作成されます。

f:id:am1tanaka:20171125193345p:plain

アニメーションを設定する

画像を変更する必要はないので、[Animation Window]に画像をドラッグ&ドロップする必要はありません。変化させたいパラメーターの設定をすればそれで動きます。

  • 画面いっぱいに画像が広がって
  • ホワイトアウト
  • 座標は画面中央に移動していく

上記をやりたいので、必要なプロパティーは[Transform]の[Position][Scale]と、[Renderer]の[_Emission Color]です。まとめて追加します。

[ Add Property]ボタンを押して、[Transform]の左の三角をクリックして開いて、[Position]と[Scale]の右の(+)をクリックして追加します。

f:id:am1tanaka:20171125193827p:plain

同様に、[Mesh Renderer]の[_Emission Color]を追加します。

f:id:am1tanaka:20171125194626p:plain

初期状態からアニメーションさせたいので、最後のパラメーターを設定します。まずは時間軸の部分をドラッグして、再生位置を最後のフレームに移動します。

f:id:am1tanaka:20171125194109p:plain

それぞれのパラメーターを以下のように設定しました。[Scale]は画面いっぱいになるサイズにそれぞれ調整してください。

  • [Position.x]と[Position.y]を0
  • [Scale.x]と[Scale.y]を30
  • [Emission Color.r][Emission Color.g][_Emission Color.b]を1

f:id:am1tanaka:20171125194738p:plain

これで基本となるアニメーションはできました。あとは、必要に応じて[Curve]を操作して、変化をつければ完成です。

f:id:am1tanaka:20171125195651g:plain

練習問題

画像が出現するアニメーションを作成してみましょう。

まとめ

最初、Animationを使うには、画像をドラッグ&ドロップしなければならないものと思い込んでいました。画像を加える必要があるのはスプライトのパターンを切り替えたい場合のみで、本来の役割は、Animationコンポーネントがアタッチされているゲームオブジェクトが持っているコンポーネントのパラメーターを、時間経過に沿って変化させるというものでした。

そこを理解しておくと、見た目のアニメーションのために使うのではなく、時間が経過するごとに攻撃パターンを切り替えたり、強さを変化させるようなゲームバランスに関わる部分もAnimationで仕込めそうです。イベントを呼び出すことも可能なので、プログラマーが弾を撃つとか、プレイヤーを追うなどのキャラクターの行動を切り替える関数を用意しておいて、デザイナーがAnimationを使って敵の動きを構築するようなことも可能そうです。

作成したものはAnimation Clipですから、AnimatorやTimelineで様々な制御をさせることができます。応用範囲はかなり広そうです。

アセット

テキストにはこのアセットを使いました。

完成プロジェクトです。新規プロジェクトに[TextMesh Pro]をインポートしてから、このパッケージをインポートすると完成版のシーンをご覧いただけます。