テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】”テクスチャの差し替え” で切り替わるスプライトアニメーションを作成する手順

https://user-images.githubusercontent.com/1644563/34720576-837c1d04-f582-11e7-9f8b-7cc31b332cbc.gif

今回はテクスチャーを切り替えてアニメーションを切り替える方法についてです。

上の画像のようにスプライトやAnimationClip、OverrideAnimationControllerを用意せずともキャラクターを差し替えることが出来ます。

 

目次

 

 Unityのスプライトアニメーション

 

Unityの2D機能ではスプライトアニメーション(パタパタアニメ)はSprite(アセットID)を差し替える事により実現しています。

f:id:tsubaki_t1:20180109213056j:plain


このアプローチはフィルレートやテクスチャ配置の柔軟性、ファイルサイズやパフォーマンス等で有益です。
ただし、RPGツクール素材で使われている古き良きアプローチのような、規格が決まっているスプライトのアニメーションを実現する場合には、多くの手間が発生します。
例えばぴぽや様が公開している素材を使いたい場合、以下のような手間が発生します。

  1. アニメーションを制御するAnimationControllerを作成する
    AnimationClipは、空のアニメーションクリップを作成し登録する。
  2. テクスチャからスプライトを分割する
  3. 分割したスプライトをAnimationClipに登録する
  4. OverideAnimationControllerでAnimationControllerのアニメーションを上書きする
  5. 2~4の手順をキャラクターの数だけ繰り返す

blog.pipoya.net

こういったフローはAssetGraphToolやエディター拡張で自動化すれば良いのですが、出来ればスクリプトを記述するのは面倒なので避けたい所です。

どうせ規格は決まっているのです。ならば、別にテクスチャを差し替えても良いではありませんか。

 

テクスチャの差し替えでアニメーションを差し替える手順

f:id:tsubaki_t1:20180109222047j:plain

トップの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を選択します。

f:id:tsubaki_t1:20180109215023j:plain

f:id:tsubaki_t1:20180109215309j:plain

Sprite Editorを開いたら、スプライトをスライスします。

Sliceを選択後、Grid by cell sizeを選択、分割するスプライトのサイズを指定してSliceを選択。

あとはApplyを押して変更を反映すればスプライトが分割されます。

f:id:tsubaki_t1:20180109215522g:plain

f:id:tsubaki_t1:20180109215702j:plain

 

なお、32x32のスプライト表現の場合、Pixels per unitを32に設定すると1mの大きさになります。1mにしておくと配置が何かと便利なので、覚えておくと良いかもしれません。

f:id:tsubaki_t1:20180109220100j:plain

 

2.  アニメーションを作成する

次に基本となるアニメーションを作成します。
この方法も一般的な方法です。

テクスチャから生成したSpriteをシーンにドラッグ&ドロップしAnimationClipを作成します。

また、もしアニメーションの内容や速度を変更したい場合は、AnimationWindowで設定します。
下のGifアニメの場合、スプライトが「右足」「両足」「左足」なので最後に「両足」を足すことでループの違和感をなくしています。
またスプライトが1秒間に12回だと速いので、半分の6回に減らしています。

f:id:tsubaki_t1:20180109220814g:plain

これで基本的な移動を作ってみました。

次はアニメーションの制御です。

f:id:tsubaki_t1:20180109221718j:plain

 

3.  AnimationControllerを作成する

AnimationControllerを使用してアニメーションの制御を行います。全てPlayable APIを使用するならこの手順は無くても良いです。

 

今回のAnimationControllerでは、移動だけを制御します。

こういった「アニメーション終了待ちしない」かつ「アニメーションが行き来する」移動なのでステートマシンではなくBlend Treeを使用します。
というか、よくこういった手順ではステートマシンが紹介されますが、アニメーション終了待ちしない&状態を持たないものはステートマシンで制御すると、後半しんどくなります。

f:id:tsubaki_t1:20180109222211j:plain

 

作成したAnimationControllerを開き(大抵の場合はスプライトと同名)、一旦全てのステートを空にします。

f:id:tsubaki_t1:20180109222902j:plain

 

パラメータを登録します。

AnimationControllerはキャラクターの動きや周辺の状況をパラメータに入力すれば最適なアニメーションを選択する的な物です。
今回は移動方向のxとyだけ登録します。

f:id:tsubaki_t1:20180109222850j:plain

 

f:id:tsubaki_t1:20180109223213j:plain

BlendTreeにアニメーションを登録します。

f:id:tsubaki_t1:20180109223723g:plain

f:id:tsubaki_t1:20180109224145j:plain

この地点でキャラクターが正常に動くか確認します。
例えば下のコードをアニメーションを行うキャラクターにセットすれば、キャラクターが移動してくれます。

gist.github.com

f:id:tsubaki_t1:20180109224947g:plain

この手順で問題ないようなら、ベースとなるテクスチャの解像度をUnityのテクスチャインポーターの設定で小さくします。
欲しいのは比率ですので、ベースとなるアニメーションが使用するテクスチャ自体は超小さくても問題ないです。

f:id:tsubaki_t1:20180109225424j:plain

 

4.  テクスチャの差し替えでアニメーションを切り替える

最後にテクスチャの差替を行います。

テクスチャの差替は下のソースコードで行います。
このコードをSpriteAnimationを行うキャラクターにセットします。

gist.github.com

後はTextureに上書きしたいテクスチャを登録すれば完了です。

f:id:tsubaki_t1:20180109225854j:plain

 

f:id:tsubaki_t1:20180109234232g:plain

補足

この手法はSpritePackerやSpriteAtlasのような、テクスチャをパッキングする仕組みは使えません。この二つは「Spriteをテクスチャに詰めるだけ詰める」仕組みなので、テクスチャ上のレイアウトが一致しなくなります。

関連

Playableを使う場合。2Dはブレンドが無いので、割とPlayable APIと相性が良い気がします。

例えばこんな感じで。

tsubakit1.hateblo.jp

今回のアプローチは殆どUnity標準のスプライトの使い方なので、スプライトの機能は概ね使えます。

tsubakit1.hateblo.jp

 

今回の方法はUV固定でテクスチャIDを差し替える事で実現しているので、テクスチャを一つにまとめてUVを振り直すSpriteAtlasやSpritePackerは使えないです。

tsubakit1.hateblo.jp

 

今回紹介した表現が出来たら多分次にやりたくなることです。

tsubakit1.hateblo.jp