Flashとここが違うよSpineは（アニメ制御編#1）

5863 ワード
flash ActionScript staring Spine ActionScript テキストリンク

思い立った時に書きだめるFlashとの違いという視点でSpineを説明する不定期シリーズです。
なお、前回の投稿はこれ Flashとここが違うよSpineは (深度編)です。


今回の動作サンプル。http://harayoki.github.io/qiita_demo/gogh1/
解説は投稿の最後に。

アニメーションを２つ同時に再生したい

あいさつするアニメーションとにっこり笑うアニメーションを同時に再生したい、ジャンプしつつ攻撃するアニメーションを再生したい。このような時、FlashとSpineではどうするでしょうか。それぞれ見てみます。

入れ子アニメーションまたはパターンを用意するFlash

Flashのアニメーション再生指定はMovieClipにひも付き、ラベル指定で行います。２つのラベルは同時に再生できないので、

sample.as
girlMc.gotoAndPlay("greeting");
girlMc.face.gotoAndPlay("smile");

manMc.gotoAndPlay("jump");
manMc.body.gotoAndPlay("attack");

のように、MovieClipを入れ子にしてそれぞれに対してアニメーション指定をしてやります。あいさつ＋笑う、のように対象パーツがはっきりしていれば合点がいきますが、ジャンプ攻撃のような場合は入れ子の順序を逆にして

sample.as
manMc.gotoAndPlay("attack");
manMc.body.gotoAndPlay("jump");

のような形でも良さそうですし、入れ子が面倒ならグラフィックシンボルを駆使して両者をまとめたラベルを作ってしまうのもよく取られる手です。

sample.as
manMc.gotoAndPlay("jump_attack");

ただ、ここにさらに後ろを振り返るだとか、ダメージモーションなどが入ってくると、どの方法であれ、仕組みが破綻して管理が難しくなってきます。結果Scriptでの補佐が入ったり、カラーの適用やフィルタの適用など、アニメーションを阻害しない方法での状態表現に向かったりしますね。

手腕の見せ所でもあるので、もっとクールに問題を解決している人もいると思いますが、一般的にはこのようなところかと思います。複雑なアニメーションでの限界は垣間見えます。まあ、そもそもキャラクターアニメーションツールではなく、いわゆるムービーを作ためのツールから始まったものですしね。

アニメーションの複数同時再生ができるSpine

対してSpineのアニメーションは階層構造にある各BoneやSlotに紐付いてはおらず、キャラクター全体に紐付いています。とすると全体で１つのアニメーション指定しかできないかというとそうではなく、再生命令時に引数のtrack番号指定をずらすことで、複数のアニメーションを同時に再生することができます。setAnimationByNameメソッドの第一引数の番号がそれです。(Starling Spine runtimeの場合)

sample.as
manSkeletonAnim.state.setAnimationByName(0, "attack");
manSkeletonAnim.state.setAnimationByName(1, "jump");

これでジャンプするアニメーションと攻撃するアニメーションが同時に再生されます。両者で制御しているパーツ(Bone/Attachment/Slot/mesh)がかぶっている場合もうまい具合に折り合いを取ってくれます。便利ですね！

なお、track番号を同じにすることで、普通にアニメーションの切り替えが行われます。この際に切り替わり具合を調整できたりもしますが、また気が向いたときに別の投稿にまとめます。

デモの解説

強面のGさん(仮名)がゆらゆらと歩いているループアニメーション(yurayura)に、うなずくアニメ(unun)と、不機嫌な顔になるアニメ(musu)を違うtrack番号指定で合成再生します。それぞれ制御しているメッシュ部分がかぶっていますが、うまく合成される事が確認できます。
また気持ち悪いループアニメ(gungun)をyurayuraと同じトラック番号で再生できるので、アニメーションを切り替える場合の挙動も確認する事ができます。


gungun

なお、デモに使っているテクスチャアトラス画像は以下になります。メッシュアニメーションの偉大さがわかる素材構成。モンティパイソン万歳。

ソースコードのメイン処理はこのへんに。

おわりに

この系統の投稿ではFlashの不便なところを指摘することがありますが、個人的には今もFlash大好きですし、上記のSpineのデモもActionScript制御です。Flash愛がこもった上で別のツールとの比較をしている事に留意していただければと。