文/ Luiu

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

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

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

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

一、適配方案

界面適配的方案一：約束比例縮放(主流方案)

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

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

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

最終效果如圖：

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

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

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

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

該方案的最終效果如圖：

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

從目前市面上的HTML5游戲來看，基本采用方案一就可滿足當前用戶需求。采用方案二會增加項目研發時長，并且增加人力成本。

二、元素布局方式

我們這個項目使用的是白鷺引擎，在該引擎的UI編輯器中有個約束坐標的功能。使用該功能，可以將元素的坐標相對屏幕四邊或者中心進行約束，確保縮放后界面布局隨之改變。建議界面中的元素更多的采用約束的形式，而不是絕對坐標。

白鷺引擎中的約束功能：

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

三、UI標準

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

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

總結

以上是生活随笔為你收集整理的html5点击按钮出现弹窗 怎么实现_HTML5游戏开发过程中的二三事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。