HTML5遊戲開發過程中的二三事

遊資網發表於2019-02-24
HTML遊戲開發
最近跟的一款專案是HTML5手遊，在這個專案中遇到並解決了諸多問題，也學習到了很多專案開發過程中需要注意的事情。這個專案自立項到現在已經過了5個多月，如今專案研發已經過了早期的忙亂階段，於是藉此機會梳理下思緒，為了能夠更好的完成以後的工作。如果能給想進入HTML5這個領域的新團隊一些參考，那也是一件極好的事情。

這款專案是我們團隊接到的第一款HTML5型別的遊戲合約，在此前團隊一致在致力於傳統回合制手遊研發。因此團隊可以說在這個領域幾乎是從零開始（當然一開始的時候我們不這麼覺得），所以在研發進行到中期的時候遇到了很多影響效率的問題。

其中影響最大的問題之一就是——介面適配

HTML5手遊這個品類說白了就是把頁遊裝進一個殼裡，本質上他還是一個頁遊，擁有很多頁遊的特性。它是在頁遊框架的基礎上，將UE對移動裝置做了優化。因此該類遊戲在後期將會根據渠道需求發行多個版本，包括直接在網頁執行（電腦網頁和手機網頁）、在手機端執行、在平板電腦裝置上執行。這樣就會帶來一個嚴重的問題——相容性問題。由於HTML5跨平臺的特性，很容易產生相容問題。最明顯的一個就是介面適配問題，最基本的要做到UI在不同長寬比的螢幕下均能完全展示，在這個基礎上再考慮對主流長寬比的螢幕進行特殊處理，優化使用者體驗。

一、適配方案

介面適配的方案一：約束比例縮放（主流方案）

方案描述：該是保持介面中元素的相對位置不變，在不同長寬比的螢幕中進行整體縮放。

這種方案會將介面分為上中下3個區域，將中間的主要區域視作一個視窗根據螢幕比例進行縮放。在縮放的過程中保證視窗長寬比不變，保持長或者寬任意一個維度佔滿螢幕就可，不強求整體鋪滿螢幕。

方案優勢：處理簡單，且最終效果還可以。可以保證UI在不同長寬比的螢幕下均能完全展示，並且UI佈局不變。
最終效果如圖：

HTML5遊戲開發過程中的二三事

圖中黑色部分為空白區域，雖然對介面的美觀有一定影響，但是影響不大。如果把中間的區域設計為視窗的樣式，會使介面看起來更自然。

介面適配方案二：全屏鋪滿

方案描述：該方案同樣要將介面分為上中下3個區域，只是對中間那塊主要區域採用了不同的處理方式。這種方案會要求中間區域底板鋪滿螢幕，所有處於該底板上的元素座標需要根據介面的長寬比進行計算，並且介面中的列表，底框等元素的大小也要根據螢幕的長寬比進行計算。

方案優勢：該方案可以解決方案一種空白區域的問題，在移動裝置上顯示更加美觀。

該方案的最終效果如圖：

HTML5遊戲開發過程中的二三事

這個方案實現較方案一來說更加複雜，並且最終效果不好把控。容易造成不同比例螢幕下UI出現重疊，超出邊界等問題。如果處理不好，最終效果反而不如方案一。

從目前市面上的HTML5遊戲來看，基本採用方案一就可滿足當前使用者需求。採用方案二會增加專案研發時長，並且增加人力成本。

二、元素佈局方式

我們這個專案使用的是白鷺引擎，在該引擎的UI編輯器中有個約束座標的功能。使用該功能，可以將元素的座標相對螢幕四邊或者中心進行約束，確保縮放後介面佈局隨之改變。建議介面中的元素更多的採用約束的形式，而不是絕對座標。

白鷺引擎中的約束功能：

HTML5遊戲開發過程中的二三事

為什麼建議使用約束的形式呢？這是因為約束的方案更有利於保證介面中元素的邊距，居中，四邊對齊等佈局。這樣當使用者在兩個相似介面之間切換時，相同的元素位置也相同。不會出現切換時由於相同元素座標的微小差異造成的晃動感。並且該方案更方便約定團隊成員在拼介面時的規範，只需要約定相同元素的邊距，元素互相之間的間距等。再者，如果採用介面適配方案一時使用約束功能的話，後期若要改為方案二，也會更加方便一些。

三、UI標準

規定UI標準對於保證UI的最終效果十分重要。在專案開始之初，就需要設計好介面中的通用控制元件的樣式和規格，包括通用按鈕、列表、標籤等。並且不同功能標籤的字型大小、色值、樣式（加粗、描邊）等也要有統一的標準。除了以上這些控制元件的規格和樣式，還需要規定遊戲中各種彈窗的樣式和規格，否則必然會出現彈框大小參差不齊，影響UI美觀。

UI就是遊戲的臉面，是給使用者留下第一印象最直觀的內容。因此UI中的各個細節必須保證統一美觀，這樣才能給使用者留下好印象。


相關文章