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

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

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

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

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

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

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

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

這里還有幾點需要記住的提示：

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

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

UI Builder（上）與代碼（下）

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

我們推薦在視覺元素和樣式表（Style Sheet）上采用Block Element Modifier（BEM）命名約定。因為一眼就可以從某個元素的BEM命名上看出它的作用、出現(xiàn)位置以及其與周圍其他元素的關(guān)系。

BEM命名示例：

menu__home-button

menu__shop-button

menu__shop-button--small

button-label

Button-label--selected

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

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

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

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

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

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

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

哪些是移動端UI最可怕的性能殺手？

Aleksander：最大的性能殺手是過度繪制，頻繁重繪包含大量動態(tài)元素的畫布（Canvas），包含大量元素的長畫布，以及文本網(wǎng)格（text mesh）的生成。我們對這些尤其小心，因為游戲需要支持很多種設(shè)備。

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

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

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

畫布：

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

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

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

圖形射線投射器：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

精靈編輯器：

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

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

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

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

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

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

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