1.流程演示
1）在Photoshop中解析Psd文件，生成圖層圖片，Psd結(jié)構(gòu)信息Json文件以及資源列表Xml文件。2）在Unity中生成面板資源圖集和面板Prefab。
2.設(shè)計(jì)初心
在游戲開(kāi)發(fā)過(guò)程中界面系統(tǒng)需求變化頻繁，牽涉到人員最多，從項(xiàng)目長(zhǎng)期各系統(tǒng)開(kāi)發(fā)、維護(hù)所占時(shí)間統(tǒng)計(jì)來(lái)看，界面系統(tǒng)所占時(shí)間是最多的。界面系統(tǒng)開(kāi)發(fā)中界面資源的制作過(guò)程中存在兩大糟點(diǎn)：1）開(kāi)發(fā)人員根據(jù)美術(shù)的設(shè)計(jì)在Unity中通過(guò)對(duì)坐標(biāo)、調(diào)顏色等操作復(fù)現(xiàn)美術(shù)的設(shè)計(jì)，這步存在大量的沒(méi)有技術(shù)含量的機(jī)械性勞動(dòng)。2）當(dāng)?shù)?步中開(kāi)發(fā)人員實(shí)現(xiàn)的效果和美術(shù)設(shè)計(jì)存在偏差時(shí)，必然需要美術(shù)和開(kāi)發(fā)的溝通，并且解決存在的偏差，這步帶來(lái)溝通成本。這兩步效率低，影響了游戲的開(kāi)發(fā)效率，甚至影響游戲品質(zhì)。筆者通過(guò)學(xué)習(xí)、總結(jié)，開(kāi)發(fā)出這個(gè)從Psd文件直接生成Unity中Prefab資源的流程，該流程可以高保真的在Unity中復(fù)現(xiàn)美術(shù)設(shè)計(jì)，減少溝通，提高游戲整體研發(fā)效率。
3.GUI開(kāi)發(fā)本質(zhì)
要理解PSD4UGUI流程，首先需要充分理解GUI開(kāi)發(fā)本質(zhì)。GUI開(kāi)發(fā)可以分成3步：1）設(shè)計(jì)階段（Design）。2）結(jié)構(gòu)化（Structuring）。3）綁定（Binding）。設(shè)計(jì)是指根據(jù)業(yè)務(wù)需求實(shí)現(xiàn)面板的視覺(jué)效果。結(jié)構(gòu)化是指將設(shè)計(jì)好的面板劃分功能單元，比如哪里是一個(gè)容器，哪里是一個(gè)按鈕。綁定是指根據(jù)業(yè)務(wù)需求編寫(xiě)邏輯代碼使界面元素產(chǎn)生各種交互。其中設(shè)計(jì)無(wú)疑是由美術(shù)完成，綁定無(wú)疑是由開(kāi)發(fā)完成。結(jié)構(gòu)化是GUI開(kāi)發(fā)過(guò)程中在Unity中復(fù)現(xiàn)美術(shù)設(shè)計(jì)的一步，是效率比較低的一步。現(xiàn)有的一些解決方案：1）手動(dòng)拼界面，開(kāi)發(fā)手動(dòng)將Psd文件中圖層輸出，導(dǎo)入到Unity中，通過(guò)對(duì)坐標(biāo)、調(diào)顏色等操作復(fù)現(xiàn)美術(shù)設(shè)計(jì)。這個(gè)方法效率低，容易出現(xiàn)位置或顏色偏差，且開(kāi)發(fā)人員不愿意做這種低效的操作。2）使用界面編輯工具，這個(gè)方法需要開(kāi)發(fā)、維護(hù)界面編輯工具，這可能需要大量的額外工作，工具的體驗(yàn)是否能做好，相關(guān)人員是否愿意使用都是問(wèn)題。3）專(zhuān)人拼界面，因?yàn)椴煌藛T的思維方式差異，這種方法會(huì)引入額外的溝通環(huán)節(jié)，降低工作效率，并且可能成為流程上的瓶頸。結(jié)構(gòu)化是劃分界面上功能單元的過(guò)程，劃分功能單元的過(guò)程其實(shí)是開(kāi)發(fā)對(duì)界面功能抽象-分解的過(guò)程，是連接綁定的重要步驟，所以結(jié)構(gòu)化的工作本質(zhì)上應(yīng)該由開(kāi)發(fā)完成。
4.PSD4UGUI流程簡(jiǎn)介
PSD4UGUI流程中將Photoshop作為界面編輯器，在Psd文件中通過(guò)調(diào)整圖層的結(jié)構(gòu)和名稱(chēng)來(lái)完成結(jié)構(gòu)化的工作。
如圖所示，使用圖層名稱(chēng)表示組件的類(lèi)型、名稱(chēng)以及參數(shù)，如Button_arrane_shrink，其中Button是類(lèi)型，arrane是實(shí)例名，shrink是參數(shù)，這些字段在圖層名稱(chēng)中使用“_”分割，同時(shí)也支持多參數(shù)。使用圖層結(jié)構(gòu)表示組件的相互包含關(guān)系，在圖上紅框中名為btnContainer的Container組件包含有名為arrane、polish、divide的3個(gè)Button組件，其中arrane的Button組件中包含有名為label的Label組件，名為image的Image組件。其中圖片（Image）和文本（Label）為原子組件，其他組件都是復(fù)合組件，復(fù)合組件有其他組件組合而成，如按鈕（Button），容器（Container）等組件。
5.PSD4UGUI流程優(yōu)勢(shì)
在游戲業(yè)務(wù)情境（Context）下，提供了一種使美術(shù)人員在設(shè)計(jì)階段就可以完成絕大部分結(jié)構(gòu)化工作的方法。游戲界面業(yè)務(wù)系統(tǒng)的特點(diǎn)：1）界面組件類(lèi)型少。2）界面組件重用度高。美術(shù)在創(chuàng)建、設(shè)計(jì)游戲界面的時(shí)候存在著資源重用庫(kù)，通過(guò)簡(jiǎn)單的復(fù)制、粘貼重用庫(kù)資源，就可以完成界面設(shè)計(jì)。在美術(shù)和開(kāi)發(fā)配合過(guò)程中，開(kāi)發(fā)將美術(shù)資源重用庫(kù)結(jié)構(gòu)化弄好，美術(shù)制作的時(shí)候通過(guò)從資源重用庫(kù)中完整的復(fù)制、粘貼結(jié)構(gòu)化好的組件來(lái)創(chuàng)建新面板，這樣一來(lái)，在設(shè)計(jì)階段即可完成大部分結(jié)構(gòu)化工作。這樣開(kāi)發(fā)拿到美術(shù)完成設(shè)計(jì)的Psd文件后只要進(jìn)行少量的圖層結(jié)構(gòu)、名稱(chēng)調(diào)整工作即可快速的完成整個(gè)界面的結(jié)構(gòu)化工作。
6.PSD4UGUI流程技術(shù)細(xì)節(jié)
1）Psd文件解析腳本：使用Photoshop ActionManager接口編寫(xiě)的Jsx腳本可以快速的解析Psd文件，解析生成Json、圖層圖片及資源列表Xml文件。
2）Unity中生成圖集和Prefab工具：根據(jù)Psd文件解析生成的圖片資源和Json信息自動(dòng)生成圖集和Prefab，其中Prefab的結(jié)構(gòu)和Psd中的結(jié)構(gòu)一致。
3）根據(jù)游戲業(yè)務(wù)定制的基礎(chǔ)組件庫(kù)。如在游戲業(yè)務(wù)中常見(jiàn)但是UGUI庫(kù)中不存在的列表（List）組件。
7.PSD4UGUI技術(shù)優(yōu)勢(shì)。
1）封裝，提供常用的業(yè)務(wù)組件，封裝圖集制作，公共圖集管理等底層細(xì)節(jié)，使開(kāi)發(fā)只需專(zhuān)注上層業(yè)務(wù)，提高游戲開(kāi)發(fā)效率。
2）內(nèi)存，整合以下機(jī)制可以減少游戲內(nèi)存使用量。a.圖集Alpha通道分離，b.便利的公共圖集制作、管理、調(diào)整流程，c.局部圖集合并設(shè)置，d.通過(guò)圖片變色、鏡像翻轉(zhuǎn)、旋轉(zhuǎn)等方式減少圖片使用量，e.通過(guò)設(shè)定參數(shù)即可自動(dòng)生成九宮圖片，優(yōu)化九宮圖片面積，f.通過(guò)分割圖片來(lái)優(yōu)化生成的圖集面積，g.通過(guò)設(shè)置圖片輸出縮放參數(shù)，可以方便的取得圖集面積和顯示效果的平衡。h.剔除圖片低透明度區(qū)域，減少圖集面積。
3）CPU，通過(guò)hide，deferred等參數(shù)可以在創(chuàng)建Prefab時(shí)隱藏界面上的元素，減少界面加載進(jìn)游戲時(shí)的SetActive和AddComponent的調(diào)用次數(shù)，延遲初始化相關(guān)元素，可以優(yōu)化界面首次打開(kāi)時(shí)的卡頓感。
4）GPU，通過(guò)剔除圖片的低透明區(qū)域，可以減少Overdraw，提高渲染效率。
5）換皮，在游戲開(kāi)發(fā)中界面整體換風(fēng)格比較常見(jiàn)，在PSD4UGUI中只需美術(shù)修改Psd中資源并保持結(jié)構(gòu)不變，重新生成圖集和Prefab即可完成。提供PsdDiff工具檢查前后結(jié)構(gòu)是否一致。
8.PSD4GUI在多語(yǔ)言版本制作中的優(yōu)勢(shì)
多語(yǔ)言制作過(guò)程中界面相關(guān)的調(diào)整工作主要包括兩部分：1）文字配置，2）圖片化文字。傳統(tǒng)做法中文字配置通常通過(guò)在代碼中讀取文字的配置id來(lái)實(shí)現(xiàn)，這個(gè)過(guò)程需要在邏輯代碼中寫(xiě)相關(guān)代碼，有額外的工作量，不同語(yǔ)言表達(dá)相同意思時(shí)字符的長(zhǎng)度可能不一樣，解決不同長(zhǎng)度文本長(zhǎng)度兼容性問(wèn)題比較麻煩。圖片化文字，傳統(tǒng)做法將圖片調(diào)整為動(dòng)態(tài)加載，游戲運(yùn)行時(shí)根據(jù)不同的語(yǔ)言設(shè)置加載不同語(yǔ)言的資源，修改成外部加載需要額外的工作量，維護(hù)圖集也有額外的工作量。本質(zhì)上傳統(tǒng)的做法是一套資源兼容不同的語(yǔ)言，兼容的過(guò)程必然存在妥協(xié)，某些時(shí)候會(huì)犧牲產(chǎn)品的品質(zhì)。并且這種做法對(duì)開(kāi)發(fā)強(qiáng)依賴，可能形成流程上的瓶頸，拖累游戲的研發(fā)整體進(jìn)度。
PSD4UGUI流程中通過(guò)在Psd中配置文本內(nèi)容id參數(shù)即可完成文本配置過(guò)程。
通過(guò)多語(yǔ)言標(biāo)簽，隔離不同語(yǔ)言版本的資源。生成圖集和Prefab時(shí)根據(jù)語(yǔ)言設(shè)置生成不同語(yǔ)言版本的圖集和Prefab資源。PSD4UGUI流程本質(zhì)上為不同語(yǔ)言生成不同版本的資源，從根本上就不存在兼容性的問(wèn)題了，并且所有操作都集中在Psd文件中，策劃、美術(shù)人員也可以很方便的參與多語(yǔ)言版本開(kāi)發(fā)過(guò)程，使多語(yǔ)言版本開(kāi)發(fā)流程對(duì)開(kāi)發(fā)弱依賴，有利于提高工作效率。
9.劣勢(shì)
1）條條框框較多，有一定的學(xué)習(xí)成本，其中開(kāi)發(fā)人員理解GUI開(kāi)發(fā)本質(zhì)，開(kāi)發(fā)人員應(yīng)該在流程中起主導(dǎo)角色是關(guān)鍵。2）開(kāi)發(fā)人員對(duì)Photoshop的抗拒心理。
