PSD導入Unity

需求分析

美術在PhotoShop裡面作圖，完成一個面板之後，要把面板裡面的每張圖片分別裁剪後存儲下來，然後在Unity的場景裡面一個一個創建GUI組件，再將之前保存的圖片找出來關聯到對應的GUI組件，調整會原先的位置，完成整個面板之後再保存為prefab。

這個過程及其繁瑣，以至於在優化之前，拼界面的工作，從美術組推託到策劃組，推託到客戶端程序組。

在這個過程中，當美術在PhotoShop中完成面板作圖，其實已經提供了完成面板的所有信息（包括美術資源和節點結構），但Unity無法直接使用，這便是可以優化的環節。

優化方案

優化思路可以分成兩個大的步驟：

一是保存psd文件的全部信息。具體方案：

1. 將psd中的每個圖層保存成圖片。

2. 將psd中的節點結構信息保存成xml文件。

二是讀取保存的信息，生成prefab或GUI。具體方案：

1. 在unity編輯器Editor中，準備代碼。

2. 讀取xml文件，根據xml記錄的信息，在場景中生成GUI。

3. 將GUI保存為prefab。

優化後的操作將是：

1. 運行一個psd腳本。這個腳本將生成一些圖片和一個xml文件。

2. 在unity編輯中執行一個命令。這個命令將依附於xml，並在場景中生成GUI。

3. 將Hierarchy視窗里的GUI拖拽到Project視窗，保存為prefab。

xml記錄的內容

1. xml最基礎的節點/最小的單位，應該記錄圖片的名稱、位置、大小。

2. 另外，我們通常有這樣的需求，重複的圖片只保存一份，這樣，就需要用一個屬性來記錄這個圖片關聯的資源在哪個文件夾中。可以枚舉出來，要麼在面板圖集中，要麼在公用圖集中。或者，也可以將圖片名稱與資源名稱分開保存。這些信息要全部源自於圖層的名字，為此，可以定製一些圖層名字字元串中的標籤。

3. 進一步讓腳本更加智能化，可以再在圖層名字字元串中定製一些標籤，來對應unity中的prefab預製體或者GUI組件。比如，若psd文件中，圖層文件夾名字中包含@Button字元串，文件夾下面的兩個圖像圖層的名稱分別帶有_normal和_pressed標籤；則在xml中創建一個節點，此節點包含一個ComponentType屬性，值為Button，它下面有兩個節點，這兩個節點的type屬性值分別為Normal和Pressed；在unity中執行命令時，遇到ComponentType為Button的節點，則創建一個包含(Image組件和)Button組件的預製體，並將其normal狀態和Pressed狀態關聯到兩個子節點記錄的圖片。

PhotoShop腳本

像Adobe Flash支持jsfl腳本一樣，Adobe PhotoShop也支持一些腳本。

PhotoShop腳本(Photoshop Scripting)支持三種腳本編程語言：Mac平台上的Apple Script腳本、Windows平台上的Visual Basic Script腳本、跨平台的JavaScript腳本。

官網API地址：JAVASCRIPT SCRIPTING REFERENCE

https://wwwimages2.adobe.com/content/dam/acom/en/devnet/photoshop/scripting/Photoshop-CS6-JavaScript-Ref.pdf

這篇文章將使用跨平台的JavaScript腳本。

For a JavaScript file to be recognized by Photoshop as a valid script file, it must use either a .js or a .jsx extension. On the Mac OS, there is no difference in the way scripts with the two extensions function. On Windows, if the script files is opened from inside Photoshop, there is no difference between using the .js and .jsx extension. However, if the script is launched by double-clicking on it, a script with the .js extension is interpreted with the Microsoft JScript engine, and it cannot launch Adobe Photoshop CS6. For Windows, using the .jsx extension is preferrable, since it interprets the script with the ExtendScript engine.

這篇文章將使用Adobe推薦的jsx的擴展名。可在Adobe PhotoShop的File>Scripts下選擇腳本執行，也可使用Adobe ExtendScript打開腳本編譯執行。

在網路上搜索PSD2UGUI/PSD4UGUI/ExportPSDUI，可以收穫不少免費的腳本。

但，真正投入使用，當然是要適當修改代碼，去適配不同產品的需求。

後文記錄的是我在使用PS腳本語言遇到的一些問題。

文件與文件夾操作

ExtendScript defines the JavaScript classes File and Folder to encapsulate file-system references in a platform-independent manner.

文件與文件夾的操作可以查看JAVASCRIPT TOOLS GUIDE。

官網API地址：JAVASCRIPT TOOLS GUIDE

https://wwwimages2.adobe.com/content/dam/acom/en/devnet/scripting/estk/javascript_tools_guide.pdf

Folder

//創建文件夾

var destinationFolder = Folder(saveDir + "/" + panelName);

destinationFolder.create();

//刪除文件夾

if (destinationFolder.exists)

{

//只能刪除空文件夾

destinationFolder.remove();

}

另外，注意下面這兩項的區別

Folder ([path]); //can return a File object

new Folder ([path]); //always returns a Folder object

File

var panelFile = new File(destinationFolder + "/" + panelName + ".xml");

panelFile.encoding = "utf-8";

panelFile.open("w");

panelFile.writeln(fileData);

panelFile.close();

Photoshop應用操作(Application)

可以直接使用預製的全局變數app，如複製Photoshop打開的當前文檔

var duppedPsd = app.activeDocument.duplicate();

其他類可以在API中查詢到，這裡不一一列舉。

文本框(TextItem)

在jsx文件中，若滿足條件：

ArtLayer.kind == LayerKind.TEXT

則該圖層為文本圖層，可通過ArtLayer.textItem拿到它相關的文本信息。

通過TextItem.font可獲取文本中字體的名稱，但，不帶字體文件的後綴名。

另外文本的字體/顏色/對齊方式，這類信息，均是指圖層的信息，若一個文本中包含有不同的字體/顏色/對齊方式，得到的結果[可能]是首字元的信息。

TextItem.justification可以獲取文本的對齊方式，但，不是所有文本。

TextItem的kind有兩種TextType：PARAGRAPHTEXT和POINTTEXT。只有PARAGRAPHTEXT類型才有justification屬性，否則運行過程會報錯。

可能Photoshop後面的版本有優化，這篇文章的開發環境是Photoshop CS6。

圖層樣式(Layer Style)

本來想將Photoshop的圖層樣式（如：描邊、外發光等）也記錄在xml中，但是查閱了API裡面ArtLayer的所有屬性，並不包含Style相關。

唯一搭邊的是，提供了一個applyStyle方法，可以設置預設的圖層樣式，比如：

theLayer.applyStyle("Double Ring Glow (Button)");

如果產品中大量使用了幾種確定的的圖層樣式方案，可以給圖層名稱添加標籤，再在unity中處理。

其他學習資料

Photoshop腳本 – 酷課堂

http://coolketang.com/tutorials/menu1lesson1.php

Adobe CEP 擴展開發教程 – 淺藏的寶藏

http://nullice.com/archives/1665#extendscript

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！