ランタイムスキン
スキンはスケルトンがランタイムで使用するアタッチメントをコントロールするために使用されます。キーがスロットと名前であるとするとSkinはマップであり、値はアタッチメントです。名前はSpineエディターに定義されたスキンプレースホルダー名であり、アタッチメントの名前である必要はありません。これによりコードとアニメーションは特定のアタッチメントを参照することなく、スキンプレースホルダー名によりアタッチメントを設定できます。
例えば、スキンはキー、slot=head,name=head
とそのキーの値、attachment=fish-head
を持っているかもしれません。他のスキンは同じキー、slot=head,name=head
と値、attachment=donkey-head
を持つかもしれません。スキンは実際使用されるアタッチメントからコードとアニメ―ションを分離します。コードとアニメーションは「head」という名前を使用してアタッチメントを変更しますが、どのアタッチメントが頭に表示されるかはスケルトンの現在のスキンによります。
スケルトンデータにより定義される全てのアタッチメントはスキン内に配置されます。Spineエディターのスキン内にないアタッチメントは、ランタイムにdefault
という名前のスキンとして表示されますが、スキン内の名前はアタッチメントの名前と同じです。スケルトンのgetAttachment
が名前によりアタッチメントを探す必要がある時、まずスケルトンの現在のスキンを探します。アタッチメントが見つからない場合、SkeletonDataのデフォルトスキンの中を探します。
カスタマイゼーション
スケルトンはSpineエディターにより定義されるスキンにだけ制限されません。新しい空のスキンを実行時に作成し、アタッチメントとともに投入することができます。例えば、犬の頭または蛇の頭を持ち、羽根の翼または燃える翼を持つスケルトンがあるとします。もっと多くの特徴が追加される可能性がある中、スキンに頭と翼の全ての組み合わせを作成することは煩雑です。この代わりに希望する頭、翼、その他のアタッチメントを持つスキンをプログラムにより作成できます。
アタッチメントのグループ化
スキンの主な目的はデカップリング(分離)ですが、アタッチメントのグループ化にも便利です。最もよくあるのはスケルトン全体の外見を切り替えるためにスキンを使用するケースです。
また、スキンはアタッチメントのサブセットのグループ化にも使用されます。例えば、キャラクターに装備される「アイテム」が複数のアタッチメントにより構成されることがあります。例えば、シャツは胴体のアタッチメントと、両袖のアタッチメントから構成されるかもしれません。この場合、3つのシャツ用アタッチメントを含むスキンを作成することができます。
実行時にスケルトンが持てるのは1つのスキン(と予備としてSkeletonDataのdefault
スキン)のみです。しかしスキンをプログラムで作成し、他のスキンのアタッチメントをまとめることができます。このように複数「アイテム」のスキンを組み合わせてスケルトンを着飾らせることができます。
newSkin.addSkin(skeletonData.findSkin("shirt/pink"); // 2. 空のスキンにアイテムを追加
newSkin.addSkin(skeletonData.findSkin("pants/green");
newSkin.addSkin(skeletonData.findSkin("shoes/sneakers");
Spineエディターでは、スキンビューを使って複数のスキンを一度にプレビューすることができます。
スキンの変更
新しいスキンが設定された時にそのスケルトンにまだスキンが無い場合、セットアップポーズに表示されるスキン内の任意のアタッチメントがアタッチされます。
新しいスキンが設定された時にそのスケルトンがすでにスキンを持っていて、スロットに古いスキンから引き継いだアタッチメントがある場合、新しいスキンからのアタッチメントがアタッチされます。それ以外の場合は、アタッチメントの変更は行われません。
全てのアタッチメントがアクティブなスキンの設定を反映するようにするためには、アタッチメントに影響する全てのシステムに対し、スロットを設定し直すよう指示する必要があります。
skeleton.setSlotsToSetupPose(); // 2. セットアップポーズを使用して、ベースアタッチメントを設定
animationState.apply(skeleton); // 3. AnimationStateを使用して、現在の動きでアクティブなアタッチメントを設定
// 4. 手動で変更したアタッチメントを設定
animationState.apply
がそのフレームで呼び出される前にスキンが設定されている場合、 animationState.apply
の呼び出しを省略することができます。
他の動作をさせるには、スキン変更後、希望するアタッチメントを設定する必要があります。
アタッチメントの作成
ランタイムでのスキン作成と同様、アタッチメントをプログラムにより作成することができます。これはSpine内に多数のアタッチメントがあり、手動で作成することが煩雑な場合に便利です。
Spineではアタッチメントは親ボーンに関連して位置づけられます。アタッチメントをプログラムで作成する時、アタッチメントをどこに配置すべきかを知るために慣例が必要です。この主な問題は、画像が異なるサイズの時、異なるポジショニングが必要になることです。
これを解決するには、様々なアタッチメント用のアートを全て収容できるほど十分な空白を持つテンプレートイメージをスケルトンにアタッチします。アタッチメントイメージはテンプレートイメージから好きなだけ作成できますが、Spineのスケルトンに追加する必要はありません。行時に、テンプレート画像のアタッチメントをコピーし、テクスチャの領域を変更することができます。この方法であれば、どの画像も対応するテンプレート画像と同じサイズなので、同じ位置でボーンにアタッチされます。
その際、テンプレート画像でボーンの位置をマークしておくと、アート作成に便利です。また、アタッチメントの余分な空白は、テクスチャパッカーなどで除去することができます。