
モバイルデバイス用アプリケーションの開発者チームがあるとします。 そのようなチームには間違いなくデザイナーがいて、プログラマーは間違いなくいます。 最初に、彼らはそれぞれの仕事をします-プログラマーはプロトタイプ、メカニックを開発し、デザイナーはキー、背景のドラフトを作成します。 しかし、設計者がアプリケーションですでにそれを見るために彼の作品を転送しなければならない時が来ます。 そして、ここで困難が生じるかもしれません。
単一のメニュー画面の例でこれを考慮してください。 30〜40個のグラフィック要素を含めることができます。 これらは、キー(静的、押された)、10個のオブジェクトのアニメーション化されたロゴ、ポップアップメニュー、背景のアニメーションです。 ほとんどの場合、デザイナーは各ファイルを個別に発行し、プログラマーはそれを新しい方法で追加します。 したがって、デザイナーは数回折りたたまれたり展開したりします。 その後、設計が変更される可能性があり、すべてを新しい方法で行う必要があります。
このプロセスを可能な限り自動化する方法
ここでは、品質を損なうことなく最も便利な一連のファイルが設計者からプログラマーに届くようにするために使用するいくつかの手順を示します。
デザインのドラフトバージョンを含む
AIの最大解像度(私の場合は2048 * 1536px)
のソースファイル 。
-すべてのオブジェクトをレイヤーに分解およびグループ化します
-正しく名前を付けてください(ボタン-Btn、アイコン-アイコン、素材-アンダーレイ...)
-すべての要素の幅と高さを2pxの倍数にする
-すべての要素をXYで2pxの倍数で配置します
-各レイヤーのXY座標、その名前とシート上の位置をエクスポートします。 Illustratorはテキストファイルのエクスポート方法を知らないため、データはオブジェクトの最上位のレイヤー*テキスト*に配置されます。
XYレイヤー座標スクリプトif (app.documents.length > 0) { var doc = app.activeDocument; var x, y, t; app.coordinateSystem = CoordinateSystem.ARTBOARDCOORDINATESYSTEM; var count = doc.layers.length; var out_txt=""; for ( var i = 0; i < count; ++i) { doc.activeLayer = doc.layers[i]; doc.layers[i].hasSelectedArtwork = true; } for ( var i = 0; i < count; ++i) { x = doc.selection[i].position[0]; y = doc.selection[i].position[1]*(-1);
-各レイヤーを個別のPNG24ファイルにダブルサイズでエクスポートします。
アークティックミル-ZwoptexまたはTexture Packerを使用して、これらのファイルから4096 * 4096サイズ(または小さいが、必ずしも正方形)のアトラスを作成します。 8px画像をインデントしてください
-ベクターファイルで2pxの多重度を無視した場合に発生する透明性の問題を回避します。 幸いなことにPhotoshop
AlphaUnityのアクションがあり
ます
-アトラスを2倍減らす
-PNG8のファイルを追い越す
したがって、プログラマーは、写真の名前、座標、シート上の位置、座標と回転を含むPLISTまたはXML、最適な品質の写真のアトラス、およびプレビューを含むテキストファイルを私から受け取ります。 設計者もプログラマもこのルーチンに参加したくはないが、非常に必要な手順を実行したいということが起こりました。
このようなアクションのアルゴリズムは、初めて難しく、長くなりますが、プロジェクトのすべての参加者の生活を大幅に簡素化します。
スクリプトとアクションへのリンク。 Github