スキン

スキンを使用すると、スケルトンのアニメーションを異なるアタッチメント設定で再利用することができます。スキンは、単純に衣装を切り替えるだけでなく、さまざまなパーツを組み合わせてキャラクター全体を組み立てることもできます。

スキンはアタッチメント、ボーン、コンストレイントで構成され、スキンが表示されているときにのみ有効になります。スケルトンは、スキンビューを使って一度に複数のスキンを表示することができます。

スキンの鍵となるのは「スキンプレースホルダー」で、これは他のアタッチメントと同様にツリーのスロットの下に置かれるアタッチメントです。しかし、これは実際に使用されるアタッチメントの保管場所に過ぎず、現在表示されているスキンから得られるものです。

アニメーションでは、スロットアタッチメントをキーにすることで、アタッチメントと同じようにスキンプレースホルダーを表示・非表示にすることができます。こうすることで、アニメーションは特定のアタッチメントの表示・非表示に縛られなくなります。その代わり、アニメーションはスキンプレースホルダーを表示・非表示し、どのスキンが表示されているかによって、どのアタッチメントが実際に表示されるかが決まるので、どのスキンでもそのアニメーションを使うことができます。

使用例については、スキンのデモ、プロジェクト例、Tipsをご覧ください。

セットアップ

スキンをセットアップするには、スキンとスキンプレースホルダーを作成し、スキンプレースホルダーにそのスキン用のアタッチメントを配置します。スキンにはボーンやコンストレイントを追加することもできます。

スキンを作成するには、ツリーのSkins(スキン)ノードを選択し、New...(新規...) Skin(スキン)をクリックします。

スキンプレースホルダー

スキンプレースホルダーは、ツリー上のボーン、スロット、アタッチメントのいずれかを選択し、New...(新規...) Skin Placeholder(スキンプレースホルダー)をクリックして作成します。アタッチメントを選択した場合は、スケルトンのスキンがアクティブになっていないと、この選択肢が無効になります。

選択中のアタッチメント

新しいスキンプレースホルダーの作成時にアタッチメントが選択されている場合、そのアタッチメントは新しいスキンプレースホルダーの下のアクティブなスキンに移動します。ただし、最初にオプションを示すダイアログが表示されます。オプションの中には、メッシュアタッチメントやキーが設定されているアタッチメントにしか表示されないものもあります。

• Duplicate attachments for each skin(各スキン用にアタッチメントを複製): すべてのスキンに対してそのアタッチメントを複製します。これは、ほとんどのスキンまたはすべてのスキンに同じアタッチメントを追加したい場合に便利です。
• Linked meshes(リンクメッシュ): メッシュを複製するのではなく、他のスキンにリンクメッシュが作成されます。
  • Inherit deform(変形を継承): リンクメッシュに、ソースメッシュの変形キーを共有します。
• Duplicate keys(キーを複製): 複製されたアタッチメントの各アニメーションのキーも複製されます。
• Rename attachments(アタッチメントの名前を変更): 複製された各アタッチメントに、スキンの名前を前置します。例えば、redスキンの場合、headはred/headになります。これは、各スキンの画像がサブフォルダーに格納されている場合に便利です。

プロパティ

エクスポート

Export(エクスポート)がチェックされていない場合、そのスキンはエクスポートされなくなります。つまり、スキンとそのアタッチメントは、エクスポートされたJSONやバイナリには含まれず、静止画やビデオのエクスポートにも表示されません。

メッシュアタッチメントがエクスポートされない場合、そのリンクメッシュもエクスポートされなくなります。

また、アニメーション中でキーが設定されているアタッチメントがエクスポートされない場合、そのキーもエクスポートされません。

カラー

スキンのカラーを変更することで、ツリー内のスキンを区別し、識別を容易にすることができます。スキンのカラーはランタイムには影響せず、Spineエディター上での見た目にのみ使用されます。

スキンに追加

Add to Skin(スキンに追加)ボタンをクリックすると、スキンボーンやスキンコンストレイントをスキンに追加するためのモードになります。このモードは、Add to Skin(スキンに追加)ボタンを再度クリックするか、スペースバーかエスケープキーを押すことでいつでも終了することができます。

フォルダ

スキンはフォルダにまとめることができます。フォルダを作成するには、スキンを選択してNew...(新規...) Folder(フォルダ)をクリックします。スキンはドラッグしてフォルダ間を移動できます。

エクスポートされたスケルトンデータでは、スキン名の前にフォルダ名が付けられ、Spineランタイムで使用される最終的な名前になります。例えば、フォルダhairの中にサブフォルダlongがあり、そのサブフォルダの中にスキンbrownがある場合、ランタイムでのスキン名はhair/long/brownとなります。

アクティブなスキン

ツリー内の各スキンの隣にあるドットは、どのスキンが「アクティブ」であるかを制御します。

ツリー内のスキンプレースホルダーには、現在アクティブなスキンのアタッチメントが表示されます。

アクティブなスキンは編集中のスキンであり、常に1つのスキンだけがアクティブになります。また、アクティブなスキンは常に表示されます。

スキンビューによって複数のスキンを固定して同時に表示することはできますが、同時にアクティブにできるのは必ず1つのスキンだけです。スキンビューでスキンを選択すると、それがアクティブなスキンになります。

スキンアタッチメント

1つのスキンでは、スキンプレースホルダーごとに1つのアタッチメント(または何も無い状態)を設定できます。スキンプレースホルダーのアタッチメントをアクティブなスキンに設定するには、まず対象のスキンがアクティブであることを確認してから、スキンプレースホルダーにアタッチメントをドラッグするか、Set Parent(親設定)を使用します。その際、アクティブなスキンが先にそのスキンプレースホルダーに対して持っていたアタッチメントはすべて削除されます。

もしアタッチメントがスキンプレースホルダーに対してではなく、スキンプレースホルダーの下にある既存のアタッチメントに対してドラッグされた場合、既存のアタッチメントのトランスフォームが新しいアタッチメントにコピーされます。

スキンプレースホルダー内のアタッチメントをクリアするには、削除するか、別の場所にドラッグします。

ドープシートおよびグラフ内のスキンアタッチメントのプロパティ行は、ツリービューの設定によっては表示されない場合があります。

スキンボーン

ボーンは、1つまたは複数のスキンに追加することができ、ボーンが入っているスキンがアクティブな場合のみ、ボーンがアクティブになります。これにより、スケルトンは、特定のスキンでのみ使用されるボーンを持つことができます。なお、アクティブでないボーンは、ランタイムのパフォーマンスに影響を与えません。

ボーンをアクティブなスキンに追加するには、ボーンを選択して、ツリーのプロパティでAdd to skin(スキンに追加)をクリックします。また、ボーンをツリー内でドラッグして、スキンにドロップすることもできます。あるいは、スキンを選択してツリーのプロパティでAdd to skin(スキンに追加)をクリックし、任意の数のボーンやコンストレイントをクリックすると、それらすべてをスキンに追加できます。

ボーンが他のスキンにあるアタッチメントのウェイトやコンストレイントで必要とされる場合、ボーンは自動的にそれらの他のスキンに追加されます。これが発生すると、変更内容の詳細を記載したspine.logを開くためのボタンとともにメッセージが表示されます。変更はアンドゥ(元に戻す)を使って戻すことができますが、警告が表示されます。

スキンボーンには、ツリー上のボーンの右側にスキンのアイコンが表示されます。これをクリックすると、適用されているすべてのスキンの下でそのボーンが選択されます。これにより、スキンを探したり、すべてのスキンからボーンを除外するのを簡単に行えます。

スキンからボーンを除外するには、ツリーで適用されているスキンの下にあるボーンを選択し、除外ボタン（通常は削除ボタンがある場所）をクリックします。

ドープシートおよびグラフ内のスキンボーンのボーン行は、 ツリービューの設定によっては表示されない場合があります。

スキンコンストレイント

コンストレイントは、1つまたは複数のスキンに追加することができ、コンストレイントが入っているスキンがアクティブな場合のみ、そのコンストレイントがアクティブになります。これにより、スケルトンは、特定のスキンでのみ使用されるコンストレイントを持つことができます。なお、アクティブでないコンストレイントは、ランタイムのパフォーマンスに影響を与えません。

コンストレイントをアクティブなスキンに追加するには、コンストレイントを選択して、ツリーのプロパティでAdd to skin(スキンに追加)をクリックします。また、コンストレイントをツリー内でドラッグして、スキンにドロップすることもできます。あるいは、スキンを選択してツリーのプロパティでAdd to skin(スキンに追加)をクリックし、任意の数のコンストレイントかボーンをクリックすると、それらすべてをスキンに追加できます。

スキンからコンストレイントを除外するには、ツリーでスキンの下のコンストレイントを選択し、除外ボタン（通常は削除ボタンがある場所）をクリックします。

コンストレイントされたボーン

コンストレイントされたボーンとは、コンストレイントにより制約されるボーンです。コンストレイントされたボーンの一部がスキンの中にあってアクティブでない場合、コンストレイント自体はまだ機能しますが、非アクティブなボーンは制約されません。

すべてのコンストレイントされたボーンがスキンの中にある場合、コンストレイントもそれらのスキンの中にあるべきです。そのため、コンストレイントが、少なくともそれらの内1つのスキンに追加されるまでは警告が表示されます。

スキンコンストレイントの使用例

スキンはコンストレイントを使用してボーンを移動できるので、スケルトンとそのすべてのアニメーションを異なるプロポーションのキャラクターに再利用することができます。詳しくは、異なるプロポーションのためのスキンコンストレイントをご覧ください。

警告

スキンが誤って設定されていると、ツリー上のボーン、アタッチメント、コンストレイントのアイコンに警告が表示されます。

これは、スケルトンの様々なパーツが他のパーツに依存しているために起こります。一部のパーツがスキンに追加されていて、そのスキンが表示されていない場合、それらのパーツは利用できません。これにより、ボーンのトランスフォームが無効になったり、アタッチメントがレンダリングされなかったり、コンストレイントが適用されなかったりします。

ボーンの警告

ボーンが親ボーンと同じスキンに入っていない場合、ボーンのツリーアイコンに警告が表示されます。これが発生すると、そのボーンと各種アタッチメントがビューポートに表示されなくなります。

親ボーンがアクティブでない場合、子孫ボーンのトランスフォームは無効になります。そのため、ウェイトを使用しているアタッチメントなど、子ボーンのトランスフォームに依存しているものも無効になります。

ボーンの警告を修正するには、子ボーンをその親ボーンと同じスキンに追加してください。

Hide viewport skin bones(ビューポートのスキンボーンを非表示)がチェックされていない場合、どのスキンが表示されているかにかかわらず、すべてのボーンがアクティブになります。ランタイムで正しく描画されないボーンの警告は、この設定がチェックされていない場合、正しく表示されることがあります。

アタッチメントの警告

以下の場合、アタッチメントのツリーアイコンに警告が表示されます:

• アタッチメントが、ボーンの警告が表示されているボーンのウェイトを持っている場合、または
• アタッチメントが何かしらのスキンの中にあり、スキンの中にあるボーンのウェイトを持っているが、そのアタッチメントのスキンと一致していない場合

アクティブではないボーンにウェイト付けされた頂点は無効になり、ワールド座標0,0に設定されます。例えば、メッシュの無効な頂点はワールド座標0,0に表示されてしまいます。すべての頂点が無効な場合、メッシュ全体がワールド座標0,0になり、まったく見えなくなってしまいます。

アタッチメントの警告を修正するには、まず、アタッチメントのウェイトで使用されているボーンの警告を修正してください。そして、もしアタッチメントが何かしらのスキンの中にあり、それらのボーンがスキンの中にもある場合は、そのアタッチメントのスキンにそのスキンボーンを追加してください。

コンストレイントの警告

以下の場合、コンストレイントのツリーアイコンに警告が表示されます:

• コンストレイントのターゲットボーンがスキンの中にあるが、そのコンストレイント自体がそのスキンに入っていない場合、または
• コンストレイントで制約されたボーンのすべてがスキンの中にあるが、コンストレイント自体がそれらのスキンのいずれにも入っていない場合

コンストレイントに警告が出ている場合は、どのスキンが表示されているかに応じて、全く適用できないか、時々しか適用できないことを意味します。

コンストレイントの警告を修正するには、ターゲットボーンと同じスキンにコンストレイントを追加してください。そして、コンストレイントされたボーンのすべてがスキンにある場合、コンストレイントが少なくともその中のスキンの1つに入っていることを確認してください。

スキンの複製

スキンを複製すると、より多くのオプションを提供するダイアログが表示されます。オプションの中には、メッシュアタッチメントやキーを持っているアタッチメントの場合にのみ表示されるものもあります。

• Linked meshes(リンクメッシュ): 新しいスキンにメッシュそのものを複製するのではなく、リンクメッシュを作成します。
  • Inherit deform(変形を継承）: リンクメッシュに、ソースメッシュの変形キーを共有します。
• Duplicate keys(キーを複製): 複製される各アタッチメントについて、各アニメーションのキーも複製します。
• Rename attachments(アタッチメントの名前を変更): 複製される各アタッチメントの前に、スキンの名前を付けます。例えば、redというスキンの場合は、headはred/headとなります。これは、各スキンの画像をサブフォルダーに格納している場合に便利です。

スキンのワークフロー

スキンは便利で、その活用方法もさまざまです。スキンを使用する際には、適切なワークフローを使用することで、膨大な時間を節約できることを覚えておいてください。

最初のスキン

すべてのアタッチメントがスキンプレースホルダーを使用せずに作成されている場合、スキンプレースホルダーを作成して既存のアタッチメントを1つずつ移動するのは面倒です。この作業を効率的に行うには、まずツリーフィルターを使ってボーンとスロットを非表示にし、アタッチメントだけを表示します。これにより、多くのアタッチメントを簡単に選択することができます。次に、スキンを作成するか、既存のスキンがアクティブになっていることを確認し、アタッチメントを選択してNew...(新規...) Skin Placeholder(スキンプレースホルダー)を選択します。これにより、同じ名前のアタッチメントごとにスキンプレースホルダーが作成され、各アタッチメントがアクティブなスキンのスキンプレースホルダーの下に移動します。

必要に応じて、検索と置換を使ってアタッチメントの名前を修正することができます。例えば、skinName/imageNameのように、スキン名をサブフォルダのプレフィックス(接頭辞)として追加することができます。

類似したスキン

新しいスキンが既存のスキンと類似している場合、既存のスキンを複製し、そのアタッチメントもすべて複製してから、新しいスキンを修正すると効率的です。

画像やアタッチメントを新しいスキンプレースホルダーにドラッグする際、既存のアタッチメントに対してドロップするとそのトランスフォームがコピーされますが、スキンプレースホルダー自体に対してドロップした場合はコピーされません。

検索と置換を使うと、新しいスキンのすべてのアタッチメント名をすばやく変更できます。画像のサイズが同じで、命名規則（例: skinName/imageNameなど)を使用している場合は、検索と置換を行うだけで、新しいスキンを完全にセットアップすることができます。

プログラムによるスキン

もし検索と置換を使って大量のスキンを作成している場合は、別の解決策を利用した方が良いでしょう。シンプルなパターンや命名規則を使って派生させることができれば、Spineプロジェクト内のすべてのものをいちいち作成する必要はありません。

スキンの違いがアタッチメント名だけの場合は、プログラマーと協力してランタイムによる解決策を講じてください。1つのアプローチとしては、Spineエディターで1つのスキンだけを作成することです。そして、ランタイムでスキンを複製し、必要に応じて名前を変更するコードを書きます。

スキンプレースホルダーの削除

スキンプレースホルダーが不要になった際、中のアタッチメントをスロットに移動させ、スキンプレースホルダーをそれぞれ削除するのは面倒です。代わりに、スキンプレースホルダーを選択し、ツリーのプロパティで削除をクリックしてください。削除ダイアログでKeep current attachment(現在のアタッチメントを維持する)にチェックを入れます。これにより、アクティブなスキンのアタッチメントをスロットに移動させてから、スキンプレースホルダーを削除できます。ただし他スキンのアタッチメントは削除されます。

Mix-and-match

単純なプロジェクトでは、スキンを使用することで、各スキンがスケルトン全体に対応します。より複雑なプロジェクトでは、スキンを使用してアタッチメントをグループ化し、各スキンを個別のアイテムやボディの一部とし、複数のスキンを一度に表示してスケルトンに装着することができます。当社のmix-and-matchのサンプルプロジェクトでは、このアプローチを採用しています。

Spineエディターでは、スキンビューを使用すれば、複数のスキンを同時に表示することができます。ランタイムでは、1つスキンを作成して、そこに複数のスキンを追加します。

ビデオ

次: コンストレイント 前: パス・アタッチメント