PSDtoSS(Version 1.0.8)

本ページはVer.1.0.8について解説しています。
Ver.1.1.0の解説、ダウンロードにつきましてはこちらをご覧ください。

PSDtoSS_01

「PSDtoSS」はPSDで作成されたイラストから自動でセルマップを作成し、SpriteStudioで読み込みができるようコンバートする便利なツールです。

作成したイラストのセルマップ化～レイアウトを自動で行うため、大幅に作業を短縮することができます。

PSDtoSS_02

PSDtoSSを利用するメリット

PSDtoSSを利用することで、さまざまなメリットがあります。

作業手順の短縮

冒頭にも書いた通り、PSDtoSSを活用すると大幅に作業手順を短縮することができます。

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

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

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

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

PSDtoSSは、パーツをギュウギュウに詰め込むため、画像容量やssce(セルマップファイル)の容量を削減することができます。
パーツ間の余白も自由に設定できるので、PVRTCやETCのように、近接ピクセル同士で圧縮結果に影響するような圧縮テクスチャの使用にも対応することが可能です。

解説動画

PSDtoSSの使い方

ここでは、PSDtoSSの基本的な使い方を解説します。

事前準備

PSDtoSSを利用を使用するにあたり、事前に準備を行います。

PSDtoSSを利用のダウンロード

まず、GitHubのこちらからダウンロードしてください。
「PSDtoSS.zip」を無事ダウンロードしたら、Zipデータを解凍します。

使用している画像編集ソフトにスクリプトを組み込む

「PSDtoSS」の中に格納されている「script」フォルダの中に、スクリプトのファイルが含まれているため、これを使用している画像編集ソフトにコピーします。

PSDtoSS_04

  対象スクリプトファイル 格納場所
Windows mac
PhotoShop (Ps)PSDtoSS用png出力.jsx
(Ps)PSDtoSS用原点レイヤー作成.jsx		 C:/Program Files/Adobe/Adobe Photoshop バージョン番号 (64 Bit)/Presets/Scripts /Applications/Adobe Photoshop バージョン番号/Presets/Scripts/
Illustrator (Ai)PSDtoSS用png出力.jsx
(Ai)PSDtoSS用原点レイヤー作成.jsx		 C:/Program Files/Adobe/Adobe Illustrator バージョン番号(64 Bit)/Presets/ja_JP/スクリプト /Applications/Adobe Illustrator バージョン番号/Presets.localized/ja_JP/スクリプト
GIMP GIMPWin_PSDtoSS_PNGExport.py
※GIMP2.8以前のバージョンではPython、PyGTKのインストールが必要です		 C:/Users/ユーザー名.gimp-バージョン番号/plug-ins 未対応です

スクリプトを使用して中間データを出力

次にSpriteStudioにインポートしたいpsdをPhotoshop®で開きます。
あらかじめパーツ分けと、レイヤー名の指定を半角英数字で行います。
レイヤー名が重複してしまうとエラーが出てしまうため、ご注意ください。

psdの準備が完了次第、Photoshop®の「ファイル」メニューから「スクリプト」を選択し、「PSDtoSS用png出力」を選びます。

PSDtoSS_06

変換が終了すると、変換元のpsdが格納されているフォルダに、SpriteStudioにインポートするためのデータが出力されます。

PSDtoSS_07

「PSDtoSS GUI」でSpriteStudio用データを出力する

中間データを作成したら、「PSDtoSS GUI」を開き、SpriteStudio用のデータを出力します。

「PSDtoSS」のフォルダ内の「PSDtoSSGUI.exe」を起動します。

PSDtoSS_12
起動すると、ウィンドウが立ち上がります。

PSDtoSS_08

先ほどのScriptで生成したフォルダ内の「テキストファイル(.txt)」を、「コンバートファイル」へドロップします。
出力先やテクスチャサイズなど、必要な項目を設定した後、「コンバート開始」ボタンを押してスタートさせます。
PSDtoSS_13スクリプトで出力した中間データに「.txt」ファイルが含まれているので

PSDtoSS_09

それをPSDtoSS GUIの「コンバートファイル」にドラッグアンドドロップし、「コンバート開始」を押下するとコンバートを開始します。

コンバートに成功すると、ssceと参照イメージが自動生成されます。
また「ssaeを出力する」「sspjを出力する」にチェックを入れると、指定したファイルも併せて自動生成されます。

PSDtoSS_10

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

PSDtoSS_11

これでPSDtoSSを利用したSpriteStudio用データの作成は完了です。
画像編集ソフトで作成したデータに基づき、レイアウト、セル登録が完了しているため
アニメーションを編集していくところから作業を開始できます。

ユーザーガイド

ここではスクリプトやGUIの各種機能について説明しております。

PSDtoSS スクリプト

PSDtoSSには「png」を出力するスクリプトと、「原点レイヤー」を作成するスクリプトの2種類が格納されています。

PSDtoSS用png出力

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

  • PhotoShop
    (Ps)PSDtoSS用png出力.jsx
  • Illustrator
    (Ai)PSDtoSS用png出力.jsx
  • GIMP
    GIMPWin_PSDtoSS_PNGExport.py
  • 機能
    • コンバート用データ出力
      psdを、レイヤー別のpng画像と、SpriteStudio用データ生成に必要な情報を記載したテキストデータとして出力します。
    • セル出力制御
      レイヤー名の先頭に「@」を付ける事でpngの出力を行わないようにする事ができます。
      作業用のレイヤーなど、セルに反映させたくないレイヤーにご活用ください。
    • 原点レイヤー機能

      レイヤー名の先頭に「+」をつけると「原点レイヤー」となります。原点レイヤーに指定すると、SpriteStudioに反映させた際、原点レイヤーの画像の中央が原点となります。（原点の座標情報のみが反映されるため、画像は出力されません）

      例えば、「head」と「+head」というレイヤー名を設定した場合
      「+head」レイヤーの画像の中央が「head」セルの原点に設定され、配置されます。
      この機能を活用することで、psd上で原点を指定できるので、画像のサイズが変わった際に原点がずれてしまうことを防ぐことができます。

      本機能は、コンバータ上で「セルの原点に先頭に「+」の付いた同名レイヤーの中心点を適用する」にチェックをいれることで有効となります。

    • レイヤーグループ機能
      基本的にレイヤーひとつひとつをパーツとして扱い、切り出していきますが、レイヤーがグループになっている場合は、グループ内のレイヤーをひとつのパーツとして出力します。
      レイヤーと同様に、レイヤーグループも名前の先頭に「@」を付けるとそのグループは出力されません。
    • Generator対応
      レイヤー名に「.」が使用されていた場合、セルに変換する際に「_」に置換を行います。
      PhotoshopのGenerator機能を使用していた場合、レイヤー名に「.」が使用されますが、SpriteStudioはセル名に「.」を使用できないため、「_」に置換します。
    • rootパーツ位置設定機能
      レイヤー名に「root」をつけると「root位置設定レイヤー」となります。
      「root位置設定レイヤー」の画像の中心点がSpriteStudioのレイアウトの原点にくるように各パーツを配置して出力します。

      本機能を使用する際はコンバートをする際に「「root」レイヤーの中心点がレイアウトの原点になるようにパーツを配置する」にチェックをいれて有効にする必要があります。

  • 使用上の注意
    • psdのファイル名に全角を使用することはできません。
      SpriteStudio用のデータにした際に、正常に動作しない場合があります。
    • レイヤー名に全角を使用することはできません。
    • 重複するレイヤー名を使用することはできません。
      同じレイヤー名が重複しているとコンバートできません。
    • レイヤー名に「#」は使用できません。
    • キャンバス外の部分を出力する場合は、上下左右に同じ幅キャンバスを広げて出力してください。
    • GIMPでは日本語が含まれるパスに画像がある場合、スクリプトが動作しません。

PSDtoSS用原点レイヤー作成

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

  • PhotoShop
    (Ps)PSDtoSS用原点レイヤー作成.jsx
  • Illustrator
    (Ai)PSDtoSS用原点レイヤー作成.jsx
  • GIMP
    このスクリプトはGIMP非対応です。
  • 機能
    • 原点レイヤー自動作成機能
      PSDtoSSの付属のスクリプトを実行する事で、先頭に「+」の付いたレイヤーを自動生成する事ができます。

      Photoshop®のファイルメニューから、スクリプト内の「PSDtoSS用原点レイヤー作成」を実行が可能です。

      スクリプトを使用する前に、原点レイヤーが存在するレイヤーに関しては、原点レイヤーの生成を行いません。

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

PSDtoSSGUI.exe

PSDtoSS_01コンバート用データを読み込んでSpriteStudio用データを出力します。

  • 機能
    • SpriteStudio用データ出力
      コンバート用データのテキストデータをセットして、コンバートを行うことでSpriteStudio用データを指定フォルダへ出力します。
    • 原点引き継ぎ機能
      コンバートを開始する際に、出力フォルダの中に、出力するssceと同名のssceがある場合、データの読み込みを行います。
      また、コンバートを行うテキスト内に、同名のレイヤーが存在した場合、読み込んだ原点情報を使用して出力を行います。
      存在しない場合、原点はセルの中央に設定されます。
      読み込みを回避したい場合、事前に出力フォルダを変更するか、該当するssceを削除してください。
    • 削除したレイヤーの引き継ぎ機能
      出力フォルダに、出力するssceと同名のssceがある場合は、データ読み込みを行います。
      読み込みを行ったssce内でセル名には存在するものの、コンバート用に読み込んだデータ内に同名のセルが存在しない場合、2×2のサイズの透明セルとして処理を行います。
    • 基準枠の設定
      コンバートしたssaeの基準枠はpsdのサイズを元に、偶数にするように調整を行います。
      例えば、1439×1496のpsd画像をコンバートした場合、偶数にするために切り捨てを行い、基準枠は1438×1496となります。
  • 使用上の注意
    • テクスチャは１枚のみ生成されます。
      １枚に収まらない場合はエラーとなりコンバートは行えません。
    • すべて透明のレイヤーは2×2の透明度セルとして登録されます。
    • グレースケール画像は使用できません。
      Photoshopメニュー「イメージ」の「モード」→「グレースケール」にチェックが付いている画像はコンバート時にエラーとなります。RGBカラーに設定して画像を作成してください。
    • psdのファイル名に全角は使用できません。
      全角を使用するとコンバートに失敗する場合があります。半角英数字でファイル名は設定してください。

PSDtoSSのウィンドウについて

PSDtoSS_08

コンバートファイル この欄にスクリプトを使って生成したコンバート情報ファイル（txt形式）をドロップすることで、ssceにコンバートを行うファイルを設定することができます。
リストの保存

コンバートファイルにドロップしているファイルの一覧を、「リスト」としてtxt形式のファイルに保存します。

例えば、キャラクターのアニメを複数作成したい場合、複数のファイルをコンバートする必要がありますが、修正が発生した場合、何度もコンバート情報ファイルをドロップする手間が発生します。
ですが、リストとして保存することで、コンバート情報ファイルをひとつひとつドロップする手間がなくなるため、便利です。
リストの読み込み 「リストの保存」で保存した、コンバート情報ファイルのリストを読み込み、コンバートファイルに設定します。
リストクリア コンバートファイルの設定をクリアします。
出力フォルダ選択 SpriteStudioの形式にコンバートしたファイルの出力先フォルダを設定します。
設定したフォルダは「出力フォルダ」欄に表示されます。
テクスチャの幅

256,512,1024,2048,4096 から、出力する画像の横幅を選択します。
また、手動で任意のサイズを入力し、設定する事ができます。
テクスチャの高さ 256,512,1024,2048,4096 から、出力する画像の縦幅を選択します。
また、手動で任意のサイズを入力し、設定する事ができます。
パーツ間の余白 セルマップ用のテクスチャ画像に出力した際の、パーツ間の余白サイズを設定します。
単位はピクセルです。
パーツ画像詰め順設定機能

セルマップ用のテクスチャ画像を作成する際に、パーツをどのように詰めていくかを、４パターンの中から選択します。
初期設定は「Width*Height」です。

  • name
    パーツ名のアルファベット順にパーツを詰めていきます。
  • Width*Height
    パーツの面積が大きいほうからパーツを詰めていきます。
  • Width
    パーツの横幅が大きいほうからパーツを詰めていきます。
  • Height
    パーツの縦幅が大きい方からパーツを詰めていきます。
優先度間隔(0=設定なし)

レイアウトにパーツを配置する際に、設定した数値の間隔で優先度アトリビュートの値を設定します。
この設定により、psdのレイヤー順になるように、パーツの表示順位を設定します。
セルの原点に先頭に「＋」の追加同名レイヤーの中心点を適用する

チェックをいれることで、原点レイヤーの機能を有効にします。

原点レイヤーとはpsd等でレイヤー名の先頭に「＋」を付けたレイヤーを指します。
SpriteStudioに反映させた際、原点レイヤーの画像の中央が原点となります。（原点の座標情報のみが反映されるため、画像は出力されません）
「root」レイヤーの中心点がレイアウトの原点になるようにパーツを配置する

この機能を有効にしてコンバートすると、「root位置設定レイヤー」の画像の中心点がSpriteStudioのレイアウトの原点にくるように各パーツを配置して出力します。

「root位置設定レイヤー」とは、レイヤー名を「root」に設定したレイヤーです。（座標情報のみが反映されるため、画像は出力されません）
各レイヤーの親にNULLパーツ追加する コンバートの際に、各パーツの親にNULLパーツが作成されます。
ssaeを出力する

チェックを入れると、コンバートを行った際にssaeが作成されます。

すでに同名のssaeが存在している場合、「sspj、ssaeファイルを上書き保存する」もチェックを入れ、設定を有効にすると、上書き保存を行います。
sspjを出力する

チェックを入れると、コンバートを行った際にsspjが作成されます

すでに同名のsspjが存在している場合、「sspj、ssaeファイルを上書き保存する」もチェックを入れ、設定を有効にすると、上書き保存を行います。
sspj、ssaeファイルを上書き保存する sspj、ssaeを出力するように設定している場合、この項目にもチェックを入れて有効にすることで、出力の際に同名のファイルに対し、上書き保存を行います。
終了

「終了」を押下するとPSDtoSS GUIを終了します。
その際に「出力フォルダ」以降の「設定」のパラメータを保存し、次回起動時にも設定が引き継がれます。


設定を初期化する場合は、PSDtoSS GUIが保存されているフォルダにある「config」というファイルを削除してください。

 

Published : Edit : OPTPiX User Support