SpineにPhotoshopの日本語レイヤーをインポートする方法


はじめに

Spineが公開しているPhotoshopからレイヤーデータをエクスポートするための拡張スクリプトがありますが、日本語のレイヤーがあるとエラーになってSpine上にインポートすることができません。
せっかくSpine3.0で日本語が扱えるようになったのに・・・って感じですよね。
そこで、Photohop用の拡張スクリプトを改造して日本語レイヤーも扱えるようにしたいと思います。

どうして日本語レイヤーが使えないのか?

Spine自身は日本語にも対応したはずなのに、なぜ日本語レイヤーがインポートできないのでしょう?
不思議に思って色々調べてみると答えは簡単なことでした。
それは・・・

  『出力されるJSONファイルの文字エンコードがShiftJISだから!』

Photoshopの拡張スクリプトは何も指定していない場合、SHiftJISでデータを出力しようとします。
ところが、Spine内部ではFTF-8として読込を行うので日本語が含まれていると文字化けしてエラーになるんですね^^;

じゃぁ、どうすればいいの?

文字エンコードの違いが問題なら解決方法は簡単♪
PhotoshopからエクスポートしたJSONファイルをUTF-8に変換して保存しなおせば万事解決!
めでたしめでたし♪・・・じゃないですよねw

スクリプトを改造して日本語もサポートさせる

いちいち手動で変換してやるなんで面倒すぎ!
ということで、本題です。と言っても直ぐに終わります。
「Photoshopの拡張スクリプトは何も指定していない場合、SHiftJISでデータを出力しようとする」わけだから、UTF-8で出力しろと指定すれば済むだけの話です。

やりかたは、LayerToPNG.jsxの215行目に以下の1行を追加すればOK

  file .encoding = "UTF-8";

バージョンの違いで行番号が変わってる可能性もあるので「// Output JSON file.」というコメント探して、以下のコードのように書き換えれば大丈夫だと思います。

LayerToPNG.jsx
// Output JSON file.
if (writeJson) {
    var name = decodeURI(originalDoc.name);
    name = name.substring(0, name.indexOf("."));
    var file = new File(absProjectDir + name + ".json");
    file.remove();
    file.open("w", "TEXT");
    file .encoding = "UTF-8";   // ←ここに追加
    file.lineFeed = "\n";
    file.write(json);
    file.close();
}

この一行を追加するだけで日本語も対応完了^^v
Spineでの作業が楽になりますよ♪