はじめに
自分は今でもスマホ用にAIRアプリを開発したりするFlash大好きっ子なのですが、Spineにも深い可能性を感じコツコツと勉強しだしております。アニメーターの方でも同じようにFlashに慣れている方も多いと思いますので、両者の比較的な投稿を何本かしてみようと思います。（どちらにも贔屓目なしでお届けしますよ！）
ここではパーツのジョイント親子構造を作る場合を例にしてパーツの重ね合わせ順(深度)について考察してみます。パーツの親子構造というのは胴体に腿がついて、脛がついて、足首がついて、、みたいな奴です。
パーツの親子構造が重ね合わせ順に影響するFlash
Flashでパーツの親子構造を(IK機能を使わないで ※1)作る場合、MovieClip(以下MC)でも親子関係を作ります。胴体MC内に腿MCがあってその中に足首MCがある状態にします。こうする事によって胴体MCの位置や回転を編集するだけで腿MCや足首MCがそこに追従して移動する形になります。
そんなことでMCを入れ子にしないよ、という方ももちろんいると思いますが、MCアニメーションの入れ子というのは日常的に使われるというところは同意いただけると思います。（左右移動アニメの中に歩き足踏みアニメを入れ込むなど）一つの例として捉えてください。
上下にジャンプするアニメの中に
手足をじたばたさせるアニメを用意した例
ここで各パーツMCの重ね合わせ順はMC親子関係にそのまま影響を受けます。最初の例で言えば、腿が胴体より背面にあった場合、脛や足首が胴体より前面に来ることはありません。
パーツの親子構造と表示順が独立しているSpine
これに対してSpineではbone設定によるパーツの親子構造とパーツの重ね合わせ順序の設定が独立しています。同じように胴体に手足と顔が子パーツとして接続されているデータを例に見てみると、
右側のツリービューの中にDraw Orderという青いアイコンのツリー部があるのがわかると思います。Spineでは親子構造と関係なく、ここの順序をドラッグ操作で編集することによって、パーツの表示重ね合わせ順を変えることができます。
顎を顔より前に、胴体を手足より後ろに移動してみました。実に簡単です。
Flashでは、複雑な親子構造を作りこんでしまってからのパーツの深度移動は作業に苦痛を伴いそうです。とはいえ、通常そのような大幅な深度移動は作業の後半で発生しないのかもしれません。
アニメーション中にパーツの深度を変更でききるSpine
Spineではこのパーツの深度変更をアニメーションとして使うことができます。ANIMATEモードの任意のフレームで先ほどと同じようにDraw Orderを変更してみます。(Auto Key設定を使っていない場合は、深度変更後に青いDraw Orderアイコン横にある鍵のアイコンをクリックして、キーフレーム設定をします。）これだけでアニメーション途中での深度変更を実現することができます。
ここではジャンプしながら踊っているアニメーションに、回転の途中でボディの前と後ろに交互に移動する尻尾をつけ加えてみました。尻尾はわかりやすくするため、赤く配色してあります。
Flashではタイムライン上でパーツの深度移動をすることができません。なんとか実現するには、同じパーツをあらかじめ２つの深度に配置しておきvisibleを交互に切り替えるか、プログラムで制御するかの方法をとる必要があります。なかなか苦しいところです。
終わりに
完成したアニメーションは以下になります。深度変更アニメーションがきれいに書き出せたのがわかると思います。
動画 https://twitter.com/harayoki/status/654076009419960320
補足
※1 Flashにもボーンを使ったIK機能があります。（一度ツールから消滅しましたが、需要がありまた復活しました。）しかし、携帯向けのFlash liteでは利用できなかった事もあり、あまり一般的には使われていない機能でした。自分もほとんど使用したことがないので、SpineとFlashの比較の投稿に関してはIK機能を使わない通常の(クラシックトゥイーン)タイムラインアニメーションを対象にしています。
