# スキン
スキンを使用すると、スケルトンのアニメーションを異なるアタッチメント設定で再利用することができます。スキンは、単純に衣装を切り替えるだけでなく、さまざまなパーツを組み合わせてキャラクター全体を組み立てることもできます。
スキンは[アタッチメント](/spine-attachments)、[ボーン](/spine-bones)、[コンストレイント](/spine-constraints)で構成され、スキンが表示されているときにのみ有効になります。スケルトンは、[スキンビュー](/spine-skins-view)を使って一度に複数のスキンを表示することができます。
スキンの鍵となるのは「スキンプレースホルダー」で、これは他のアタッチメントと同様にツリーのスロットの下に置かれるアタッチメントです。しかし、これは実際に使用されるアタッチメントの保管場所に過ぎず、現在表示されているスキンから得られるものです。
アニメーションでは、[スロットアタッチメント](/spine-keys#スロットアタッチメント)をキーにすることで、アタッチメントと同じようにスキンプレースホルダーを表示・非表示にすることができます。こうすることで、アニメーションは特定のアタッチメントの表示・非表示に縛られなくなります。その代わり、アニメーションはスキンプレースホルダーを表示・非表示し、どのスキンが表示されているかによって、どのアタッチメントが実際に表示されるかが決まるので、どのスキンでもそのアニメーションを使うことができます。
使用例については、スキンの[デモ](/spine-demos#Skins)、[プロジェクト例](/spine-examples#Skins)、[Tips](/spine-tips#Skins)をご覧ください。
# セットアップ
スキンをセットアップするには、スキンとスキンプレースホルダーを作成し、スキンプレースホルダーにそのスキン用のアタッチメントを配置します。スキンにはボーンやコンストレイントを追加することもできます。
スキンを作成するには、ツリーの`Skins(スキン)`ノードを選択し、`New...(新規...)` `Skin(スキン)`をクリックします。
## スキンプレースホルダー
スキンプレースホルダーに名前を付ける際、どのスキンのためのものかを表す必要はありません。その代わりに、そのアタッチメントが表すものに合わせて名前を付けた方が良いでしょう。
例えば、`red`と`blue`というスキンがある場合、頭のスキンプレースホルダーの名前は`red head`や`blue head`ではなく、`head`と名付けるのが良いでしょう。
スキンプレースホルダーは、ツリー上のボーン、スロット、アタッチメントのいずれかを選択し、`New...(新規...)` `Skin Placeholder(スキンプレースホルダー)`をクリックして作成します。アタッチメントを選択した場合は、スケルトンのスキンが[アクティブ](#アクティブなスキン)になっていないと、この選択肢が無効になります。
### 選択中のアタッチメント
新しいスキンプレースホルダーを作成する前に、複数のアタッチメントを選択することができます。その際、スキンプレースホルダーはそれぞれのアタッチメントに対して作成されます。
新しいスキンプレースホルダーの作成時にアタッチメントが選択されている場合、そのアタッチメントは新しいスキンプレースホルダーの下の[アクティブなスキン](#アクティブなスキン)に移動します。ただし、最初にオプションを示すダイアログが表示されます。オプションの中には、メッシュアタッチメントやキーが設定されているアタッチメントにしか表示されないものもあります。
* `Duplicate attachments for each skin(各スキン用にアタッチメントを複製)`: すべてのスキンに対してそのアタッチメントを複製します。これは、ほとんどのスキンまたはすべてのスキンに同じアタッチメントを追加したい場合に便利です。
* `Linked meshes(リンクメッシュ)`: メッシュを複製するのではなく、他のスキンに[リンクメッシュ](/spine-meshes#リンクメッシュ)が作成されます。
* `Inherit deform(変形を継承)`: リンクメッシュに、ソースメッシュの変形キーを共有します。
* `Duplicate keys(キーを複製)`: 複製されたアタッチメントの各アニメーションのキーも複製されます。
* `Rename attachments(アタッチメントの名前を変更)`: 複製された各アタッチメントに、スキンの名前を前置します。例えば、`red`スキンの場合、`head`は`red/head`になります。これは、各スキンの画像がサブフォルダーに格納されている場合に便利です。
# プロパティ
## エクスポート
`Export(エクスポート)`がチェックされていない場合、そのスキンはエクスポートされなくなります。つまり、スキンとそのアタッチメントは、エクスポートされたJSONやバイナリには含まれず、静止画やビデオのエクスポートにも表示されません。
メッシュアタッチメントがエクスポートされない場合、その[リンクメッシュ](/spine-meshes#リンクメッシュ)もエクスポートされなくなります。
また、アニメーション中でキーが設定されているアタッチメントがエクスポートされない場合、そのキーもエクスポートされません。
## カラー
スキンのカラーを変更することで、ツリー内のスキンを区別し、識別を容易にすることができます。スキンのカラーはランタイムには影響せず、Spineエディター上での見た目にのみ使用されます。
## スキンに追加
`Add to Skin(スキンに追加)`ボタンをクリックすると、[スキンボーン](#スキンボーン)や[スキンコンストレイント](#スキンコンストレイント)をスキンに追加するためのモードになります。このモードは、`Add to Skin(スキンに追加)`ボタンを再度クリックするか、`スペースバー`か`エスケープキー`を押すことでいつでも終了することができます。
## フォルダ
スキンはフォルダにまとめることができます。フォルダを作成するには、スキンを選択して`New...(新規...)` `Folder(フォルダ)`をクリックします。スキンはドラッグしてフォルダ間を移動できます。
エクスポートされたスケルトンデータでは、スキン名の前にフォルダ名が付けられ、Spineランタイムで使用される最終的な名前になります。例えば、フォルダ`hair`の中にサブフォルダ`long`があり、そのサブフォルダの中にスキン`brown`がある場合、ランタイムでのスキン名は`hair/long/brown`となります。
# アクティブなスキン
ツリー内の各スキンの隣にあるドットは、どのスキンが「アクティブ」であるかを制御します。
ツリー内のスキンプレースホルダーには、現在アクティブなスキンのアタッチメントが表示されます。
アクティブなスキンは編集中のスキンであり、常に1つのスキンだけがアクティブになります。また、アクティブなスキンは常に表示されます。
[スキンビュー](/spine-skins-view)によって複数のスキンを固定して同時に表示することはできますが、同時にアクティブにできるのは必ず1つのスキンだけです。スキンビューでスキンを選択すると、それがアクティブなスキンになります。
# スキンアタッチメント
[Show all skin attachments(すべてのスキンアタッチメントを表示)](/spine-tree#すべてのスキンアタッチメントを表示)で、すべてのスキンのアタッチメントを一度に表示できます。
1つのスキンでは、スキンプレースホルダーごとに1つの[アタッチメント](/spine-attachments)(または何も無い状態)を設定できます。スキンプレースホルダーのアタッチメントをアクティブなスキンに設定するには、まず対象のスキンが[アクティブ](#アクティブなスキン)であることを確認してから、スキンプレースホルダーにアタッチメントをドラッグするか、[Set Parent(親設定)](/spine-attachments#親設定)を使用します。その際、アクティブなスキンが先にそのスキンプレースホルダーに対して持っていたアタッチメントはすべて削除されます。
もしアタッチメントがスキンプレースホルダーに対してではなく、スキンプレースホルダーの下にある既存のアタッチメントに対してドラッグされた場合、既存のアタッチメントのトランスフォームが新しいアタッチメントにコピーされます。
スキンプレースホルダー内のアタッチメントをクリアするには、削除するか、別の場所にドラッグします。
[ドープシート](/spine-dopesheet#表示状態)および[グラフ](/spine-graph#表示状態)内のスキンアタッチメントのプロパティ行は、[ツリービューの設定](/spine-tree#ビュー設定)によっては表示されない場合があります。
# スキンボーン
[Hide skin bones and constraints(スキンボーンとコンストレイントを非表示)](/spine-tree#スキンボーンとコンストレイントを非表示)でツリー内の非アクティブなスキンボーンを非表示にできます。
[Hide viewport skin bones(ビューポートのスキンボーンを非表示)](/spine-tree#ビューポートのスキンボーンを非表示)は、ビューポート内の非アクティブなスキンボーンを非表示にします。このチェックを外すと、スキンに関係なくすべてのボーンがアクティブになりますので、通常はチェックしてください。
[ボーン](/spine-bones)は、1つまたは複数のスキンに追加することができ、ボーンが入っているスキンがアクティブな場合のみ、ボーンがアクティブになります。これにより、スケルトンは、特定のスキンでのみ使用されるボーンを持つことができます。なお、アクティブでないボーンは、ランタイムのパフォーマンスに影響を与えません。
ボーンを[アクティブなスキン](#アクティブなスキン)に追加するには、ボーンを選択して、ツリーのプロパティで`Add to skin(スキンに追加)`をクリックします。また、ボーンをツリー内でドラッグして、スキンにドロップすることもできます。あるいは、スキンを選択してツリーのプロパティで`Add to skin(スキンに追加)`をクリックし、任意の数のボーンやコンストレイントをクリックすると、それらすべてをスキンに追加できます。
ボーンが他のスキンにあるアタッチメントのウェイトやコンストレイントで必要とされる場合、ボーンは自動的にそれらの他のスキンに追加されます。これが発生すると、変更内容の詳細を記載した[spine.log](/spine-troubleshooting#spine.log)を開くためのボタンとともにメッセージが表示されます。変更はアンドゥ(元に戻す)を使って戻すことができますが、[警告](#警告)が表示されます。
スキンボーンには、ツリー上のボーンの右側にスキンのアイコンが表示されます。これをクリックすると、適用されているすべてのスキンの下でそのボーンが選択されます。これにより、スキンを探したり、すべてのスキンからボーンを除外するのを簡単に行えます。
スキンからボーンを除外するには、ツリーで適用されているスキンの下にあるボーンを選択し、除外ボタン（通常は削除ボタンがある場所）をクリックします。
スキンボーンはSpine Essentialではご使用いただけませんのでご注意ください。
[ドープシート](/spine-dopesheet#表示状態)および[グラフ](/spine-graph#表示状態)内のスキンボーンのボーン行は、 [ツリービューの設定](/spine-tree#ビュー設定)によっては表示されない場合があります。
# スキンコンストレイント
[Hide skin bones and constraints(スキンボーンとコンストレイントを非表示)](/spine-tree#スキンボーンとコンストレイントを非表示)で、ツリー内の非アクティブなコンストレイントを非表示にできます。
[コンストレイント](/spine-constraints)は、1つまたは複数のスキンに追加することができ、コンストレイントが入っているスキンがアクティブな場合のみ、そのコンストレイントがアクティブになります。これにより、スケルトンは、特定のスキンでのみ使用されるコンストレイントを持つことができます。なお、アクティブでないコンストレイントは、ランタイムのパフォーマンスに影響を与えません。
コンストレイントを[アクティブなスキン](#アクティブなスキン)に追加するには、コンストレイントを選択して、ツリーのプロパティで`Add to skin(スキンに追加)`をクリックします。また、コンストレイントをツリー内でドラッグして、スキンにドロップすることもできます。あるいは、スキンを選択してツリーのプロパティで`Add to skin(スキンに追加)`をクリックし、任意の数のコンストレイントかボーンをクリックすると、それらすべてをスキンに追加できます。
スキンコンストレイントには、ツリー上のコンストレイントの右側にスキンのアイコンが表示されます。これをクリックすると、適用されているすべてのスキンの下でコンストレイントが選択されます。これにより、スキンを探したり、すべてのスキンからコンストレイントを削除したりすることが簡単にできます。
スキンからコンストレイントを除外するには、ツリーでスキンの下のコンストレイントを選択し、除外ボタン（通常は削除ボタンがある場所）をクリックします。
## コンストレイントされたボーン
コンストレイントされたボーンとは、コンストレイントにより制約されるボーンです。コンストレイントされたボーンの一部がスキンの中にあってアクティブでない場合、コンストレイント自体はまだ機能しますが、非アクティブなボーンは制約されません。
すべてのコンストレイントされたボーンがスキンの中にある場合、コンストレイントもそれらのスキンの中にあるべきです。そのため、コンストレイントが、少なくともそれらの内1つのスキンに追加されるまでは[警告](#コンストレイントの警告)が表示されます。
## スキンコンストレイントの使用例
スキンはコンストレイントを使用してボーンを移動できるので、スケルトンとそのすべてのアニメーションを異なるプロポーションのキャラクターに再利用することができます。詳しくは、[異なるプロポーションのためのスキンコンストレイント](/blog/Skin-constraints-for-different-proportions)をご覧ください。
# 警告
Spineランタイムで使用するデータをエクスポートする前に、すべての警告を修正する必要があります。
スキンが誤って設定されていると、ツリー上のボーン、アタッチメント、コンストレイントのアイコンに警告が表示されます。
これは、スケルトンの様々なパーツが他のパーツに依存しているために起こります。一部のパーツがスキンに追加されていて、そのスキンが表示されていない場合、それらのパーツは利用できません。これにより、ボーンのトランスフォームが無効になったり、アタッチメントがレンダリングされなかったり、コンストレイントが適用されなかったりします。
## ボーンの警告
ボーンが親ボーンと同じスキンに入っていない場合、ボーンのツリーアイコンに警告が表示されます。これが発生すると、そのボーンと各種アタッチメントがビューポートに表示されなくなります。
親ボーンがアクティブでない場合、子孫ボーンの[トランスフォーム](/spine-bones#ボーンのトランスフォーム)は無効になります。そのため、[ウェイト](/spine-weights)を使用しているアタッチメントなど、子ボーンのトランスフォームに依存しているものも無効になります。
ボーンの警告を修正するには、子ボーンをその親ボーンと同じスキンに追加してください。
> [Hide viewport skin bones(ビューポートのスキンボーンを非表示)](/spine-tree#ビューポートのスキンボーンを非表示)がチェックされていない場合、どのスキンが表示されているかにかかわらず、すべてのボーンがアクティブになります。ランタイムで正しく描画されないボーンの警告は、この設定がチェックされていない場合、正しく表示されることがあります。
## アタッチメントの警告
以下の場合、アタッチメントのツリーアイコンに警告が表示されます:
* アタッチメントが、[ボーンの警告](#ボーンの警告)が表示されているボーンの[ウェイト](/spine-weights)を持っている場合、または
* アタッチメントが何かしらのスキンの中にあり、スキンの中にあるボーンのウェイトを持っているが、そのアタッチメントのスキンと一致していない場合
アクティブではないボーンにウェイト付けされた頂点は無効になり、ワールド座標0,0に設定されます。例えば、メッシュの無効な頂点はワールド座標0,0に表示されてしまいます。すべての頂点が無効な場合、メッシュ全体がワールド座標0,0になり、まったく見えなくなってしまいます。
アタッチメントの警告を修正するには、まず、アタッチメントのウェイトで使用されている[ボーンの警告](#ボーンの警告)を修正してください。そして、もしアタッチメントが何かしらのスキンの中にあり、それらのボーンがスキンの中にもある場合は、そのアタッチメントのスキンにそのスキンボーンを追加してください。
## コンストレイントの警告
以下の場合、コンストレイントのツリーアイコンに警告が表示されます:
* コンストレイントのターゲットボーンがスキンの中にあるが、そのコンストレイント自体がそのスキンに入っていない場合、または
* コンストレイントで制約されたボーンのすべてがスキンの中にあるが、コンストレイント自体がそれらのスキンのいずれにも入っていない場合
コンストレイントに警告が出ている場合は、どのスキンが表示されているかに応じて、全く適用できないか、時々しか適用できないことを意味します。
コンストレイントの警告を修正するには、ターゲットボーンと同じスキンにコンストレイントを追加してください。そして、コンストレイントされたボーンのすべてがスキンにある場合、コンストレイントが少なくともその中のスキンの1つに入っていることを確認してください。
# スキンの複製
スキンを複製すると、より多くのオプションを提供するダイアログが表示されます。オプションの中には、メッシュアタッチメントやキーを持っているアタッチメントの場合にのみ表示されるものもあります。
* `Linked meshes(リンクメッシュ)`: 新しいスキンにメッシュそのものを複製するのではなく、[リンクメッシュ](/spine-meshes#リンクメッシュ)を作成します。
* `Inherit deform(変形を継承）`: リンクメッシュに、ソースメッシュの変形キーを共有します。
* `Duplicate keys(キーを複製)`: 複製される各アタッチメントについて、各アニメーションのキーも複製します。
* `Rename attachments(アタッチメントの名前を変更)`: 複製される各アタッチメントの前に、スキンの名前を付けます。例えば、`red`というスキンの場合は、`head`は`red/head`となります。これは、各スキンの画像をサブフォルダーに格納している場合に便利です。
# スキンのワークフロー
スキンは便利で、その活用方法もさまざまです。スキンを使用する際には、適切なワークフローを使用することで、膨大な時間を節約できることを覚えておいてください。
## 最初のスキン
すべてのアタッチメントがスキンプレースホルダーを使用せずに作成されている場合、スキンプレースホルダーを作成して既存のアタッチメントを1つずつ移動するのは面倒です。この作業を効率的に行うには、まず[ツリーフィルター](/spine-tree#フィルター)を使ってボーンとスロットを非表示にし、アタッチメントだけを表示します。これにより、多くのアタッチメントを簡単に選択することができます。次に、スキンを作成するか、既存のスキンが[アクティブ](#アクティブなスキン)になっていることを確認し、アタッチメントを選択して`New...(新規...)` `Skin Placeholder(スキンプレースホルダー)`を選択します。これにより、同じ名前のアタッチメントごとにスキンプレースホルダーが作成され、各アタッチメントがアクティブなスキンのスキンプレースホルダーの下に移動します。
必要に応じて、[検索と置換](/spine-tree#検索と置換)を使ってアタッチメントの名前を修正することができます。例えば、`skinName/imageName`のように、スキン名をサブフォルダのプレフィックス(接頭辞)として追加することができます。
## 類似したスキン
新しいスキンが既存のスキンと類似している場合、既存のスキンを複製し、そのアタッチメントもすべて複製してから、新しいスキンを修正すると効率的です。
画像やアタッチメントを新しいスキンプレースホルダーにドラッグする際、既存のアタッチメントに対してドロップするとそのトランスフォームがコピーされますが、スキンプレースホルダー自体に対してドロップした場合はコピーされません。
[検索と置換](/spine-tree#検索と置換)を使うと、新しいスキンのすべてのアタッチメント名をすばやく変更できます。画像のサイズが同じで、命名規則（例： `skinName/imageName`など)を使用している場合は、検索と置換を行うだけで、新しいスキンを完全にセットアップすることができます。
## プログラムによるスキン
もし検索と置換を使って大量のスキンを作成している場合は、別の解決策を利用した方が良いでしょう。シンプルなパターンや命名規則を使って派生させることができれば、Spineプロジェクト内のすべてのものをいちいち作成する必要はありません。
スキンの違いがアタッチメント名だけの場合は、プログラマーと協力して[ランタイムによる解決策](/spine-runtime-skins)を講じてください。1つのアプローチとしては、Spineエディターで1つのスキンだけを作成することです。そして、ランタイムでスキンを複製し、必要に応じて名前を変更するコードを書きます。
## スキンプレースホルダーの削除
スキンプレースホルダーが不要になった際、中のアタッチメントをスロットに移動させ、スキンプレースホルダーをそれぞれ削除するのは面倒です。代わりに、スキンプレースホルダーを選択し、ツリーのプロパティで削除をクリックしてください。削除ダイアログで`Keep current attachment(現在のアタッチメントを維持する)`にチェックを入れます。これにより、アクティブなスキンのアタッチメントをスロットに移動させてから、スキンプレースホルダーを削除できます。ただし他スキンのアタッチメントは削除されます。
## Mix-and-match
単純なプロジェクトでは、スキンを使用することで、各スキンがスケルトン全体に対応します。より複雑なプロジェクトでは、スキンを使用してアタッチメントをグループ化し、各スキンを個別のアイテムやボディの一部とし、複数のスキンを一度に表示してスケルトンに装着することができます。当社の[mix-and-matchのサンプルプロジェクト](/spine-examples-mix-and-match)では、このアプローチを採用しています。
Spineエディターでは、[スキンビュー](/spine-skins-view)を使用すれば、複数のスキンを同時に表示することができます。[ランタイム](/spine-runtime-skins)では、1つスキンを作成して、そこに複数のスキンを追加します。
# ビデオ
[youtube:xY4m3iNtSUQ]
[youtube:81XU7Uqpm6E]
[youtube:Jkd7Q5nkzX8]
[次: コンストレイント](/spine-constraints)
[前: パス・アタッチメント](/spine-paths)
[Spine ユーザーガイド: 目次]