# スロット スロットに表示されるアタッチメントは、アニメーションで[キーにする](/spine-keys#スロットアタッチメント)ことができます。 スロットは[ボーン](/spine-bones)に親子付けされて各種[アタッチメント](/spine-attachments)の入れ物となるもので、一度に1つのアタッチメントのみ表示することができます(または全て非表示にもできます)。スロットは、最初は理解するのが難しいかもしれませんが、様々な意味で非常に重要なものです。スロットは概念的なものであり、位置情報を持たず、描画もされません。 # 表示順序 スケルトン内の表示順序(Draw Order)はスロットのリストで、リストの上位にあるスロット内のアタッチメントが、下位スロット内のアタッチメントの上に表示されます。表示順序は、ツリー上のスケルトンの下に表示されます。 ![](/img/spine-user-guide/slots/draworder.png) スロットは、同じ種類のアタッチメントをグループ化することができます。例えば、`weapon(武器)` というスロットに、`knife(ナイフ)`、`sword(剣)`、`axe(斧)` を入れるなどです。表示順序の中では `weapon` スロットだけが表示されるので、そのスケルトンが何百、何千もの武器を持っていても、表示順序のリストを簡潔に保つことができます。 また、スロットはボーンを表示順序から切り離すので、同じボーンのアタッチメントを別のボーンのアタッチメントの上下に描画することができます。例えば、胴体のボーンには `belly(お腹)` と `shirt(シャツ)` のスロットがあり、腰のボーンには `pants(パンツ)` のスロットがあるなどの場合。スロットのおかげで、`belly(お腹)` と `shirt(シャツ)` が同じボーンにあっても、`belly(お腹)` は `pants(パンツ)` の下に、`shirt(シャツ)` は `pants(パンツ)`の上に表示することができます。 ## 表示順序の変更 画像編集ソフトで[スクリプト](/spine-images#スクリプト)を使用した場合は、各画像スロットを正しい表示順序でSpineにインポートすることができます。 表示順序のスロットは上下にドラッグすることができ、表示順の変更を[キーとして記録](/spine-keys#表示順序)することができます。 また、キーボードのプラス(`+`)またはマイナス(`-`)キーを押すと、現在選択されているスロットの表示順が変わります。ツリーでスロットを探すよりも、ビューポート上でアタッチメントを選択してから、これらのホットキーでそのアタッチメントのスロットの表示順を調整する方が便利な場合があります。`shift` を押しながらだと、5つ飛ばしでジャンプできます。 ![](/img/spine-user-guide/slots/draworder1.png) ![](/img/spine-user-guide/slots/draworder2.png) 上の例では、`eye` が `googles` スロットの上から下に移動しています。 ### ツリーフィルター ツリービューの左上にある[フィルターボタン](/spine-tree#フィルターボタン)を使って、ボーンやアタッチメントを非表示にし、`Slots(スロット)`ノードの下にあるスロットだけをツリーに表示することで、表示順序を簡単に調整することができます。これらのスロットは表示順序を表し、上下にドラッグすることができます。 ![](/img/spine-user-guide/slots/filter.png) 通常、ビューポートでアタッチメントを選択すると、ツリー上でも選択されます。ツリーにアタッチメントを表示しないようにフィルターをかけている時は、代わりにスロットがツリー上で選択され、そのスロットが表示順序の中でどこにあるのかを示します。 # プロパティ ![](/img/spine-user-guide/slots/properties.png) ## カラー [スロットカラービュー](/spine-slot-color)は、カラーボタンをクリックするよりもスロットカラーをより早く、より便利に設定できます。 スロットカラーは、スロットのアタッチメントを着色すると同時にアタッチメントのアルファ(不透明度)をコントロールするもので、[キー設定](/spine-keys#スロットカラー)が可能です。アタッチメントにも個別に[カラー](/spine-attachments#カラー)の設定がありますが、キーの設定はできません。 カラーボタンの左半分はアルファ付きのカラーを表示しており、右半分は不透明なカラーを表示しています。ボタンをクリックすると、カラーとアルファを変更することができます。 アタッチメントを非表示にするためにアルファをゼロにすることは、効率的な方法ではありません。ほとんどのゲームツールキットは、アルファ値がゼロの画像を描画するために、見えている画像を描画するのと同じ労力を費やします。 そのため、[スロットのアタッチメントキー](/spine-keys#スロットアタッチメント)を設定してアタッチメントを隠す方が効率的です。突然消えてしまうのを避けるために、スロットのアタッチメントを隠す前にスロットカラーを透明にフェードすることができます。 ![](/img/spine-user-guide/key-frames/color-alpha.png) アニメーションのカラーとアルファが[分離](/spine-keys#カラーとアルファの分離)されると、2つのカラーボタンが表示されます。どちらかのボタンをクリックすると、同じスロットカラーダイアログが開き、アルファかカラー、またはその両方を変更することができます。 ![](/img/spine-user-guide/slots/separate-buttons.png) ## ティントブラック ティントブラックは、画像の暗い色と明るい色を別々に着色することができます。グレースケール画像と併用することで、多彩な色調の画像を実現できます。また、ベタ塗りのシルエット、色の反転、スーパーマリオの無敵スターの点滅などの効果を得られます。加算、スクリーン、乗算の各ブレンドモードを使えば、さらに色々な効果を作成できます。 ティントブラックは、スロットの `Tint black(ティントブラック)` をチェックすることで有効になり、2つ目のカラーボタンが表示されます。 ![](/img/spine-user-guide/slots/tintblack.png) 1つ目のカラーボタンは「ライト」カラーを設定し、画像の明るい部分の色合いと不透明度をコントロールします。2番目のカラーボタンは「ダーク」カラーを設定し、イメージの暗い部分を着色します。ライトカラーとダークカラーはそれぞれ[キーにする](/spine-keys#スロットカラー)ことができます。
ライトダークイメージ説明
!! これがオリジナルのモノクロ画像です。
!! ティントブラック無しで、ライトカラーをレッドに設定。モノクロ画像が一様に赤で染められ、同じ赤の濃淡が得られます。
ティントブラックを使って、ライトカラーをサーモンピンク、ダークカラーを赤に設定しました。同じ色の濃淡ではないので、視覚的な魅力が増しています。
ティントブラックを使って、ライトカラーを青に、ダークカラーを水色に設定。このように色の反転、ベタ塗りのシルエット、点滅などの効果が得られます。
!! 使用例は、ティントブラックの[サンプルプロジェクト](/spine-examples#Tint-black)をご覧ください。 ## ブレンド Photoshop用の[スクリプト](/spine-images#スクリプト)ではPhotoshopレイヤーのブレンドモードを使って作成したスロットのブレンドモードを設定できます。 ブレンドは、スロットアタッチメントのピクセルとそれ以下のピクセルをどのように組み合わせるかを制御します: * `Normal(通常)` はデフォルトの設定で、通常のブレンドが適用されます。 * `Additive(加算)` はPhotoshopにおける「覆い焼き（リニア）- 加算」に相当します。 * `Multiply(乗算)` はPhotoshopにおける「乗算」に相当します。 * `Screen(スクリーン)` はPhotoshopにおける「スクリーン」に相当します。 `Normal(通常)` 以外のブレンドモードを使用すると、一部のゲームツールキットでは[ドローコール](/spine-metrics#ドローコール)が増加してパフォーマンスに影響を与えてしまうことがあります。一部のゲームツールキットでは、`Additive(加算)` と乗算済みアルファを使用してレンダリングする場合にドローコールの増加を避けることができます。 ## カラーとアルファの分離 アニメ化モードでは、スロットのプロパティに追加の行が表示されます。 ![](/img/spine-user-guide/slots/separate.png) `Alpha(アルファ)` チェックボックスを使うと、現在のアニメーションにおいて、カラー（RGB）と不透明度（A）を別々にキーイングすることができます。詳しくは、[カラーとアルファの分離](/spine-keys#カラーとアルファの分離)をご覧ください。 # スロットの非表示 ![](/img/spine-user-guide/slots/slot-visibility.png) ボーンと同様に、スロットもツリー内に表示ドットがあります。非表示にすると、そのスロットのアタッチメントはビューポートに描画されなくなり、画像およびビデオエクスポート時にも表示されなくなります。しかし、これをキーとして記録することはできないため、データエクスポート時にはそのスロットのアタッチメントも表示されます。 多くのスロットやボーンを非表示にした時は、`ctrl+H` ですべてのスロットやボーンを再び表示することができます。 スロットのアタッチメントを非表示にすることは、ビューポート内の混乱を一時的に軽減することのみを目的としているので、キーとして記録することはできません。代わりに、スロット内のアタッチメントを非表示にして[それをキーにする](/spine-keys#スロットアタッチメント)ことができます。 また、ボーンの表示ドットを右クリックすると、そのボーンとすべての子ボーン、スロットの表示状態が切り替わります。 すべてのアタッチメントは、[ビューポートオプション](/spine-tools#ビューポートオプション)を使用してビューポート内で非表示にすることができます。 # フォルダ スロットはフォルダに整理することができます。フォルダを作成するには、任意のスロットを選択して `新規...` `フォルダ` をクリックします。スロットはドラッグすることでフォルダ間を移動することができます。 エクスポートされたスケルトンデータでは、フォルダ名はコンストレイント名の前に付加され、Spineランタイムで使用される最終的な名前になります。例えば、フォルダ `hair` の中にサブフォルダ `long` があり、その中にスロット `hair-strand-1` がある場合、実行時のスロット名は `hair/long/hair-strand-1` となります。 [次: イメージ](/spine-images) [前: ボーン](/spine-bones) [Spine ユーザーガイド: 目次]