Spineデモ

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

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

Spine対スプライトシート

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

従来のスプライトアニメ―ションはアニメ―ションのひとコマひとコマに画像が必要となり、その結果、膨大な量のスプライトシートが必要となります。特にスムーズな再生が必要なフレームレートでは、アニメ―ションの追加によりゲームのディスク容量とメモリ要件が増大します。アーティストの仕事量が大幅に増え、容量制限のためにアニメ―ションの数が削減されなければならない場合、最終製品の質が低下します。

Spineアニメ―ションはボーン、アニメーションのデータ、および各アニメーションに再利用される個々の画像セットのみを保存します。これらに独自のアニメ―ションをパッキングすることで生き生きとしたゲームを製作できます。またSpineアニメーションは補間されるため、フレームレートに関わりなく再生は常に滑らかです。

Spineとスプライトシートのアニメーションのメモリとディスク容量要件を比較したものです。

アニメーションの速度
 

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

Spineは従来のコマ送りのアニメーションのほとんどを取り替えますが、必要に応じて画面を変更する必要があります。胴の視点の変更、羽根の羽ばたき、顔の表情の変更、銃口の火花などがその例です。

コマ送りのアニメーションはSpineのスロット、アタッチメント、表示順序メカニズムを通して完全に動的なSpineアニメーショに簡単に統合することができます。さらにSpineは爆発するエイリアンの頭のスケールを変更するこのデモに見られる通り、コマ送りの画像を操作することができます。

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

Smooth
Abrupt

2Dゲームの不利な点としてアニメーションのトランジッションがスムーズに変遷しないことが挙げられます。3Dゲームでは、アニメーション間のトランジッションはランタイムによりその場で計算されます。例えば半分歩いているアニメと半分走っているアニメをブレンドすることができます。Spineを使用しない2Dゲームではブレンドが不可能なため、トランジッションがギクシャクして見えます。アーティストが全てのトランジッションを手動で作成することはできますが、それでもアニメーションが再生中に中断されると効果が失われます。

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

アニメーションの速度
 

メッシュ変形

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

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

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

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

スキン

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

スキンはアバターに新しい外見、衣服、武器、およびアクセサリーを与えることで、ユーザーが自身のゲームに独自のタッチを追加することを可能にします。スキンはまたアニメーションの使用幅を広げます:アートを組み合わせるだけで、それほど苦労することなく敵、アイテム、その他のゲームオブジェクトのバラエティを大幅に増やすことができます。

このデモのアートは2DアニメヒーローUnityキャラクターパックで見つけることができます。

ランダムなスキン

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

Spineのインバース・キネマティクスはアニメ化しにくい動的な動きを現実的に表現します。また複雑なポーズを小数のボーンでコントロールする高度なリギングを可能にします。

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

お試しください!赤いサークルをドラッグしてSpineboyに動的にポーズを取らせてください。静止したアニメーションの上で射撃やジャンプボタンを使用して、チェックボックスレイヤーアニメーションを狙ってください。

狙う
ボーンの表示

Additive animation blending

When playing animations on separate tracks, normally the pose from lower tracks is overridden by higher tracks. With an additive track, its pose is added to the result of the lower tracks. This enables blending the poses from multiple independent animations with varying influences, such as different facial expressions like 50% happy, 20% mad, and 30% excited.

The owl in this demo has 4 animations, one for each direction. The independent poses of each of these animations are blended together depending on the mouse cursor's position relative to the center of the canvas.

パス・コンストレイント

しばしばキャラクターの一部は開いたパスや閉じたパスをフォローします。この動きのキーを手動で作成する代わりに、Spineのパス・コンストレイントを使用してボーンが自動的にパスをフォローするように設定できます。合成ベジエパスを相互に接続したポイントセットとして構成し、パスを曲げたり、形成したりすることが可能です。パス自体はアニメ化したり、ボーンにウェイトを付けることができます。このためパスはボーンが動くと自動的に変形します。

このデモではつるのメッシュがボーンに装着され、パスにより拘束されます。メッシュの中に頂点が多ければ多いほど、スムーズなカーブを表現できます。

またパス・コンストレイントはランタイム時に素晴らしいエフェクトとしても使用できます。赤いハンドルを動かしてパスを動的に変更し、つるがそれをシームレスにフォローする様をご覧ください!

ボーンとパスを表示

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

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

ボーンとパスを表示

クリッピング

Spineboyがポータルから出てくる例の通り、時折、アニメーションの一部を部分的に隠す必要があります。クリッピングはこのようにレンダリングを1つのポリコン領域に制限する場合便利です。アニメ化できる前定義された領域のスケルトン部分だけが表示され、窓、照明効果、その他のエフェクトなど、クリッピングがなければ実行不可能なエフェクトを可能にします。またクリッピングをスケルトンのサブセットのみに影響させることも可能です。例として、X線を浴びるキャラクターのアニメーションがあります。

三角形の表示

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

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

トランスフォーム・コンストレイントはこのデモのタンクのように機械に便利です。各ホイールの回転キーを作成する代わりに、単一のホイールをアニメ化し、他のホイールをトランスフォーム・コンストレイントを通してフォローさせます。オフセットやミキシングにより拘束されたパーツに個別性を与えられます。

タンクの足取りはパス・コンストレイントを使用して用意しますが、パーツのアニメ化がなければ実行できません。ホイールが上下に動くとパスが自動的に曲がるように、パスはホイールにウェイト付けされます。

ボーンとパスを表示

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

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