前回の続きです。
それでもIllustratorを使いたい
前回はIllustratorでデザインを完成させた場合でもPhotoshopに一旦データを変換してSpine書き出しするのが良い、という内容の投稿をしました。まあ、Spine上で手動でパーツを配置するならPhotoshopは使わず、Illustrator+プラグインだけで良いわけですが、配置はPhotoshopを利用したとしても、画像の更新はIllustratorだけで行いたいので、その方法を模索してみます。
画像フォルダパスをIllustrator出力画像側に向ける
まず、単純にSpineのimagesフォルダの参照をIllustratorが書き出したpngのある場所に向けてみましょう。
画像が更新されました。が、パーツがずれちゃいましたね。IllustratorとPhotoshopの書き出すpngファイル名は同じなので、大きささえそれえてやれば、パーツデザインの微調整はIllustratorだけで済みそうです。
Photoshopで書き出し設定を調整
aiからpsdの変換時に72dpiを指定するか、(デフォルトの)144dpiでpsd変換した場合はSpineへExport時に50%書き出ししてやればおおよその大きさが合います。
おおよそ、というのはIllustrator側の書き出しは余白パディングが無く、Photoshop側では1pxの余白をつけて書き出しているので、縦横で2pxの差が出ているようです。Spineに取り込んで気にならないならそれでも良いですが、ここもぴったりあわせて作業をしてみます。Illustratorでボーダーの設定は現状できませんので、Photoshop側でパディング設定を0にして書き出します。これで両者のサイズがぴったりあいます。
念のため両者の書き出したパーツの差分を確かめるために、２枚の画像をPhotoshop"上で差の絶対値"で重ねてみます。目の周りなど、うっすらと何か見えているので(アンチエイリアスの設定の差かも？)全く同じ画像というわけではなさそうですが、大きさはぴったり合っていますし、特に問題はなさそうです。
Photoshopで書き出し直したデータをSpineで読み込み直しました。
# Illustratorでデータを更新する
Illustrator側でイラストを更新し、プラグインでpng書き出しします。
SpineのImagesフォルダをIllustratorで書き出した画像のあるフォルダに向け直します。
問題無いですね！
Illustrator上でパーツの大きさが結構変わってしまった場合は、Spine上で調整するか、再度Photoshopでの書き出しを経由して、位置を正しくしてやりましょう。。
終わりに
フィルタをつけるなりマスクをつかうなり、なにか特殊な事をしなければ"余白なし"設定で問題は出ないと思っているのですが、余白が必要になった場合は別途対応が必要ですね。
結局画像の大きさとファイル名さえ同じであれば、何の画像ツールを使っても良いわけなので、別のソフトでもこのようなテクニックを使う事はできそうです。前の投稿で書いた通り Photoshop以外のエクスポーターがましになればいいだけなのですけど。