游戲觀察6月16日消息，在游戲的設計過程中，對于UI的需求極為迫切，通常UI界面幾乎在游戲的每個畫面中都需要運用到，這就產生了很多設計素材。如何將大量的素材進行轉化就顯得很有必要，這可以迅速提升工作效率。下面我們就來了解一下通過程序將PSD快速轉化為UI界面的方法。
文/谷主
如何提高游戲界面開發效率，是業界不斷探討的一個問題。傳統制作模式(美術出圖，程序員在Unity里拼界面)需要占用大量的程序員時間用于簡單的拼界面工作，所以程序員也開動腦筋制作了很多輔助工具，例如將美術的PSD源文件直接轉化為UI界面的預制。我們可以在網上查找到不少針對NGUI或UGUI的PSD2UI方案，而今天我給大家介紹的是應用于另外一款越來越流行的UI引擎FairyGUI的PSD2UI方案。
事實上，如果你使用FairyGUI作為你的UI解決方案，得益于強大的FairyGUI編輯器，程序員已經不再需要在Unity里拼界面，取而代之的是，策劃、美術也可以拼出質量高，直接能用的界面。所以對于FairyGUI來說，PSD2UI的方案反而有點繁瑣。無論如何，需求總是復雜的，有總比沒有好，而且用作第一次的自動生成，還是能提高一定效率的。
安裝
這個工具的名稱叫psd2fgui，它是一個nodejs的應用。所以安裝方式很簡單，在命令行模式下運行：
等待安裝完成即可。如果你的系統里還沒有node的環境，那需要先從Node.js官網下載安裝。
安裝完成后，我們就可以直接使用psd2fgui命令了。
準備PSD文件
如上圖所示，使用圖層名稱或組名稱來表達它的類型和用途。以下是約定的細節：
按鈕 組(注意，一定是組)的名稱以Button開始表示這個組是一個按鈕。組內的層如果名稱中含有下面定義的特殊字符串(注意是包含即可，不是相同。推薦作為后綴)，表示這個圖層的特別含義：
@up 這個圖層只在按鈕的up狀態顯示
@over 這個圖層只在按鈕的over狀態顯示
@down 這個圖層只在按鈕的down狀態顯示
@selectedOver 這個圖層只在按鈕的selectedOver狀態顯示
@title 文字用作按鈕的標題
@icon 圖片用作按鈕的圖標
組件 組的名稱以Com開始表示這個組是一個組件。組件可以嵌套。
執行轉換
如果成功轉換，輸出為：
使用FairyGUI編輯器，主菜單->資源->導入資源包，然后選擇剛生成的test.fairypackage，顯示如下界面：
在下方選擇要導入的位置，可以導入到一個新包，也可以導入到當前的包指定的目錄。
以下是導入的結果：
然后UI制作人員可以開始在FairyGUI編輯器進行界面的其它調整。
高級選項
psd2fgui還提供了一些開關調整轉換的細節。
--nopack 不生成fairypackage。所有文件直接輸出到一個文件夾中。
--ignore-font 不使用PSD源文件中文本指定的字體名稱。文本的字體均保持空白，這樣在編輯器中可以應用默認字體。
#buildId buildId是一個不少于12位的僅包含數字和小寫字母的字符串。用于標識每次轉換過程。使用相同的buildId，則多次轉換后相同名稱的資源的id不變。
例如：
定制
目前對于PSD里結構的約定，未必能符合每個人項目的需求。遇到這種情況，可以自行修改psd2fgui的源碼進行定制。源碼托管在https://github.com/fairygui/psd2fgui，記得打星支持喔。
