PSDインポート

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

「Import PSD」は、当社のPhotoshopToSpineスクリプトと同様の機能を提供しますが、処理速度がはるかに速く、必ずしもAdobe Photoshopを購入しなくても利用できます。

例えば、以下のようなソフトウェアを使って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で同じサイズに表示されるように、反比例して拡大縮小されます。
• [rotate:degrees] 指定した角度に基づきレイヤーが回転されます。該当するアタッチメントは、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とは、アスタリスク (*) を含む文字列のことです。このパターンはすべての子レイヤーに対して使用され、アスタリスクは子レイヤー内の名前または値に置き換えられます。例:[name:prefix*suffix] 値がパターンである場合、これらのタグの動作は異なります:

• [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: グループ階層内の [folder] タグの値 + レイヤー名。レイヤーに [path] タグがある場合は、レイヤー名の代わりにそのタグが優先されます。

スラッシュ

レイヤー名、スロット、スキン、フォルダ、またはパスのタグ値の先頭にスラッシュ(/)を付けると、その値が親グループの影響を受けなくなります。たとえば、[path:/name] の場合、親グループの [folder] タグは使用されません。

また、スラッシュが名前やタグ値の中に含まれている場合、サブフォルダを表します。例えば、[path:subfolder/name] とすると、画像は subfolder/name.png として出力されることになります。

ブレンドモード

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は各レイヤーのピクセルデータのみをインポートできます。PSDファイル内にピクセルデータとして保存されているのではなく、PhotoshopによってレンダリングされるPSDの機能には、次のようなものがあります:

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

これらの機能を使用する場合、「PSDインポート」でピクセルデータを取得するには、以下の回避策が必要となります:

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

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