防止過度繪制、管理文本自動(dòng)縮放、應(yīng)對UI修改，Unity技術(shù)大咖現(xiàn)身說法

測試與優(yōu)化UI性能是設(shè)計(jì)與開發(fā)流程的關(guān)鍵組成部分，也是游戲成功不可或缺的一部分。

我們邀請到了Outfit7的資深軟件工程師Aleksander Gregorka、三星的開發(fā)者關(guān)系工程師S?ren Klit Lambaek，以及Unity的資深技術(shù)產(chǎn)品經(jīng)理Benoit Dupuis，與大家分享他們的經(jīng)驗(yàn)。

在第一部分的分享中，幾位嘉賓討論了UI設(shè)計(jì)過程、部分移動(dòng)設(shè)備帶來的特殊挑戰(zhàn)，及最大化游戲創(chuàng)意和心流體驗(yàn)的關(guān)鍵策略，這一次，他們繼續(xù)分享了UI的實(shí)現(xiàn)、測試、性能優(yōu)化和分析的技巧。

如果不用代碼，我們該怎樣制作用戶界面呢？

Benoit Dupuis：如果使用的是Unity UI，有幾種簡單的辦法可以建立一張帶功能的線框圖，比如用Unity Events啟用或禁用元素。它們作為可互動(dòng)的UI元素暴露于檢視器里，譬如按鈕或選框。你可以將特定GameObject添加到Unity Event，并選擇按鈕被按下時(shí)所觸發(fā)的動(dòng)作。

用ClickEvents設(shè)定對象是否啟用

這個(gè)例子模仿了啟用游戲?qū)ο蟮牧鞒?。OnClick Event將調(diào)用SetActive（true），啟用名為NewPopUp的對象，并禁用PopUp對象。

這里還有幾點(diǎn)需要記住的提示：

·觸發(fā)游戲功能的Unity Events或UI Toolkit同樣可以利用可視化編程無代碼地創(chuàng)建。

·UI Builder可與UI Toolkit一起用于實(shí)現(xiàn)UI。一般都是開發(fā)者負(fù)責(zé)將UI Toolkit的UI元素與代碼相關(guān)連。可視化創(chuàng)作工具UI Builder能讓你直觀地創(chuàng)建整個(gè)界面。這種流程的優(yōu)點(diǎn)在于設(shè)計(jì)師與程序員互不干擾，雙方的協(xié)作依賴于共通的命名約定，比如“主開始鍵”。

UI Builder（上）與代碼（下）

上方就是UI Builder，下方是代碼。工具將在代碼里掃描整個(gè)元素的架構(gòu)，稱為視覺元素樹（Visual Element Tree），并記下需要互動(dòng)的元素。比如，游戲按鈕將被保存在變量中，當(dāng)按鈕被按下時(shí)，你可以監(jiān)聽這些回調(diào)。設(shè)計(jì)師和程序員只需要知道按鈕是怎樣被調(diào)用的。

我們推薦在視覺元素和樣式表（Style Sheet）上采用Block Element Modifier（BEM）命名約定。因?yàn)橐谎劬涂梢詮哪硞€(gè)元素的BEM命名上看出它的作用、出現(xiàn)位置以及其與周圍其他元素的關(guān)系。

BEM命名示例：

menu__home-button

menu__shop-button

menu__shop-button--small

button-label

Button-label--selected

怎樣設(shè)計(jì)代碼結(jié)構(gòu)來應(yīng)對各類UI修改？

Aleksander：拆分邏輯與圖像組件。UI改動(dòng)難以預(yù)測，但UI視圖的邏輯不應(yīng)該改變。UI必須只展示收到的內(nèi)容，可以直接接收，也可以通過觀察數(shù)值或接收事件。此時(shí)，你可以輕松地替換渲染邏輯，即便整個(gè)UI系統(tǒng)經(jīng)過了修改。

一般哪些人負(fù)責(zé)測試UI？

Aleksander：我們有多種測試UI的方法。其中一種稱為“用戶測試”，邀請目標(biāo)用戶來試玩游戲。我們會(huì)觀察并記下玩家的行為，在必要時(shí)做出調(diào)整。

另一種方法稱為“內(nèi)部測試”，讓員工們試玩游戲并上報(bào)問題。我們經(jīng)常會(huì)收到大量的反饋，因?yàn)闇y試人員的要求很高，也有許多的相關(guān)經(jīng)歷。

如果沒有折疊設(shè)備，要怎樣測試UI呢？

S?ren：三星有遠(yuǎn)程測試實(shí)驗(yàn)室（Remote Test Labs）。我們準(zhǔn)備了許多機(jī)器，任何人只要有三星賬號就能預(yù)訂。系統(tǒng)允許上傳APK文件到實(shí)機(jī)并開展測試。

哪些是移動(dòng)端UI最可怕的性能殺手？

Aleksander：最大的性能殺手是過度繪制，頻繁重繪包含大量動(dòng)態(tài)元素的畫布（Canvas），包含大量元素的長畫布，以及文本網(wǎng)格（text mesh）的生成。我們對這些尤其小心，因?yàn)橛螒蛐枰С趾芏喾N設(shè)備。

S?ren：很大張的光柵UI畫起來很慢，UI圖形必須在設(shè)備內(nèi)存容量范圍之內(nèi)。在運(yùn)行期間渲染3D的UI圖形也能極大地拖累性能，這也包括小地圖和物品欄系統(tǒng)。

你們有哪些防止過度繪制的UI優(yōu)化技巧？

Aleksander：把UI元素按組分配到多張畫布（或子畫布）上來防止過度的重繪。只要有一個(gè)元素發(fā)生修改，整張畫布就會(huì)變“臟”，需要重繪。這個(gè)過程可耗費(fèi)大量性能，所以動(dòng)態(tài)元素最好被放在一張或多張自己的畫布上。

畫布：

https://docs.unity3d.com/Packages/com.unity.ugui 1.0/manual/UICanvas.html

盡量避免使用布局組，尤其是嵌套的，它們也會(huì)讓畫布變“臟”。如果有靜態(tài)的UI，它的位置和大小最好是預(yù)先算好的。

禁用圖形射線投射器（Graphic Raycasters），在不可互動(dòng)的UI元素上向目標(biāo)投射射線。圖形射線投射器（Graphic Raycasters）會(huì)識別觸碰是否在UI組件之內(nèi)，這個(gè)識別過程非常耗能。

圖形射線投射器：

https://docs.unity3d.com/Packages/com.unity.ugui 1.0/manual/script-GraphicRaycaster.html

類似地，可以在顯示全屏UI（比如對話）時(shí)禁用背景里的攝像機(jī)。這樣被擋住的攝像機(jī)就不會(huì)產(chǎn)生額外的渲染成本。

使用紋理圖集（Texture Atlas），并適當(dāng)?shù)貙⒕`拆分至多張圖集上，僅在必要時(shí)加載對應(yīng)的圖集，借此來減少內(nèi)存占用。

最后一條重要提示是在實(shí)機(jī)上分析游戲，然后再確定哪里需要修復(fù)。千萬別盲目地照著別人列出的列表來優(yōu)化。

Benoit：對于Unity UI，常見的做法是根據(jù)元素是否是靜態(tài)的或需要經(jīng)常更新來將其分配到不同的畫布上每張畫布在更新時(shí)會(huì)刷新所有的子元素，所以最好只刷新真正需要修改的元素。

避免重疊透明的像素，同時(shí)盡可能突出顯示UI元素的圖像。減少元素?cái)?shù)量的一種方式是制作精靈圖像，在運(yùn)行時(shí)生成；精靈可以是扁平的圖片，比如單色的指示圖標(biāo)，或一套emoji。

UI對三星設(shè)備上的游戲性能有哪些影響？

S?ren：迄今為止，我們還沒碰到過UI消耗太多性能的情況。不過這種情況肯定會(huì)發(fā)生，比如界面設(shè)計(jì)得過于復(fù)雜，或者小地圖等UI組件實(shí)現(xiàn)不當(dāng)。

自適應(yīng)性能（Adaptive Performance）同樣和UI設(shè)計(jì)相關(guān)，它能帶來什么好處嗎？

S?ren：自適應(yīng)性能（Adaptive Performance）可以用于UI設(shè)計(jì)，然而在2D光柵圖形上不宜過度優(yōu)化，否則界面會(huì)變得模糊或產(chǎn)生其他不合適的效果。它更適合在運(yùn)行時(shí)渲染到UI層的3D幾何形。

至于設(shè)備資源管理和運(yùn)行時(shí)優(yōu)化，更好的做法是為每個(gè)面板制作獨(dú)特的大型藝術(shù)資產(chǎn)，或者用小部件創(chuàng)建一個(gè)庫，用于組裝和分層。

Aleksander：這視情況而定。性能方面，使用大型藝術(shù)資產(chǎn)確實(shí)很好，但總的來說，使用小UI組成的庫要安全得多。移動(dòng)端的應(yīng)用大小非常受限，所以我們盡量使用9格縮放（9-slice scaling）。

建立一個(gè)UI元素預(yù)制件庫對于創(chuàng)建新項(xiàng)目很有幫助?？赡茉谝婚_始要多花點(diǎn)時(shí)間，一旦庫完成，你就能重新使用這些組件快速制作出UI。最重要的是，你能在整個(gè)游戲里保持統(tǒng)一的藝術(shù)風(fēng)格。

Benoit：如果游戲的Unity UI風(fēng)格非常獨(dú)特，可以為主要的彈出菜單制作一張圖片來提高運(yùn)行時(shí)性能。至于紋理的尺寸，推薦使用精靈編輯器（Sprite Editor）的切片等功能，并盡可能減少子UI對象的數(shù)量。

精靈編輯器：

https://docs.unity3d.com/2019.1/Documentation/Manual/SpriteEditor.html

在本地化方面，你們怎樣管理文本的自動(dòng)縮放？

Aleksander：自動(dòng)縮放最好的管理方式就是不去管理。如果可以在屏幕上有足夠的空間，最好是為每一種語言預(yù)留空白區(qū)域，或者為非動(dòng)態(tài)文本創(chuàng)建一些預(yù)設(shè)。在縮放時(shí)，沒有必要每幀都更新一次文本。時(shí)刻記住測試每一種翻譯里多出來的文本，看看它能否適應(yīng)屏幕。

你們是否在工作流里整合了分析工具來驗(yàn)證設(shè)計(jì)的有效性？

Aleksander：我們自己的分析流程覆蓋了游戲的方方面面，也包括UI。我們會(huì)檢測哪些UI元素會(huì)被點(diǎn)擊或忽略，據(jù)此來調(diào)整設(shè)計(jì)。

那些與關(guān)鍵性能指標(biāo)（KPI）緊密相關(guān)的UI元素會(huì)被著重關(guān)注，比如視頻位置、應(yīng)用內(nèi)購（IAP）等等。我們還試過用屏幕熱力圖來深入了解玩家行為。

這里的主要知識點(diǎn)是UI的測試、性能優(yōu)化和數(shù)據(jù)分析沒有萬金油一般的策略。每種情況都會(huì)不同，但謹(jǐn)記這些最佳實(shí)踐可以讓游戲的性能盡可能提高。