!!
# Spineboy
Spineboy(スパインボーイ)は[メッシュ](/spine-meshes)、[IK](/spine-ik-constraints)、 [トランスフォーム・コンストレイント](/spine-transform-constraints)、[クリッピング](/spine-clipping)など、様々なSpineの機能を紹介する複雑なサンプルプロジェクトです。以下では主にスケルトンのセットアップを説明します。
## 腰
`hip`ボーンはSpineboyの体のボーン階層の根本になっています。Spineboyの脚は`hip`ボーンと同じ階層にあるボーンをターゲットとするIKコンストレイントを使用しています。このため、SpineboyはIKターゲットボーンから独立して動くことができます。もし`root`ボーンをSpineboyの腰として使用してしまうと、IKターゲットボーンを動かさずに腰を動かすことができなくなってしまいます。下のGIFは単純なセットアップでこれを説明しています。
左側ではスケルトンのrootボーンを腰として使用しています。このrootボーンを動かすと、IKターゲットも動いてしまいます。右側では腰用のボーンはrootボーンの子になっている別ボーンになっており、IKターゲットは兄弟になっています。このようにすれば、腰ボーンを動かしてもIKターゲットは動きません。
## 脚
Spineboyの脚はIKコンストレイントにより制御されています。IKは、上半身が動く間も2本の足を地面にしっかり固定したい時によく使用されます。またIKは脚と足首の曲げを効率的にシミュレートするのに非常に適しています。
Spineboyの前面の脚と背面の脚は同じように設定します。説明を簡潔にするために、今回は前面の脚のみ詳しく説明します。
2つのボーンによるIKコンストレイント`front-leg-ik`は、脚の`front-thigh`と`front-shin`ボーンをコントロールし、1つのボーンによるIKコンストレイント`front-foot-ik`は、`front-foot`ボーンを動かします。注意していただきたいのは、これらの2つのIKコンストレイントがボーンに適用される順番が重要である点です。正しく動かすには、まず`front-leg-ik`コンストレイントを適用し、次に`front-foot-ik`コンストレイントを適用します。コンストレイントの適用順は[ツリービュー](/spine-tree)の`Constraint(コンストレイント)`ノードの[順番](/spine-constraints#順番)によって定義されています。
各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-tip`ボーンがあります。このボーンはいかなるIKコンストレイントにも影響されません。また、親ボーンが回転する時に足が地面をすり抜けないように、`front-foot-tip`の`Inherit Rotation(回転の継承)`が無効になっています。
## ホバーボード
`hoverboard`アニメーションにみられる通り、Spineboyはホバーボードを装備しています。Spineboyがホバーボードから落下しないようにするために`front-foot-board-transform`と`rear-foot-board-transform`という2つのトランスフォーム・コンストレイントが使用されています。説明を簡略にするためにここでは前面の足のトランスフォーム・コンストレイントのみ説明しますが、背面の足のトランスフォーム・コンストレイトも前面の足と同様に動作します。
`front-foot-board-transform`コンストレイトはSpineboyの前面の足をIKコンストレイントでトランスフォームする`front-foot-target`ボーンを制約します。トランスフォーム・コンストレイントはIKコンストレイントの後で適用されるため、IKコンストレイントの効果を上書きして、前面の足をコントロールします。前面の足は[Match(一致)](/spine-transform-constraints#一致)を使用して、トランスフォーム・コンストレイントの`Translate(トランスレート)`オフセットに適切な値を設定することでホバーボードに配置しています。
`front-foot-board-transform`コンストレイントは`hoverboard-controller`ボーンをターゲットとしています。`hoverboard-controller`ボーンは`root`ボーンの子で、ホバーボードを動かすために使用されます。
トランスフォーム・コンストレイントの`Mix(ミックス)`値はセットアップポーズでは`0`に設定されています。これはデフォルトではトランスフォーム・コンストレイントが制約するボーン、つまり`front-foot-target`に影響を与えないことを意味します。
Spineboyの前面の足をホバーボード上に配置してホバーボードを追従させるには、トランスフォーム・コンストレイントの`Translate(トランスレート)`の`Mix(ミックス)`キーを100％に設定します。これは`hoverboard`アニメーションの開始時に行っています。トランスフォーム・コンストレイントはIKコンストレイントの後で`100%`ミックスで適用されるため、IKコンストレイントの影響はトランスフォーム・コンストレイントにより完全に上書きされます。これによりSpineboyの前面の足は残りのアニメーション中、ホバーボードにしっかり固定されることになります。
トランスフォーム・コンストレイントをこのように使用することで、Spineboyがホバーボードに乗っている様子のアニメーションを作るのが簡単になります。ホバーボードのみをアニメーションさせても、足は自動的に自然な方法でホバーボードに追従します。
このアニメ―ションでは、ホバーボードの先端の`board-ik-target`ボーンを動かすことでホバーボードの角度を変更しています。1ボーンでのIKコンストレイント、`board-ik`を通して`hoverboard-controller`をコントロールしています。
ホバーボードの位置で足の位置を定義するために、コンストレイントの適用順が正しいことを確認する必要があります。まず、ホバーボードのトランスフォームを定義する`board-ik`コンストレイントを適用します。その後、足をボード上に配置する`front-foot-board-transform`コンストレイントを適用します。コンストレイントの適用順はツリービューの`Constraints(コンストレイント)`ノードで定義できます。
## 狙う
Spineboyが狙いを定めると、銃を持っている腕はもちろん、胴体、頭、前腕も動きます。これは、アニメーションプロセスを容易にするために、1本のボーンで全てをコントロールしています。コントロールボーンをプログラミングで動かすことにより、ランタイムでSpineboyに照準を合わせさせることも可能です。これはもう1つのコンストレイント設定を使用することで実現できます。
[`Animate(アニメ化)`モード](/spine-ui#設定%2Fアニメ化モード)で`aim`アニメーションを有効にすると、エディターのビューポートエリアに`crosshair`という名前のボーンが表示されます。Spineboyは以下の通りこのボーンを狙います。
この効果には`aim-torso-ik`と呼ばれる1ボーンでのIKコンストレイントを使用しています。このコンストレイントは`hip`を親とする小さなボーン、`aim-constraint-target`を動かします。
このボーンは常に十字線（crosshair）を指し、3つのトランスフォーム・コンストレイント、`aim-torso-transform`、`aim-head-transform`、`aim-front-arm-transform`に方向を与えます。これらの3つのコンストレイントは`aim-torso-ik`IKコンストレイントの後に適用されています。
それぞれのトランスフォーム・コンストレイントは異なる`Offset(オフセット)`値を持ち、`aim`アニメーションで影響される全てのボーンの初期位置をコントロールします。
`Mix(ミックス)`値は`crosshair`ボーンを動かす時のコンストレイントの影響度を定義します。例えば、胴体の回転を防止するには、`aim-torso-transform`の`Mix(ミックス)`値を`0`に変更します。
Spineboyの狙う動作にもっと自然な印象を与え、少々回転させるには、`Mix(ミックス)`値を`42.3`としてキーを作成することもできます。
### 狙うアニメーションをレイヤリングする
`aim`アニメーションを他のアニメーションに重ねることで、例えばSpineboyが走りながら狙いを定められるようになります。複数のアニメーションを重ねたときの効果を確認するには、`Preview(プレビュー)`ビューを使用します。
`Setup(設定)`モードで[`プレビュー`ビュー](/spine-preview)を開き、`Track` `0`を選択し、その後`run`アニメーションを選択します。次に`Track` `1`を選択し、`aim`アニメーションを選択します。すると、番号が小さいトラックが最初に適用されるため、まず`run`アニメーションが適用され、次に`aim`アニメーションが適用されます。
`プレビュー`ビューでアニメーションが実行される間、エディターのビューポート内で`crosshair`ボーンを選択して動かしてみてください。すると`プレビュー`ビューでSpineboyが走りながら動く十字線（crosshair）に狙いを定めるところが表示されると思います。
これはゲームやアプリケーションでも[Spineランタイム](/spine-runtimes)を使用して同じことができます。Spineランタイムを使用して、異なるトラックで複数のアニメーションをプログラミングで再生し、ボーンを操作し、Spineエディターと同様のコントロールを実行できます。
## ポータル
Spineboyの`portal`アニメーションはポータルエフェクトを実現するために、不均一なスケーリングとクリッピングを使用しています。
### ポータルのセットアップ
ポータルは奥行きを与えるために重ねられた複数の画像のセットから構成されています。
`portal-bg.png`、`portal-shade.png`、`portal-streaks1.png`、`portal-streaks2.png`は全て円形のイメージで、上のアニメーションに見られるような楕円形ではありません。これは、最初から楕円形になっている画像を使うと、形状を保ったままポータルが回転しているように見せることができないためです。
ポータルの楕円形の回転を実現するには`portal-root`ボーンに不均一なスケールを適用し、X軸方向でポータルを縮小します。その後、子ボーンである`portal-bg`、`portal-shade`、`portal-streaks1`、`portal-streaks2`に回転を適用します。
これらのフレアイメージは3フレームを使用するフレーム・バイ・フレームアニメーションを構成します。このフレーム・バイ・フレームアニメーションは、アニメーション中の適切なタイミングでそれぞれのアタッチメントを表示するキーを作成することで作成し、Spineboyがポータルを出るときに光るフレアで囲むように見せます。
### クリッピング
Spineboyがポータルから出るとき、ポータルの中の体の一部は見えなくなっています。この効果はクリッピング・アタッチメントによって実現しています。
クリッピング・アタッチメントのポリゴンはSpineboyが表示される範囲を定義します。この範囲外のSpineboyの体はクリップされるため見えなくなります。
スケルトンのどのパーツがクリッピング・アタッチメントにより影響されるかは[表示順序](/spine-slots#表示順序)のクリッピング・アタッチメントの位置と`End slot(エンドスロット)`プロパティにより定義されます。クリッピング・アタッチメントのスロットと`End slot(エンドスロット)`の間の表示順にあるスロットのアタッチメントがクリップされます。
Spineboyがポータルを通り抜ける際のクリッピング・アタッチメントの効果を確認するには、`Animate(アニメ化)`モードで`portal`アニメーションを有効にし、ドーブシートのタイムラインをスクラブして(動かして)みてください。
