Photoshopからユーザーインターフェイスをエクスポートする

Photoshopからユーザーインターフェイスをエクスポートする



すべてのゲーム開発者は、ユーザーインターフェイスを移動/プルする問題に直面しています。
私の友人のほとんどは、アーティストにテクスチャアトラスを作成してから、手動または組み込みツールを使用して画面に配置するように依頼します。
最も深刻な問題は、正確に画面上のこれらのオブジェクトの配置です。 画面上の位置とテクスチャ座標を持つ長方形の説明を含む.iniファイルを介して手動で配置するオプションに出会いました。 いくつかの要素があり、自由な時間がある場合、これはまったく問題ありません。


解決策


画面に要素を手動で配置するのではなく、組み込みのエディターを書く気はありません。 他の人(デザイナーやアーティスト)に自動化できる作業を依頼したり要求したりしたくありません。

その結果、自動モードでこれを行うPhotoshopのスクリプトが生まれました。
1)レイヤーコンプ(レイヤーと混同しないでください)を.png画像にエクスポートします(不透明な領域が始まるエッジに沿ってドロップします)
2)レイヤーコンプ(レイヤーと混同しないでください)を.crpファイルにエクスポートします。ここで、この画像が元の画像から切り取られた場所と方法が記述されており、次の行が含まれています。

例:
102211300380 1024768 0 0198169256256

セットアップとエクスポートのプロセス


カスタマイズされたファイル
ボタンがどのように見えるかの例
エクスポートダイアログ

スクリプトの機能




結果を使用する


次に、これらすべてにツールを設定して、どこに何が存在するかの説明を含む大きなアトラスとファイルを生成するか、そのまま使用します。そのまま使用します。
control Play
{
Type = ImageButton
Crop = PLATFORM_NEUTRAL/UI/MainMenu/Play_N.crp
ImageNormal = PLATFORM_NEUTRAL/UI/MainMenu/Play_N.png
ImageActive = PLATFORM_NEUTRAL/UI/MainMenu/Play_N.png
}


コード


コードの美しさに違いはなく、場所もまったく明確ではありません- ソース
このスクリプトは、Photoshopスクリプト#PhotoshopDir#/ Presets / Scripts / Layer Comps To Files.jsxのいずれかに基づいていました。
ファイル/スクリプト/参照を実行します

PS:コメントのおかげで、スクリプトの速度が数倍に向上しました。

Source: https://habr.com/ru/post/J135429/


All Articles