PSDインポート | OPTPiX Help Center

OPTPiX SpriteStudio Ver.7.4.0にてPSDファイルの直接インポートに対応しました。
Photoshop®等のツールで作成したPSDファイルのレイヤーをセルとパーツに変換します。
この対応により PSDtoSS6 を起動しておく必要が無くなりました。
作成したイラストのセルマップ化～レイアウトを自動で行うため(PSDファイルの見た目同様のパール配置にSpriteStudioのレイアウト上に配置)、大幅に作業を短縮することができます。
なお、従来のPSDtoSS6 で作成したファイルも引き続き利用可能です。

PSDインポートを利用するメリット
PSDインポートの使い方
ユーザーガイド
- PSDtoSSスクリプト
  - PSDインポート用png出力
  - PSDインポート用原点レイヤー作成
- PSDインポートダイアログ
PSDインポートとPSDとSS6の呼称の違い
関連ページ

PSDインポートを利用するメリット

PSDインポートを利用することで、さまざまなメリットがあります。

作業手順の短縮

PSDインポートを活用すると大幅に作業手順を短縮することができます。

SpriteStudioでアニメーションを作成する場合、

ssce(セルマップファイル)が参照するためのテクスチャ画像を事前に作成する
SpriteStudioでssce(セルマップファイル)を作成し、セルを登録する
登録したセルをレイアウトに配置する。

という事前準備が必要ですが、PSDインポートを活用することで、上記の手順をすべて自動化することができます。
また、テクスチャ画像を作成する際に配置をミスしてしまう…といった手戻りもありません。

ssce(セルマップファイル)の容量の削減

PSDインポートは、パーツをギュウギュウに詰め込むため、画像容量やssce(セルマップファイル)の容量を削減することができます。

素材になるPSDを修正した際、反映が行いやすくなる

SpriteStudio で使用しているセルマップを修正すると、psdは修正せずに、直接セルマップ自体を修正するか、PSDファイルを修正した後にセルマップを作成し直す必要がありました。

ですが、PSDインポートを使用すると、PSDファイル修正後のセルマップ作成・上書きを簡単に行うことができるため、元となるPSDファイルとセルマップのデータ状態が食い違うといった事態を回避することができます。

PSDインポートの使い方

PSDtoSS6 では作成したセルマップ・アニメーションファイルは手動でプロジェクトに追加する必要がありましたが、Ver.7.4.0では現在開いているプロジェクトに追加できるようになりました。
作成したセルマップ・アニメーションファイルはプロジェクトに設定された基準フォルダに振り分けられます。
指定できるオプションは PSDtoSS6 と同等です。

PSDインポートの基本的な使い方を解説します。

PSDファイルから直接インポートを行う
Photoshop®にスクリプトを組み込む
スクリプトを使用して中間データを出力
SpriteStudio用データを出力する

PSDファイルから直接インポートを行う

PSDインポートは、レイヤー構造のみのシンプルなPSDファイルであれば直接インポートも可能です。

フィルター、スタイル、レイヤーマスクなどを使用している場合、対象のレイヤーをスマートオブジェクト化もしくは統合しておくか、スクリプトを使って中間データを出力してからコンバートを行ってください。

SpriteStudio のメニュー＞プロジェクト＞PSDインポートを選択し、取り込みたいPSDファイルを選択します。

またはPSDファイルをSpriteStudioにドラッグアンドドロップすることでもインポート可能です。

Photoshop®にスクリプトを組み込む

Photoshop®でレイヤー効果などを反映したパーツを使用したい場合は、下記のスクリプトを組み込み、中間ファイル(infoファイルとPNGファイル)を作成し、それをPSDtoSS6 にて読み込むようにします。

スクリプトは下記のボタンからダウンロード可能です。

PSDtoSSスクリプト
(PSDtoSpriteStudio_Scripts.zip)のダウンロード

ダウンロードされたファイルを展開して、使用しているソフトウェアの格納場所へ対象スクリプトをコピーしてください。

	対象スクリプトファイル	格納場所
	対象スクリプトファイル	Windows	mac
PhotoShop®	(Ps)PSDtoSS_Export.jsx (Ps)PSDtoSS_GeneratePivotLayer.jsx	C:¥Program Files¥Adobe¥Adobe Photoshop バージョン番号 (64 Bit)¥Presets¥Scripts	¥Applications¥Adobe Photoshop バージョン番号¥Presets¥Scripts¥
Illustrator®	(Ai)PSDtoSS_Export.jsx (Ai)PSDtoSS_GeneratePivotLayer.jsx	C:¥Program Files¥Adobe¥Adobe Illustrator バージョン番号(64 Bit)¥Presets¥ja_JP¥スクリプト	¥Applications¥Adobe Illustrator バージョン番号¥Presets.localized¥ja_JP¥スクリプト

Photoshop®上にてフィルター、スタイル、レイヤーマスクなどを使用している場合、スクリプトを使って中間データを出力してからコンバートを行ってください。

なお、以前のPSDtoSS6 用スクリプトも、SpriteStudio Ver.7 で使用可能です。

スクリプト導入後Photoshop®を起動し、SpriteStudioにインポートしたいPSDファイルを開き作業します。
あらかじめパーツ分けと、レイヤー名の指定を半角英数字で行います。
レイヤー名が重複してしまうとエラーが出てしまうため、ご注意ください。

PSDファイルの準備が完了次第、Photoshop®の「ファイル」メニューから「スクリプト」を選択し、「(Ps)PSDtoSS_Export」を選びます。

変換が終了すると、変換元のPSDファイルが格納されているフォルダに、SpriteStudioにインポートするための中間データ(ssceconv_”PSDファイル名”)が出力されます。

中間データを作成したらSpriteStudio用のデータを出力します。

SpriteStudio のメニュー＞プロジェクト＞PSDインポートを選択し、中間データ(ssceconv_”PSDファイル名”)のフォルダ内に含まれる「.ss-psdtoss6-info」を選択します。

また「.ss-psdtoss6-info」ファイルをSpriteStudioへ直接ドラッグアンドドロップすることでもインポート可能です。

SpriteStudio用データを出力する

PSDファイル、もしくはinfoファイルのインポートを行うと、PSDインポートダイヤログが開きます。

出力先やテクスチャサイズなど、必要な項目を設定した後、「コンバート開始」ボタンを押してコンバートを開始します。

コンバートに成功すると、ssceと参照イメージが自動生成されます。
また「ssaeファイル(Setupデータ)を作成」「新規プロジェクトを作成」にチェックを入れると、指定したファイルも併せて自動生成されます。

なお、アニメーションを設定済みのデータに、パーツの追加などを行いセルマップと画像を更新したい場合は「ssaeファイル(Setupデータ)を作成」にはチェックを入れないようにします。(詳しい注意点はこちら）

「上書き確認」にチェックをいれると、上書きが発生した場合に確認のダイヤログが開くようになります。

完成したデータを開くと、Photoshop®上のレイアウトのままSpriteStudio上へ反映されます。

これで PSDインポートを利用したSpriteStudio用データの作成は完了です。
画像編集ソフトで作成したデータに基づき、レイアウト、セル登録が完了しているため
パーツの中心軸設定と親子関係の設定を行えば、アニメーションを編集をすることができます。

ピクセル幅を指定してセルを配置する

8ピクセル単位、32ピクセル単位など、固定のピクセル幅を指定してセルを配置したい場合、「セル配置間隔」「セルマップ縁幅」に同じ数値を指定することで、固定のピクセル幅に合わせてセルを配置することが可能です。
「セル間余白」は 0 か指定数値に設定してください。

例えば、セルマップ縁幅とセル配置間隔を32に指定します。

すると、32ピクセル幅を基準にしてセルの配置を行います。
SpriteStudioのセルマップウィンドウで、グリッドサイズを32に指定し、グリッドのスナップ機能を有効にすると、セルを扱う際に便利です。
※下図のグリッドサイズは32に設定しています。

通常パーツで参照しているセルをそのままメッシュセルに変更する場合は以下のページを参照してください。

逆引きリファレンス – 通常パーツをメッシュパーツに変更したい

クリップスタジオでPSDファイルを作成する

クリップスタジオで書きだしたPSDファイルも、PSDインポートでSpriteStudio形式にインポートすることが可能です。ただし、クリップスタジオではスクリプトが利用できないため、スクリプトで中間ファイルを作成する方法は使用できません。

基本的な使い方は変わりませんが、トーンをはじめとしたベクターレイヤーはラスタライズ化する必要があります。クリップスタジオでPSDファイルを作成する際の注意点を説明していきます。

レイヤーはすべて「ラスタライズ」してください。

ベクターレイヤーについてはサポート対象外となります。クリップスタジオ上でラスタライズを行ってください。「ベクターレイヤー」もコンバートできることを確認していますが、コンバート時にラスター画像に変換されます。
レイヤー効果やマスクは無視されます。
レイヤーの不透明度は無視されます。SpriteStudio上でパーツのα値を変更したい場合は、アトリビュート「不透明度」「ローカル不透明度」を使用してください。
SpriteStudio上ではテキストもすべて画像となります。テキストレイヤーもクリップスタジオ上でラスタライズ化してください。

書き出しの際は「Photoshopドキュメント」を選択

ファイルを保存する際に「.psd(Photoshopドキュメント)」を選択します。
「.psb（Photoshopビッグドキュメント）」には対応していません。
書き出し設定の「出力イメージ」はすべてチェックを外してください。
また、表現色は「RGBカラー」を選択してください。
OKをクリックし、保存を完了してください。

作成したPSDファイルはPhotoshop®で作成したPSDファイルと同様にSpriteStudioにインポートすることができます。
「PSDファイルからインポートを行う」と同様の手順でコンバートしてください。

アニメーション作成後にパーツを追加する際の設定と注意点

アニメーションを作成したあと(.ssaeファイル更新後)新たにレイヤーを作成し、セルパーツとして追加する事が可能です。

アニメーション作成後にパーツを追加する場合は、下記の設定項目のチェックのON/OFFに注意してください。

新規プロジェクトの作成	OFF	ONにした場合、新規データになり、既存データにパーツは追加されません。なお、同名のファイルが存在する場合”PSDファイル名_数字 “となります。
ssaeファイル (Setupデータ)を作成	OFF	ONにした場合、作成中アニメーションデータに新規のデータが上書きされ、作成中のデータが無くなってしまいます。
既存セルの原点を使用	ON	作成中アニメーションデータのセル座標が引き継がれないので、パーツ座標が大きく崩れてしまいます。

＜パーツ追加の際の注意＞

※ パーツ追加はインポート設定を間違えると作業に大きな手戻りが発生します。
操作に慣れない時はパーツを追加する前にアニメーションファイルをバックアップしておくことをお勧めします。(フォルダごとバックアップをお勧めします)

※メッシュ化したパーツはメッシュ情報はリセットされてしまいます。
特に手動ウェイト設定を行った際は大きな手戻りが発生しますので、メッシュで細かい設定を行うアニメーションを作成する場合は、計画的に作業を行う必要があります。
なお、複数枚のセルマップ運用に問題がない場合は、新規パーツは別のセルマップとして追加することで既に作業したデータに手を付けずパーツを追加できます。

※PSDファイル保存時のレイヤー構成に注意してください。前回の取り込み時と新規の取り込み時でレイヤーの名称や不可視設定を変更した場合、セルパーツの画像が登録されない(絵がないパーツが登録される)ことがあります。また、レイヤーのパーツサイズを加筆などで変更した場合、アニメーションの配置座標の調整をする必要が生じる場合があります。(特に親子関係の末端以外のパーツ)

ユーザーガイド

ここではPSDファイルの直接インポートで指定できるオプションやスクリプトの詳細について説明していきます。

PSDtoSSスクリプト
コンバートデータ(infoファイル)読み込み時のダイアログ設定
PSDインポートのウィンドウについて

PSDtoSS スクリプト

スクリプトには「png」を出力するスクリプトと、「原点レイヤー」を作成するスクリプトの2種類があります。

※ PSDtoSS6 用のスクリプトも、SpriteStudio Ver.7 で問題なく使用できます。

PSDインポート用png出力スクリプト

PSD画像をSpriteStudio 用データに変換するために使用します。

Photoshop
(Ps)PSDtoSS_Export.jsx
Illustrator
(Ai)PSDtoSS_Export.jsx

機能
- コンバート用データ出力
  PSDファイルから、複数のレイヤー別png画像と、セルマップの生成に必要な情報を記録したテキストファイル(.ss*-psdtoss*-info)を出力します。
- セル出力制御
  レイヤー名の先頭に「@」を付けると当該レイヤーのpng画像を出力しません。
  セルに反映させたくない作業用のレイヤー等に指定すると便利です。
- 原点レイヤー機能
  レイヤー名の先頭に「+」をつけると「原点レイヤー」として扱われます。原点レイヤーの中央が「＋」部分を除いた同名レイヤーの原点になります。（原点レイヤーは座標のみが参照され、画像は出力されません）
  
  例えば、「head」と「+head」というレイヤー名を設定した場合
  「+head」レイヤーの画像の中央が「head」セルの原点に設定され、配置されます。
  この機能を活用することで、PSDファイル上で原点を指定できるので、画像のサイズが変わった際に原点がずれてしまうことを防ぐことができます。
  
  本機能を有効にするにはPSDインポートダイアログ上の「原点レイヤーを適用」にチェックを入れます。
- レイヤーグループ機能
  基本的にレイヤーひとつひとつをパーツとして扱い、切り出していきますが、レイヤーがグループになっている場合は、グループ内のレイヤーを合成し、１つのパーツとして出力します。
  レイヤーグループにおいても名前の先頭に「@」を付けると当該グループは出力されません。
- Generator対応
  レイヤー名に「.」が使用されていた場合、セルに変換する際に「_」に置換を行います。
  PhotoshopのGenerator機能を使用していた場合、レイヤー名に「.」が使用されますが、SpriteStudio はセル名に「.」を使用できないため、「_」に置換します。
- rootパーツ位置設定機能
  レイヤー名に「root」をつけると「root位置設定レイヤー」となります。
  「root位置設定レイヤー」の画像の中心点がSpriteStudio のレイアウトの基準点にくるように各パーツを配置して出力します。
  
  本機能を有効にするにはPSDインポートダイアログ上の「rootレイヤーを適用」にチェックを入れます。

使用上の注意
- PSDファイルのファイル名に全角を使用することはできません。
  ※変換後のファイル名に全角文字がある場合、特定のプラットフォーム向け SpriteStudio Player で使えないケースがあるためです。
- レイヤー名に全角を使用することはできません。
  ※ファイル名と同じ理由による制限です。
- 重複するレイヤー名を使用することはできません。
  同じレイヤー名が重複しているとコンバートできません。
- レイヤー名に「#」は使用できません。
- キャンバス外の部分を出力する場合は、上下左右に同じ幅キャンバスを広げて出力してください。

PSDインポート用原点レイヤー作成スクリプト

原点レイヤーを自動生成するために使用します。
原点レイヤーに指定すると、SpriteStudio に反映させた際、原点レイヤーの画像の中央が原点になります。（原点の座標情報のみが反映されるため、画像は出力されません）

PhotoShop
(Ps)PSDtoSS_GeneratePivotLayer.jsx
Illustrator
(Ai)PSDtoSS_GeneratePivotLayer.jsx

機能
- 原点レイヤー自動作成機能
  このスクリプトを実行すると、既存の全レイヤーに対して、先頭に「+」の付いたレイヤーを自動生成します。
  ※原点レイヤーが既に存在するレイヤーに対しては生成されません。
  「ファイル」メニューから、スクリプト内の「PSDtoSS_GeneratePivotLayer」を実行してください。

注意点
- 重複するレイヤー名は使用できません。
  同じレイヤー名が重複しているとコンバートできません。
- レイヤー名に全角は使用できません。
- レイヤー名に「#」は使用できません。

PSDインポートダイアログ

入力ファイル	インポートするPSDファイルか、PSDtoSSスクリプトで出力した情報ファイル(.ss-psdtoss-info)を指定します。右隣のボタンを押すとファイルダイアログから指定できます。
出力フォルダ選択	インポートしたファイルの出力先フォルダを設定します。「新規プロジェクトの作成」のチェックが入っていない場合は現在のプロジェクトに追加されるため指定することはできません。右隣のボタンを押すとフォルダアイアログから選択できます。
出力ファイル名	出力するファイル名を指定できます。この名前はssce, ssae, sspj のファイル名に使われます。
新規プロジェクトの作成	新たにsspjファイルを作成します。
ssaeファイル(Setupデータ)を作成	ssae ファイルを新規作成し、Setupデータにレイヤーを参照するパーツを作成します。 ssae ファイルが既存の場合、上書きされるため注意してください。
上書き確認	チェックをいれると、上書きが発生する場合、事前に確認のダイアログが表示されます。
テクスチャサイズ	テクスチャの縦と横のサイズを指定します自動,256,512,1024,2048,4096,8192 から、出力する画像の横幅を選択します。また、手動で任意のサイズを入力し、設定する事ができます。自動を選択すると、2のべき乗から最適なサイズを決定してテクスチャ幅を設定します。
セル配置順	セルマップ用のテクスチャ画像を作成する際に、パーツをどのように詰めていくかを、４パターンの中から選択します。レイヤー名レイヤー名のアルファベット順にパーツを詰めていきます。面積レイヤーの面積が大きいものからパーツを詰めていきます。幅レイヤーの横幅が大きいものからパーツを詰めていきます。高さレイヤーの縦幅が大きいものからパーツを詰めていきます。
セル配置間隔	指定したピクセル間隔の倍数でセル配置座標が設定されます。例えば、50と入力して出力すると、セル配置の座標間隔が50ピクセルの倍数座標になるようにセルを配置します。セルマップ縁幅と合わせて使用することでグリッドサイズに合わせてセルを詰めることが可能です。詳しくはこちらをご覧ください。
セル間余白	セルマップ用のテクスチャ画像に出力した際の、セル間の余白サイズを設定します。単位はピクセルです。例えば、50と入力して出力すると、セルとセルの間に50ピクセルの余白を作って配置を行います。
セル内余白	セルと図柄の間に余白を設定します。余白のサイズは上下左右、すべてのセルで同一です。
既存セルの原点を使用	有効にすると、出力先にある同名のssceファイルを読み込みます。続いてレイヤーと同名のセルが存在していた場合、このセルに設定された原点を使用します。また、既存のssceファイル内にPSD側にレイヤーとして存在しない（※）セルがあった場合、このセルを16×16サイズの透明セルに変更します。 ※入力したPSD内の全レイヤーを走査し、一致する名前が無いセルが透明化の対象になります。 ※Ver.7.4.0 ではこのオプションの表記が「セルマップをマージ」になっています。
原点レイヤーを適用	チェックをいれることで、原点レイヤーの機能を有効にします。原点レイヤーとはPSDファイル等でレイヤー名の先頭に「＋」を付けたレイヤーを指します。 SpriteStudio に反映させた際、原点レイヤーの画像の中央が原点となります。（原点の座標情報のみが反映されるため、画像は出力されません）
セルマップ縁幅	セルマップの縁（ふち）の幅を指定することができます。ピクセル単位で設定することができます。例えば、50と入力して出力すると、セルマップの周りに50ピクセルの余白があるセルマップを生成します。セル配置間隔と合わせて使用することでグリッドサイズに合わせてセルを詰めることが可能です。詳しくはこちらをご覧ください。
rootレイヤーを適用	「root位置設定レイヤー」の画像の中心点がSpriteStudio のレイアウトの原点にくるように各パーツを配置して出力します。「root位置設定レイヤー」とは、レイヤー名を「root」に設定したレイヤーを指します。（座標情報のみが反映されるため、画像は出力されません）
NULLパーツ追加	各パーツの親パーツにNULLパーツが挿入されます。
優先度の加算値	レイアウトにパーツを配置する際に、設定した数値の間隔で優先度アトリビュートの値を設定します。この設定により、psdのレイヤー順になるように、パーツの表示順位を設定します。
基準枠サイズ	コンバートしたファイルの基準枠のサイズを設定します。デフォルトプロジェクト設定の初期設定値で指定した基準枠のサイズに設定します。レイヤーのサイズコンバートするPSDのカンバスサイズを基準枠のサイズに設定します。
インポート	現在の設定でPSDインポートを実行します。
閉じる	「閉じる」を押下するとPSDインポートを終了します。その際に「出力フォルダ」以降の「設定」のパラメータを保存し、次回起動時にも設定が引き継がれます。

使用上の注意

テクスチャは１枚のみ生成されます。
１枚に収まらない場合はエラーとなりコンバートは行えません。
すべて透明のレイヤーは16×16サイズの透明セルとして登録されます。
PSDファイル内の非表示レイヤーはセルとして出力されません。
グレースケール画像は使用できません。
Photoshopメニュー「イメージ」の「モード」→「グレースケール」にチェックが付いている画像はコンバート時にエラーとなります。RGBカラーに設定して画像を作成してください。
PSDファイルのファイル名に全角は使用できません。
全角を使用するとコンバートに失敗する場合があります。半角英数字でファイル名は設定してください。
SpriteStudio で編集中のセルマップをPSDインポートで更新する場合は、必ず事前に該当するセルマップを保存するようにしてください。
SpriteStudio とPSDファイルで同一のファイルを同時に編集しないよう注意してください。
セル間余白+セル内余白の値が1以下のとき、色漏れが発生する可能性があります。
（出力ログの冒頭に「セル間余白+セル内余白が1以下に指定されている場合、色もれが発生する可能性があります」と表示されます）

PSDインポートとPSDtoSS6の呼称の違い

PSDインポート実装の際、オプションの表示名を一部変更いたしました。以下のように読み替えてください。

PSDtoSS の呼称	PSDインポートの呼称
sspj出力	新規プロジェクトを作成
ssae出力	ssaeファイル(Setupデータ)を作成
テクスチャ幅、テクスチャ高さ	テクスチャサイズ
ssce読み込み	既存セルの原点を使用
優先度設定	優先度の加算値
親NULLパーツ追加	NULLパーツを追加