はじめに

Spineは、Adobe Photoshopまたはその他のグラフィックソフトウェアで保存されたAdobe Photoshop PSDファイルをインポートすることができます。PSDファイルのレイヤーは、新規または既存のSpineプロジェクト内のアタッチメントとしてインポートされます。さらに、レイヤータグを使用して、スキン、プレースホルダー、スロットなどの作成を自動化することもできます。

この機能の目的は、Adobe Photoshopを所有していなくても、Photoshopと同様の機能をSpineで使用できるようにすることです。

以下は、PSDファイルを生成することができるソフトウェアの例です:

• Affinity
• Clip Studio Paint
• GIMP
• Krita
• Paint Tool SAI
• Photopea
• Procreate

使用方法

PSDインポートダイアログを開くには、メインメニューから Import PSD (PSDインポート) を選択します。

Import PSD (PSDインポート) ダイアログには3つのセクションがあります: Input PSD File (入力するPSDファイル)、 Output PNG File (出力されるPNGファイル)、そして Import Data (データインポート) です。

入力するPSDファイル

このセクションでは、PSDファイルのパスを選択し、インポート処理中に使用するオプションを設定します。使用可能なオプションは以下の通りです:

• PSD File (PSDファイル): インポートしたいPSDファイルのパス。
• Scale (スケール): 画像ファイルを書き込む前にここで指定された値でレイヤーをスケールします。これはSpineで実際に使用するよりもPSDが高解像度な場合などに便利です。
• Padding (パディング): 各画像の周囲に追加する透明ピクセルの数。これを追加することにより、画像の境界に沿った不透明ピクセルのエイリアシングアーティファクトを避けることができます。
• Trim whitespace (余白をトリミング): チェックを入れると、各レイヤーの縁の余白が削除されます。チェックを外すと、すべての画像のサイズはPSDファイルのキャンバスのサイズと同じになります。
• Ignore hidden layers (非表示レイヤーを無視): チェックを入れると、非表示になっているグループおよびレイヤーは出力されなくなります。

出力されるPNGファイル

このセクションでは、ファイルから抽出した画像を保存するフォルダを定義できます。使用可能なオプションは以下の通りです:

• Folder (フォルダ): 抽出した画像を保存するフォルダ。
• Overwrite confirmation (上書きの確認): チェックされていると、他の画像が上書きされてしまう場合に確認ダイアログが表示されます。確認ダイアログには、ユーザーが続行を選択した場合に上書きされるすべての画像がリストアップされます。
• Images path (イメージパス): このドロップダウンメニューでは、以下を選択できます:
  • 現在のプロジェクトに存在するスケルトンの中から選択; クリックすると、選択したスケルトンのイメージフォルダの値でフォルダが設定されます。
  • PSD Path; クリックすると、PSDファイルのパス+ /imagesを含むフォルダの値でフォルダが設定されます。

データインポート

このセクションはちょうどデータインポートダイアログと同じように動作します。詳しくはデータインポートのドキュメントを参照してください。

PSDのセットアップ

Spineは、PSDファイルの内容に応じて様々な出力を生成することができます。

原点

Spineはエディター内での 0,0 の原点を決定するためにガイドの位置を使用します。最初の水平ガイドが y 原点を決定し、最初の垂直ガイドが x 原点を決定します。水平方向と垂直方向のガイドがない場合は、幅と高さのそれぞれ半分の座標が使用されます。各寸法の最初のガイドの後に続くガイドはSpineによって無視されるので、ユーザーはインポート処理に影響を与えることなくそれらを使用することができます。 または後述のように、レイヤーの [origin] タグを使用して原点を制御することもできます。

エディターの原点は中央であったり、ピクセルに揃えられたりすることに注意してください。これはガイドの位置（ガイドはピクセル外に配置することもできます）、またはキャンバスの幅/高さ（奇数サイズはエディタの原点がピクセルの中心にあることを意味します）に依存します。 画像がぼけてしまうことを避けるために、原点は必ず正しい位置に置いてください。セットアップポーズやその他の静的ポーズには特に注意が必要です。

タグ

タグを使用してレイヤー名をカスタマイズすることで、Spine 内でスキン、プレースホルダ、スロットなどの作成を自動化したり、レイヤーのマージやリサイズなどの特定の機能の実行を制御することができます。

タグはレイヤー名に追加された角括弧内に含まれるテキスト要素で、[タグ:値] のように構成されます。 タグは必須で、:値はタグに依存し、必須の場合も、任意の場合もあります。もし :値 が省略された場合、レイヤー名またはグループ名が値として使用されます。 タグはレイヤー名の任意の位置に挿入できます。例えば、head [slot] や [slot] head のどちらでも動作します。 レイヤーのみに使用できるタグとグループにのみ使用できるタグがありますが、ほとんどのタグは両方に使用できます。

グループおよびレイヤー用タグ

• [bone] または [bone:name] レイヤー、スロット、および他のボーンが、新しいボーンの下に配置されるようになります。新しいボーンは、最初に表示されているレイヤーの中心に作成されます。boneタグを持つグループは入れ子にすることができます。
• [slot] または [slot:name] レイヤーがスロットに配置されるようになります。
• [skin] または [skin:name] レイヤーはスキン内に配置されるようになります。skinタグの付いたレイヤーの画像は、ディスク上のスキン名のサブフォルダーに配置されます。
• [scale:number] 指定した値に基づきレイヤーがスケーリングされます。該当するアタッチメントは、Spineで同じサイズに表示されるように、反比例して拡大縮小されます。
• [pad:number] number で指定したパディングがレイヤーまたはグループの子に追加されます。これは Padding オプションで設定するのとは異なるパディングを追加したい場合に便利です。
• [folder] または [folder:name] レイヤーはディスク上のサブフォルダーに配置されるようになります。folderタグを持つグループは入れ子にすることができます。
• [overlay] このタグを持つレイヤーは、その下にあるすべてのレイヤーに対するクリッピングマスクであるかのように使用されます。
• [trim] 、 [trim:true] 、 [trim:ws] 、 [trim:false] 、 [trim:canvas] 、 [trim:mask] もしも値が:
  • 何もない、true 、ws のいずれかの場合: レイヤーの余白は強制的に除去されます。
  • false または canvas の場合: レイヤーは強制的にキャンバスサイズに一致します。
  • mask の場合: レイヤーが強制的にレイヤーマスクのサイズを基準にトリミングされます。これは Remove whitespace オプションを有効にしている場合にも画像のサイズを制御できます。レイヤーマスクは、Spineでメッシュのエッジに頂点を挿入するための空白が必要な場合などに便利です。
• [ignore] このタグを持つレイヤー、グループ、子グループは無視され、出力されなくなります。
• [!bones] このタグは [bones] タグがこのレイヤーまたはグループに影響するのを防ぐことができます。
• [!slots] このタグは [slots] タグがこのレイヤーまたはグループに影響するのを防ぐことができます。
• [!name] このタグは [name:pattern] タグがこのレイヤー、グループ、またはその子に影響するのを防ぐことができます。
• [!path] このタグは [path:pattern] タグがこのレイヤー、グループ、またはその子に影響するのを防ぐことができます。
• [!bone] このタグは [bone:pattern] タグがこのレイヤー、グループ、またはその子に影響するのを防ぐことができます。
• [!slot] このタグは [slot:pattern] タグがこのレイヤー、グループ、またはその子に影響するのを防ぐことができます。

レイヤー用タグ

以下は [merge] タグを持つグループにも同様に適用できます。

• [mesh] または [mesh:name] このタグを持つレイヤーはメッシュになります。name が指定された場合はリンクメッシュになります。name は既存のメッシュの名前と一致する必要があります。[mesh:name]が使用された場合、リンクメッシュはソースメッシュのサイズを使用します。
• [path:name] 保存される画像ファイルの名前をアタッチメント名とは異なるものにしたい場合に、名前を指定することができます。
• [origin] このタグを持つレイヤーの中心がSpineエディター上での原点として使用されます。このタグを持つレイヤー自体は出力されません。

グループ用タグ

• [merge] このタグを持つグループ内のレイヤーは1つのレイヤーとしてマージされ、単一の画像が出力されます。
• [bones] 直接の子に対して [bone] タグを追加します。
• [slots] 直接の子に対して [slot] タグを追加します。

以下のタグにおけるpatternとは、アスタリスク（*）を含む文字列のことです。以下のタグは、値がpatternである場合に異なる動作をします:

• [name:pattern] グループ内のレイヤー名に接頭辞または接尾辞を追加します。名前の変換は、以下に続く他のパターンタグが適用される前に行われます。
• [path:pattern] グループ内のレイヤーのパスに接頭辞または接尾辞を追加します。レイヤーパスパターンは、レイヤーに [path] タグがない場合でも適用されます。
• [bone:pattern] グループ内のレイヤーボーンに接頭辞または接尾辞を追加します。
• [slot:pattern] グループ内のレイヤースロットに接頭辞または接尾辞を追加します。

これらのタグでは、パターンにアスタリスク（*）を含める必要があります。

アタッチメントのプロパティ

順序、タグの値、およびレイヤー名によって、Spineがスロット、アタッチメント、プレースホルダー、スキン、および画像パスをどのように作成するかが決まります。ファイルに多くのグループやレイヤーが含まれ、多くのタグが使用されている場合、Spineがそれらをどのように解釈して、リストされた要素を作成するかを理解することは、期待通りの結果を得るために役立ちます。

レイヤーの階層構造は、レイヤーの最も外側にある祖先グループからレイヤー自身へとたどることで得られます。レイヤーまたはグループに [skin] タグと [folder] タグの両方が含まれている場合、[skin] タグの方が優先されます。

Spineは以下のようにレイヤーに各プロパティを割り当てます:

• Slot: 最も近い階層の [slot] タグの値。該当するものが無い場合は、レイヤーの名前になります。

• Skin: 階層にある [skin] タグの値が選択されます。最も近い階層の [skin] タグがスキンの名前を決定し、残りの [skin] タグがスキンを配置するスキンフォルダを決定します。

• Placeholder: 階層構造の [folder] タグの値 + レイヤー名。

• Attachment: 階層構造の [folder] 要素と [skin] 要素の値 + レイヤー名。

• Attachment image path: レイヤーに [path] タグがある場合は、アタッチメントのレイヤー名に相当する部分を [path] タグの値に置き換えます。それ以外の場合は、単にアタッチメント名となります。

スラッシュ

レイヤー名やスロット、スキン、フォルダー、パスタグの値にスラッシュ / を追加すると、その動作が変わります:

• 名前の中にスラッシュがある場合、サブフォルダーを定義することができます。
• 名前の先頭にスラッシュがある場合、階層がリセットされます。

スロットのフォルダを作成するには、名前の中に / を使用する必要があります。

ブレンドモード

Spineは、フォルダまたはレイヤーに適用された以下のブレンドモードを認識します。Spineのスロットは対応するブレンドモードになります。

• Normal は、Spineの Normal ブレンドモードに対応します。
• Multiply は、Spineの Multiply ブレンドモードに対応します。
• Screen は、Spineの Screen ブレンドモードに対応します。
• Linear Dodge は、Spineの Additive ブレンドモードに対応します。

表示順序

PSDファイルをインポートする際、PSDのレイヤー順序をSpineは表示順序に反映させようとします。しかし、それは常に可能というわけではありません。例えば、次のような場合です:

• A [slot:slot-folder-1/A]
• B [slot:slot-folder-2/B]
• C [slot:slot-folder-1/C]

slot-folder-1 は slot-folder-2 の前にも後にも存在することはできません。 そのため、この場合、フォルダの位置はフォルダ内で最後に見つかったスロットによって決定されます。 他にもPSDのレイヤー順とSpineの表示順序を正確に対応させることができない、似たようなケースはありえます。

制限事項

Spineは各レイヤーのピクセルデータしかインポートできません。つまり、調整レイヤーなどピクセルを含まないレイヤーは無視されます。さらに、レイヤースタイルが適用されている場合、レイヤースタイルは画像ピクセル内に保存されないため、これらも無視されます。レイヤーエフェクトを使用する場合は、Spineにファイルをインポートする前に、すべてのレイヤーをラスタライズすることをお勧めします。

現在、PSDインポート機能でサポートされていないPhotoshopの既知の機能は以下のとおりです:

• 調整レイヤーと塗りつぶしレイヤー（ピクセルデータとして保存しない場合）
• レイヤースタイル
• レイヤーマスクのグラデーション
• レイヤーのパーセント塗りつぶし

上記の機能がどうしても必要な場合は、以下のいずれかを行ってください:

• サポートされていないレイヤーをスマートオブジェクトに変換する。Photoshopは出来上がったレイヤーのラスタライズバージョンをPSDファイルに保存するため、Spineは追加作業なしでそれをインポートすることができます。
• 古いPhotoshop to Spineスクリプト、またはspine-scriptリポジトリで利用可能な他のspine-scriptを使用する。
• Spine互換psdスクリプトを使用してSpine互換PSDを生成する。

次: コマンドラインインターフェース 前: インポート