今回はテクスチャーを切り替えてアニメーションを切り替える方法についてです。
上の画像のようにスプライトやAnimationClip、OverrideAnimationControllerを用意せずともキャラクターを差し替えることが出来ます。
目次
Unityのスプライトアニメーション
Unityの2D機能ではスプライトアニメーション(パタパタアニメ)はSprite(アセットID)を差し替える事により実現しています。
このアプローチはフィルレートやテクスチャ配置の柔軟性、ファイルサイズやパフォーマンス等で有益です。
ただし、RPGツクール素材で使われている古き良きアプローチのような、規格が決まっているスプライトのアニメーションを実現する場合には、多くの手間が発生します。
例えばぴぽや様が公開している素材を使いたい場合、以下のような手間が発生します。
- アニメーションを制御するAnimationControllerを作成する
AnimationClipは、空のアニメーションクリップを作成し登録する。 - テクスチャからスプライトを分割する
- 分割したスプライトをAnimationClipに登録する
- OverideAnimationControllerでAnimationControllerのアニメーションを上書きする
- 2~4の手順をキャラクターの数だけ繰り返す
こういったフローはAssetGraphToolやエディター拡張で自動化すれば良いのですが、出来ればスクリプトを記述するのは面倒なので避けたい所です。
どうせ規格は決まっているのです。ならば、別にテクスチャを差し替えても良いではありませんか。
テクスチャの差し替えでアニメーションを差し替える手順
トップのGifアニメにあるように、テクスチャの切替でアニメーションを切り替える手順を、0から紹介します。
このアプローチの場合、AnimationClipやAnimationControllerは1回生成し、後はテクスチャを切り替える事でキャラクターの切替を実現します。
なお、テクスチャの上書きは、基本となるスプライトアニメーションに使用しているテクスチャと同一の解像度(正確には比率)、及びレイアウトでのみ可能です。
1. 基本となるテクスチャのSpriteを分割する
まずは基本となるSpriteのテクスチャを決めて、スライスします。
この手順は一般的に知られている方法と同一です。
Texture Typeを Sprite(2D and UI)に、Sprite Mode を Multiple、Mesh TypeをFull Rect、Filter Modeはドット数が少ないならPointが綺麗に出ます。
Sprite Editorでエディターウィンドウを開きます。
ウィンドウを開く際に「Unapplied Import Settings for...」みたいなウィンドウが出るかもしれませんので、Applyを選択します。
Sprite Editorを開いたら、スプライトをスライスします。
Sliceを選択後、Grid by cell sizeを選択、分割するスプライトのサイズを指定してSliceを選択。
あとはApplyを押して変更を反映すればスプライトが分割されます。
なお、32x32のスプライト表現の場合、Pixels per unitを32に設定すると1mの大きさになります。1mにしておくと配置が何かと便利なので、覚えておくと良いかもしれません。
2. アニメーションを作成する
次に基本となるアニメーションを作成します。
この方法も一般的な方法です。
テクスチャから生成したSpriteをシーンにドラッグ&ドロップしAnimationClipを作成します。
また、もしアニメーションの内容や速度を変更したい場合は、AnimationWindowで設定します。
下のGifアニメの場合、スプライトが「右足」「両足」「左足」なので最後に「両足」を足すことでループの違和感をなくしています。
またスプライトが1秒間に12回だと速いので、半分の6回に減らしています。
これで基本的な移動を作ってみました。
次はアニメーションの制御です。
3. AnimationControllerを作成する
AnimationControllerを使用してアニメーションの制御を行います。全てPlayable APIを使用するならこの手順は無くても良いです。
今回のAnimationControllerでは、移動だけを制御します。
こういった「アニメーション終了待ちしない」かつ「アニメーションが行き来する」移動なのでステートマシンではなくBlend Treeを使用します。
というか、よくこういった手順ではステートマシンが紹介されますが、アニメーション終了待ちしない&状態を持たないものはステートマシンで制御すると、後半しんどくなります。
作成したAnimationControllerを開き(大抵の場合はスプライトと同名)、一旦全てのステートを空にします。
パラメータを登録します。
AnimationControllerはキャラクターの動きや周辺の状況をパラメータに入力すれば最適なアニメーションを選択する的な物です。
今回は移動方向のxとyだけ登録します。
BlendTreeにアニメーションを登録します。
この地点でキャラクターが正常に動くか確認します。
例えば下のコードをアニメーションを行うキャラクターにセットすれば、キャラクターが移動してくれます。
この手順で問題ないようなら、ベースとなるテクスチャの解像度をUnityのテクスチャインポーターの設定で小さくします。
欲しいのは比率ですので、ベースとなるアニメーションが使用するテクスチャ自体は超小さくても問題ないです。
4. テクスチャの差し替えでアニメーションを切り替える
最後にテクスチャの差替を行います。
テクスチャの差替は下のソースコードで行います。
このコードをSpriteAnimationを行うキャラクターにセットします。
後はTextureに上書きしたいテクスチャを登録すれば完了です。
補足
この手法はSpritePackerやSpriteAtlasのような、テクスチャをパッキングする仕組みは使えません。この二つは「Spriteをテクスチャに詰めるだけ詰める」仕組みなので、テクスチャ上のレイアウトが一致しなくなります。
関連
Playableを使う場合。2Dはブレンドが無いので、割とPlayable APIと相性が良い気がします。
例えばこんな感じで。
今回のアプローチは殆どUnity標準のスプライトの使い方なので、スプライトの機能は概ね使えます。
tsubakit1.hateblo.jp
今回の方法はUV固定でテクスチャIDを差し替える事で実現しているので、テクスチャを一つにまとめてUVを振り直すSpriteAtlasやSpritePackerは使えないです。
今回紹介した表現が出来たら多分次にやりたくなることです。