如何提高游戲界面開發效率，是業界不斷探討的一個問題。傳統制作模式（美術出圖，程序員在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的源碼進行定制。

總結

以上是生活随笔為你收集整理的如何快速转化PSD为UI界面？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。