1.流程演示
1）在Photoshop中解析Psd文件卦尊，生成圖層圖片岂却，Psd結(jié)構(gòu)信息Json文件以及資源列表Xml文件邓线。2）在Unity中生成面板資源圖集和面板Prefab骇陈。
2.設(shè)計初心
在游戲開發(fā)過程中界面系統(tǒng)需求變化頻繁你雌，牽涉到人員最多二汛，從項目長期各系統(tǒng)開發(fā)肴颊、維護所占時間統(tǒng)計來看渣磷，界面系統(tǒng)所占時間是最多的。界面系統(tǒng)開發(fā)中界面資源的制作過程中存在兩大糟點：1）開發(fā)人員根據(jù)美術(shù)的設(shè)計在Unity中通過對坐標(biāo)竟宋、調(diào)顏色等操作復(fù)現(xiàn)美術(shù)的設(shè)計丘侠，這步存在大量的沒有技術(shù)含量的機械性勞動逐样。2）當(dāng)?shù)?步中開發(fā)人員實現(xiàn)的效果和美術(shù)設(shè)計存在偏差時脂新，必然需要美術(shù)和開發(fā)的溝通，并且解決存在的偏差担神，這步帶來溝通成本始花。這兩步效率低酷宵，影響了游戲的開發(fā)效率，甚至影響游戲品質(zhì)炕置。筆者通過學(xué)習(xí)朴摊、總結(jié)此虑，開發(fā)出這個從Psd文件直接生成Unity中Prefab資源的流程朦前，該流程可以高保真的在Unity中復(fù)現(xiàn)美術(shù)設(shè)計鹃操，減少溝通荆隘，提高游戲整體研發(fā)效率赴背。
3.GUI開發(fā)本質(zhì)
要理解PSD4UGUI流程凰荚，首先需要充分理解GUI開發(fā)本質(zhì)。GUI開發(fā)可以分成3步：1）設(shè)計階段（Design）。2）結(jié)構(gòu)化（Structuring）胳徽。3）綁定（Binding）爽彤。設(shè)計是指根據(jù)業(yè)務(wù)需求實現(xiàn)面板的視覺效果谆刨。結(jié)構(gòu)化是指將設(shè)計好的面板劃分功能單元，比如哪里是一個容器聂儒，哪里是一個按鈕衩婚。綁定是指根據(jù)業(yè)務(wù)需求編寫邏輯代碼使界面元素產(chǎn)生各種交互效斑。其中設(shè)計無疑是由美術(shù)完成缓屠，綁定無疑是由開發(fā)完成敌完。結(jié)構(gòu)化是GUI開發(fā)過程中在Unity中復(fù)現(xiàn)美術(shù)設(shè)計的一步，是效率比較低的一步弧岳。現(xiàn)有的一些解決方案：1）手動拼界面禽炬，開發(fā)手動將Psd文件中圖層輸出，導(dǎo)入到Unity中柳恐，通過對坐標(biāo)热幔、調(diào)顏色等操作復(fù)現(xiàn)美術(shù)設(shè)計绎巨。這個方法效率低，容易出現(xiàn)位置或顏色偏差戈锻，且開發(fā)人員不愿意做這種低效的操作格遭。2）使用界面編輯工具留瞳，這個方法需要開發(fā)她倘、維護界面編輯工具硬梁，這可能需要大量的額外工作，工具的體驗是否能做好开瞭，相關(guān)人員是否愿意使用都是問題罩息。3）專人拼界面嗤详，因為不同人員的思維方式差異，這種方法會引入額外的溝通環(huán)節(jié)瓷炮，降低工作效率葱色，并且可能成為流程上的瓶頸。結(jié)構(gòu)化是劃分界面上功能單元的過程娘香，劃分功能單元的過程其實是開發(fā)對界面功能抽象-分解的過程苍狰，是連接綁定的重要步驟办龄，所以結(jié)構(gòu)化的工作本質(zhì)上應(yīng)該由開發(fā)完成。
4.PSD4UGUI流程簡介
PSD4UGUI流程中將Photoshop作為界面編輯器俐填，在Psd文件中通過調(diào)整圖層的結(jié)構(gòu)和名稱來完成結(jié)構(gòu)化的工作。
如圖所示翔忽，使用圖層名稱表示組件的類型英融、名稱以及參數(shù)，如Button_arrane_shrink歇式，其中Button是類型驶悟，arrane是實例名，shrink是參數(shù)材失，這些字段在圖層名稱中使用“_”分割痕鳍，同時也支持多參數(shù)。使用圖層結(jié)構(gòu)表示組件的相互包含關(guān)系龙巨，在圖上紅框中名為btnContainer的Container組件包含有名為arrane额获、polish、divide的3個Button組件恭应，其中arrane的Button組件中包含有名為label的Label組件，名為image的Image組件耘眨。其中圖片（Image）和文本（Label）為原子組件昼榛，其他組件都是復(fù)合組件，復(fù)合組件有其他組件組合而成剔难，如按鈕（Button）胆屿，容器（Container）等組件。
5.PSD4UGUI流程優(yōu)勢
在游戲業(yè)務(wù)情境（Context）下非迹，提供了一種使美術(shù)人員在設(shè)計階段就可以完成絕大部分結(jié)構(gòu)化工作的方法。游戲界面業(yè)務(wù)系統(tǒng)的特點：1）界面組件類型少憎兽。2）界面組件重用度高吵冒。美術(shù)在創(chuàng)建、設(shè)計游戲界面的時候存在著資源重用庫亿汞，通過簡單的復(fù)制揪阿、粘貼重用庫資源咆畏，就可以完成界面設(shè)計。在美術(shù)和開發(fā)配合過程中吴裤，開發(fā)將美術(shù)資源重用庫結(jié)構(gòu)化弄好旧找，美術(shù)制作的時候通過從資源重用庫中完整的復(fù)制、粘貼結(jié)構(gòu)化好的組件來創(chuàng)建新面板嚼摩，這樣一來钦讳，在設(shè)計階段即可完成大部分結(jié)構(gòu)化工作。這樣開發(fā)拿到美術(shù)完成設(shè)計的Psd文件后只要進行少量的圖層結(jié)構(gòu)枕面、名稱調(diào)整工作即可快速的完成整個界面的結(jié)構(gòu)化工作愿卒。
6.PSD4UGUI流程技術(shù)細節(jié)
1）Psd文件解析腳本：使用Photoshop ActionManager接口編寫的Jsx腳本可以快速的解析Psd文件，解析生成Json潮秘、圖層圖片及資源列表Xml文件琼开。
2）Unity中生成圖集和Prefab工具：根據(jù)Psd文件解析生成的圖片資源和Json信息自動生成圖集和Prefab，其中Prefab的結(jié)構(gòu)和Psd中的結(jié)構(gòu)一致枕荞。
3）根據(jù)游戲業(yè)務(wù)定制的基礎(chǔ)組件庫柜候。如在游戲業(yè)務(wù)中常見但是UGUI庫中不存在的列表（List）組件。
7.PSD4UGUI技術(shù)優(yōu)勢躏精。
1）封裝渣刷，提供常用的業(yè)務(wù)組件，封裝圖集制作矗烛，公共圖集管理等底層細節(jié)，使開發(fā)只需專注上層業(yè)務(wù)碌嘀，提高游戲開發(fā)效率歪架。
2）內(nèi)存和蚪，整合以下機制可以減少游戲內(nèi)存使用量攒霹。a.圖集Alpha通道分離剔蹋，b.便利的公共圖集制作、管理洛口、調(diào)整流程凯沪，c.局部圖集合并設(shè)置妨马，d.通過圖片變色、鏡像翻轉(zhuǎn)湘纵、旋轉(zhuǎn)等方式減少圖片使用量梧喷，e.通過設(shè)定參數(shù)即可自動生成九宮圖片脖咐，優(yōu)化九宮圖片面積屁擅，f.通過分割圖片來優(yōu)化生成的圖集面積派歌，g.通過設(shè)置圖片輸出縮放參數(shù)，可以方便的取得圖集面積和顯示效果的平衡。h.剔除圖片低透明度區(qū)域稽物，減少圖集面積贝或。
3）CPU锐秦，通過hide酱床，deferred等參數(shù)可以在創(chuàng)建Prefab時隱藏界面上的元素，減少界面加載進游戲時的SetActive和AddComponent的調(diào)用次數(shù)闲昭，延遲初始化相關(guān)元素序矩，可以優(yōu)化界面首次打開時的卡頓感簸淀。
4）GPU租幕，通過剔除圖片的低透明區(qū)域令蛉，可以減少Overdraw珠叔，提高渲染效率祷安。
5）換皮兔乞，在游戲開發(fā)中界面整體換風(fēng)格比較常見庸追，在PSD4UGUI中只需美術(shù)修改Psd中資源并保持結(jié)構(gòu)不變淡溯，重新生成圖集和Prefab即可完成咱娶。提供PsdDiff工具檢查前后結(jié)構(gòu)是否一致膘侮。
8.PSD4GUI在多語言版本制作中的優(yōu)勢
多語言制作過程中界面相關(guān)的調(diào)整工作主要包括兩部分：1）文字配置，2）圖片化文字逻锐。傳統(tǒng)做法中文字配置通常通過在代碼中讀取文字的配置id來實現(xiàn)慷丽，這個過程需要在邏輯代碼中寫相關(guān)代碼要糊，有額外的工作量妆丘，不同語言表達相同意思時字符的長度可能不一樣，解決不同長度文本長度兼容性問題比較麻煩奶赠。圖片化文字毅戈，傳統(tǒng)做法將圖片調(diào)整為動態(tài)加載苇经，游戲運行時根據(jù)不同的語言設(shè)置加載不同語言的資源宦言，修改成外部加載需要額外的工作量奠旺，維護圖集也有額外的工作量响疚。本質(zhì)上傳統(tǒng)的做法是一套資源兼容不同的語言忿晕，兼容的過程必然存在妥協(xié)杏糙，某些時候會犧牲產(chǎn)品的品質(zhì)宏侍。并且這種做法對開發(fā)強依賴谅河，可能形成流程上的瓶頸，拖累游戲的研發(fā)整體進度吐限。
PSD4UGUI流程中通過在Psd中配置文本內(nèi)容id參數(shù)即可完成文本配置過程诸典。
通過多語言標(biāo)簽，隔離不同語言版本的資源肌蜻。生成圖集和Prefab時根據(jù)語言設(shè)置生成不同語言版本的圖集和Prefab資源蒋搜。PSD4UGUI流程本質(zhì)上為不同語言生成不同版本的資源判莉，從根本上就不存在兼容性的問題了骂租，并且所有操作都集中在Psd文件中渗饮，策劃互站、美術(shù)人員也可以很方便的參與多語言版本開發(fā)過程胡桃，使多語言版本開發(fā)流程對開發(fā)弱依賴翠胰，有利于提高工作效率之景。
9.劣勢
1）條條框框較多锻狗，有一定的學(xué)習(xí)成本焕参，其中開發(fā)人員理解GUI開發(fā)本質(zhì)叠纷，開發(fā)人員應(yīng)該在流程中起主導(dǎo)角色是關(guān)鍵涩嚣。2）開發(fā)人員對Photoshop的抗拒心理缓艳。
