Spineバージョン: 3.7+
タグ:

Essential、Professional、オーディオ、クリッピング、変形、メッシュ、ウェイト、トランスフォーム・コンストレイント、IKコンストレイント、境界ボックス

スパインボーイ

スパインボーイはメッシュIKトランスフォーム・コンストレイントおよびクリッピングなど、多くのSpine機能を紹介する複雑なプロジェクト例です。以下ではスケルトン設定を主に説明します。

臀部

臀部ボーンはスパインボーイの体のボーン階層のルートです。スパインボーイの脚はhip ボーンと同じ階層レベルにあるボーンをターゲットとするIKコンストレイントを使用します。このため、スパインボーイはIKターゲットボーンと独立して動くことができます。rootボーンをスパインボーイの臀部として使用する場合、臀部はIKターゲットボーンを動かさずに動かすことはできません。下のGIFは単純な設定によりこれを示しています。

左側ではスケルトンのルートボーンは臀部として使用されています。このルートボーンを動かすと、IKターゲットも動いてしまいます。右側では臀部ボーンは別のボーンであり、ルートボーンに装着されています。IKターゲットは兄弟です。臀部ボーンを動かしてもIKターゲットは動きません。

スパインボーイの脚はIKコンストレイントにより動かされます。これは上半身が動く間、2本の足を地面にしっかり固定する時によく使用されます。またIKは脚と足首の曲げを効率的にシミュレートする非常に良い方法です。

スパインボーイの前脚と後脚は同じように設定します。説明を簡潔にするために、今回は前脚のみ詳しく説明します。

2ボーンIKコンストレイント、front-leg-ikは脚のfront-thighfront-shinボーンをコントロールし、1ボーンIKコンストレイント、front-foot-ikfront-footボーンを動かします。これらの2つのIKコンストレイントがボーンに適用される順序が重要であることにご注意ください。まずfront-leg-ikコンストレイントを適用し、次にfront-foot-ikコンストレイントを適用します。コンストレイント適用順はツリービューConstraintノードの位置により定義されています。

各IKコンストレイントは制約されたボーンがそれぞれのターゲットボーンを確実に指すようにします。front-leg-ikコンストレイントはfront-leg-targetボーンをターゲットにし、front-foot-ikコンストレイントはfront-foot-targetをターゲットとします。

母指球が回転する時、足を曲げるには、front-foot-ikボーンをfront-leg-targetボーンの親にします。front-foot-ikが回転すると、front-leg-ikもトランスフォームします。front-foot-ikが回転すると、front-leg-ikもトランスフォームされます。

足の先端にはfront-foot-tipボーンがあります。このボーンはいかなるIKコンストレイントにも影響されません。親ボーンが回転する時、足が地面を通り抜けないように、front-foot-tipInherit Rotation(回転継承)が無効にされています。

ホバーボード

hoverboardアニメーションにみられる通り、スパインボードはホバーボードを装備しています。スパインボードがホバーボードから落下しないために、front-foot-board-transformrear-foot-board-transformという2つのトランスフォーム・コンストレイントが使用されています。説明を簡略にするためにここでは前足トランスフォーム・コンストレイントのみ説明しますが、後足トランスフォーム・コンストレイトは前足と同様に動作します。

front-foot-board-transformコンストレイトはスパインボーイの前足をIKコンストレイントでトランスフォームするfront-foot-targetボーンを制約します。トランスフォーム・コンストレイントはIKコンストレイントの後で適用されるため、IKコンストレイントの効果を無効にし、前足をコントロールします。前足は、マッチを使用して、トランスフォーム・コンストレイントのTranslateオフセットに適切な値を設定することでホバーボードに配置します。

front-foot-board-transformコンストレイントはhoverboard-controllerボーンをターゲットとします。hoverboard-controllerボーンは、rootボーンの子で、ホバーボードを動かすために使用されます。

トランスフォーム・コンストレイントのMix値はポーズ設定で0に設定されます。これはデフォルトによりトランスフォーム・コンストレイントが制約するボーン、この場合、front-foot-targetに影響を与えないことを意味します。

スパインボーイの前足をホバーボード上に配置し、ホバーボードをフォローさせるには、トランスフォーム・コンストレイントのTranslateコンポーネントのMixキーを100%に設定します。これはhoverboardアニメーションの開始時に行います。トランスフォーム・コンストレイントはIKコンストレイント後、100%ミックスで適用されるため、IKコンストレイントの影響はトランスフォーム・コンストレイントにより完全に無効にされます。これによりスパインボーイの前足は残りのアニメーション中、ホバーボードにしっかり装着されることになります。

このようなトランスフォーム・コンストレイントの使用により、スパインボーイのホバーボード上のアニメ化が簡単になります。ホバーボードのみをアニメ化し、足は自然な方法でホバーボードを自動的にフォローします。

このアニメ―ションでは、ホバーボードの先端のboard-ik-targetボーンを動かすことでホバーボードの角度を変更しています。1ボーンIKコンストレイント、board-ikを通してhoverboard-controllerをコントロールしています。

ホバーボードの位置が足の位置を定義するために、コンストレイント適用順が正しいことを確認する必要があります。まず、ホバーボードのトランスフォームを定義するboard-ik IKコンストレイントを適用します。その後、足をボード上に配置するfront-foot-board-transformコンストレイントを適用します。コンストレイントの適用順はツリービューのConstraints部分で定義できます。

狙う

スパインボーイが狙いを定めると銃を持っている腕はもちろん、胴体、頭、前腕も動きます。アニメーションプロセスを容易にするために、1本のボーンで全てをコントロールします。コントロールボーンをプログラミングで動かすことにより、スパインボーイがランタイム時に照準を合わせるようにします。これはもう1つのコンストレイントセットを使用することで実現できます。。

Animateモードで、aimアニメーションを有効にすると、エディター・ビューポートエリアにcrosshairと呼ばれるボーンが表示されます。下で見られる通り、スパインボーイはこのボーンを狙います。

このエフェクトにはaim-torso-ikと呼ばれる1ボーンIKコンストレイントを使用しています。このコンストレイントはhipを親とする小さなボーン、aim-constraint-targetを動かします。

このボーンは常に十字線(crosshair)を指し、3つのトランスフォーム・コンストレイント、aim-torso-transformaim-head-transform、およびaim-front-arm-transformに方向性を与えます。これらの3つのコンストレイントはaim-torso-ik IKコンストレイントの後に適用されます。

それぞれのトランスフォーム・コンストレイントは異なるOffset値を持ち、aimアニメーションで影響される全てのボーンの開始位置をコントロールします。

Mix値はcrosshairボーンを動かした時のコンストレイントの影響度を定義します。例えば、胴体の回転を防止するには、aim-torso-transformMix値を0に変更します。

スパインボーイの狙う動作にもっと自然な印象を与え、少々回転させるには、Mix値を42.3としてキーを作成することもできます。

狙うアニメーションをレイヤリングする

スパインボーイが狙いを定め、同時に走るにはaimアニメーションを他のアニメーションの上に重ねることができます。Previewビューを使用して複数アニメーションをレイヤリングするエフェクトを見ることができます。

SetupモードでPreviewビューを開き、Track 0を選択し、その後runアニメーションを選択します。次にTrack 1を選択し、aimアニメーションを選択します。低いトラックが最初に適用されるため、まずrunアニメーションが適用されます。次にaimアニメーションが適用されます。

Previewビューでアニメーションが実行される間、エディタービューポート内でcrosshairボーンを選択して動かします。Previewビューでスパインボーイが走りながら動く十字線(crosshair)に狙いを定めるところが表示されます。

ゲームやアニメーションでもSpineランタイムを使用して同じことができます。Spineランタイムを使用して、異なるトラックで複数のアニメーションをプログラミングで再生し、ボーンを操作し、Spineエディターと同様のコントロールを実行できます。

ポータル

スパインボーイのportalアニメーションはポータルエフェクトを達成するために、不均一なスケーリングとクリッピングを使用します。

ポータル設定

ポータルは深さを与えるために重ねられた複数イメージのセットから構成されます。

portal-bg.pngportal-shade.pngportal-streaks1.png、およびportal-streaks2.pngは全て円形のイメージで、上記のアニメーションに見られるような楕円形ではありません。楕円形に見えるのは、形状を保ちながらポータルがあたかもが回転しているようには表示できないためです。

ポータルの楕円形の回転を達成するには、portal-rootボーンに不均一なスケールを適用し、X軸上でポータルを潰します。その後、子ボーンであるportal-bgportal-shadeportal-streaks1、およびportal-streaks2に回転を適用します。

これらのフレアイメージは3フレームを使用する従来のコマ撮りアニメーションを構成します。コマ撮りアニメーションはアニメーション中、適切な時にそれぞれのアタッチメントを可視化するキーを作成することで作成し、スパインボーイがポータルを出るとき、火花が散るフレアで囲むように見せます。

クリッピング

スパインボーイがポータルから出るとき、ポータルの中の体の一部は見えません。この効果はクリッピング・アタッチメントで実行します。

クリッピング・アタッチメントのポリゴンはスパインボーイが可視化される部分を定義します。これ以外のスパインボーイの体はクリップされるため見えません。

クリッピング・アタッチメントにより影響されるスケルトン部分は、描画順の クリッピング・アタッチメントの位置とEnd slotプロパティにより定義されます。クリッピング・アタッチメント・スロットとEnd slotの間の描画順にあるスロットのアタッチメントはクリップされます。

スパインボーイがポータルを通り抜ける際のクリッピング・アタッチメントの効果を見るには、Animateモードでportalアニメーションを有効にし、ドーブシートのタイムラインをスクラブします。