Spineデモ

Spineは従来の2Dアニメーションの限界を超える機能を提供します。以下のデモはアーティスト、アニメーター、プログラマーがSpineにより提供されるワークフロー改善や機能を活用して素晴らしいゲームを製作する方法の一部をご紹介しています。

以下のデモは全て当社のWebGL用ランタイムspine-tsを使っています。ぜひ各デモのソースコードを参照して、デモの中でどのようにSpineランタイムが使用されているかご確認ください。

Spine対スプライトシート

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger

従来のスプライトアニメ―ションでは、アニメ―ションのフレームごとに画像が必要となるため、膨大な量のスプライトシートが必要でした。特にスムーズな再生が必要なフレームレートでは、アニメ―ションを追加するたびにゲームのディスク容量とメモリ要件が増大してしまうなどの弊害もありました。アーティストの仕事量が大幅に増え、容量制限のためにアニメ―ションの数が削減されなければならない場合、完成品の質が低下してしまうことに苦しめられていました。

Spineアニメ―ションはボーンとアニメーションのデータのみを保存し、アニメーションごとに再利用される個別の画像を1セットにまとめています。これらに独自のアニメ―ションをパッキングすることで生き生きとしたゲームを製作できます。またSpineアニメーションは補間されるため、フレームレートに関係なく、常に完璧にスムーズな再生が可能です。

Spineとスプライトシートアニメーションの必要なメモリとディスク容量を比較した結果がこちら。

再生速度
 

Spineとコマベースのアニメーション

Spineは従来のコマ送りのアニメーションをほぼ置き換えることができますが、必要に応じて画像を切り替えることもできます。例えば、胴の視点(向き)の変更、翼の羽ばたき、顔の表情の変更、銃口の火花などで利用できます。

コマ送りのアニメーションはSpineのスロット、アタッチメント、表示順序のメカニズムを通して完全に動的なSpineアニメーションに簡単に組み込むことができます。さらに、Spineはコマ送りの画像に対しても操作することができます。このデモでは、エイリアンの爆発する頭にスケーリング(拡大)をかけ合わせています。

トランジションとレイヤリング

Smooth
Abrupt

2Dゲームの不利な点として、アニメーションのトランジションがスムーズに変遷しないことが挙げられます。3Dゲームでは、アニメーション間のトランジションは実行時にその場で計算されます。例えば歩くアニメーションと走るアニメーションを半分ずつブレンドすることができます。Spineを使用しない2Dゲームではブレンドが不可能なため、トランジションがギクシャクして見えてしまいます。アーティストが全てのトランジションを作成することもできますが、アニメーションが再生中に中断される可能性がある場合はその方法では対応できません。

Spineは3D世界の利点を2Dにもたらします。Spineランタイムは1つのアニメ―ションから次のアニメ―ションへとスムーズかつ動的に変遷するため、キャラクターの動きに自然な流れを与えます。レイヤリングは1つのアニメ―ションの上に他のアニメ―ションをブレンドすることを可能にします。例えば、キャラクターが走ってる間に射撃するアニメーションを再生したり、走っているまたは歩いている間にダメージを受けるにつれて足を引きずるアニメーションをどんどんブレンドしていくことができます。

再生速度
 

メッシュ変形

硬い2D画像により作られたSpineキャラクターも、上のデモに見られるSpineboyのように優れた結果を生み出せます。しかしSpineはあなたのキャラクターをより生き生きさせるために、メッシュやウェイトなどの形で3D世界のトリックを持ち込むことが可能です。メッシュを利用することで画像は硬直せず、好きなように曲げたり変形したりすることができます。ウェイトはメッシュをボーンにアタッチさせるため、ボーンが移動すると画像も自動的に変形します。

メッシュはゲームの性能を改善し、画像の透明部分を描写しないことでフィルレートの使用を削減します。これはモバイルデバイスで特に重要です。

このデモの素晴らしいアートはHwadock(別名 dugy)のご厚意により提供されました。こちらで彼のTwitterブログをフォローできます。

ボーンの表示
三角形の表示

スキン

Spineのスキン機能は、作業量を抑えながらカスタマイズ性やバラエティを提供するために最適です。スキンを利用することでアニメーション制作の作業は1度だけで済み、アニメーションを再利用しながら、スケルトンに異なる外見を割り当てられます。Spineランタイムを使用して実行時に様々なスキンからのパーツを組み合わせることであらゆるカスタマイズのニーズを満たし、究極の柔軟性を実現します。

スキンは、アバターに新しい外見、衣服、武器、およびアクセサリーを与えることで、プレイヤーがゲームの世界に自分らしさを加えることができる機能です。また、スキンはアニメーションの使用用途を広げます。つま理、アートを組み合わせるだけの少ない労力で、敵、アイテム、その他のゲームオブジェクトのバラエティを大幅に増やすことができます。

このデモのアートはUnityのキャラクターパック2D Anim Heroesに収録されています。

ランダムなスキン

インバース・キネマティクス

Spineのインバース・キネマティクス(IK)は、他の方法ではアニメーションさせづらいリアルで動的な動きを実現します。また複雑なポーズを小数のボーンでコントロールする高度なリギングを可能にします。

Spineはベイク処理やプロット処理を使用しないため、IKはランタイムで真の効果を発揮します。IKコンストレイントは、ランタイムでボーンを動的に位置づけることで、敵を狙ったり、足を斜面や地面の穴などに追従させたりなど、環境に容易に反応することを可能にします。このデモでは、アニメーションを再生しながらも、ユーザーが制御できるホバーボードの上でSpineboyがバランスをとるようになっています。

赤い円をドラッグしてSpineboyに動的にポーズを取らせてみてください!射撃ボタンやジャンプボタン、「狙う」チェックボックスを使用すると、待機アニメーションの上に別のアニメーションを重ねることができます。

狙う
ボーンの表示

アニメーションの加算ブレンド

別々のトラックでアニメーションを再生する場合、通常、下のトラックのポーズは上のトラックによって上書きされます。加算トラックを使用すれば、そこで指定したポーズが下位トラックの結果に追加されます。これにより、happy 50%、mad 20%、excited 30%など、異なる表情を持つ複数の独立したアニメーションのポーズをブレンドすることが可能になります。

このデモのフクロウは各方向ごとに1つずつ、計4つのアニメーションを持っています。これらのアニメーションのそれぞれの独立したポーズが、キャンバスの中心に対するマウスカーソルの位置に応じてブレンドされています。

パス・コンストレイント

キャラクターのパーツを、開かれた、または繋がった道筋(パス)に沿ってたどらせたい場合があります。この動きのキーを手動で作成する代わりに、Spineのパス・コンストレイントを使用してボーンが自動的にパスをフォローするように設定できます。合成ベジエパスを相互に繋がった点のセットとして構成し、パスを曲げたり、形成したりすることが可能です。パス自体をアニメーションさせたり、ボーンにウェイト付けすることもできるので、パスはボーンが動いた際に自動的に変形させることができます。

このデモでは植物の蔓のメッシュが、パス・コンストレイントが適用されているボーンにバインドされています。メッシュの中に頂点が多ければ多いほど、スムーズなカーブを表現できます。

またパス・コンストレイントはランタイムでも大きな効果を発揮します。赤いハンドルを動かしてパスを動的に変更し、蔓がそれをシームレスにフォローする様をご覧ください!

ボーンとパスを表示

このデモのStretchymanに見られる通り、パス・コンストレイントは強力なリギングを有効にします。腕と足には多数の小さなボーンにメッシュをウェイト付けし、その後、四肢の単純なパスをフォローするよう制約しています。パスは、手足をコントロールするために動かすことができるボーンにウェイト付けされています。このセットアップにより多数のボーンを少数のボーンで制御することができます。これによりアニメーション作成が簡単になるだけではなく、ランタイムでも数本のボーンを調整するだけで動的なポーズを実現できるようになります。

赤いハンドルを動かしてStretchymanをダンスさせてみてください!

ボーンとパスを表示

クリッピング

Spineboyがポータルから出てくるこちらの例のように、アニメーションの一部を部分的に隠したい場合があります。クリッピングはこのようにレンダリングを1つのポリコン領域内だけに制限したい場合に便利な機能です。あらかじめ定義されたアニメーション可能な領域内のスケルトンパーツのみが表示されることで、窓、照明効果、その他のエフェクトなど、クリッピングがなければ実現不可能な演出を可能にします。またクリッピングをスケルトンの一部分のみに適用させることも可能です。例えば、X線を浴びるキャラクターのアニメーションも作成できます。

三角形の表示

トランスフォーム・コンストレイント

相互依存アイテムが多数ある複雑なスケルトンでのアニメーション制作は、煩雑になってしまいがちです。Spineのトランスフォーム・コンストレイントはもっと強力なリギングを利用することで、この苦痛を取り除きます。ボーンのトランスフォーム(変形)を他のボーンのトランスフォームに制約することで、1つのボーンをアニメーションさせるだけで他のボーンが自動的に調整されるようになります。表面上はシンプルな動きに見えますが、これを使用するとスケルトンがポーズした時の動きを自動化する高度なリギングができます。

トランスフォーム・コンストレイントはこのデモの戦車のような機械にも便利です。各ホイールに対して回転キーを作成する代わりに、1つのホイールだけをアニメーションさせ、他のホイールはトランスフォーム・コンストレイントを通して追従させています。オフセットやミキシングにより、制約されたパーツにも個別性を与えられます。

戦車のトレッド(キャタピラ)はパス・コンストレイントを使用して循環させていますが、これはパスなしではアニメーションさせられません。また、ホイールが上下に動くとパスが自動的に曲がるように、パスはホイールにウェイト付けされています。

ボーンとパスを表示

このデモでは、小さな2個のホイールの回転がトランスフォーム・コンストレイントで大きなホイールの回転に制約されています。また大きなホイールのトランスレーションは小さな2個のホイールの間にとどまるよう制約されています。

回転オフセット
 
トランスレーション・ミックス