激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

html5 游戲開發(fā)(HTML5游戲開發(fā)過程中的二三事)

發(fā)布時(shí)間：2023-11-27 06:48:12 瀏覽量：122次

?HTML5游戲開發(fā)過程中的二三事

html5 游戲開發(fā)(HTML5游戲開發(fā)過程中的二三事)

文/ Luiu

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

這款項(xiàng)目是我們團(tuán)隊(duì)接到的第一款HTML5類型的游戲合約，在此前團(tuán)隊(duì)一致在致力于傳統(tǒng)回合制手游研發(fā)。因此團(tuán)隊(duì)可以說在這個(gè)領(lǐng)域幾乎是從零開始（當(dāng)然一開始的時(shí)候我們不這么覺得），所以在研發(fā)進(jìn)行到中期的時(shí)候遇到了很多影響效率的問題。

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

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

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

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

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

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

最終效果如圖：

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

html5 游戲開發(fā)(HTML5游戲開發(fā)過程中的二三事)

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

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

方案優(yōu)勢(shì)：該方案可以解決方案一種空白區(qū)域的問題，在移動(dòng)設(shè)備上顯示更加美觀。

該方案的最終效果如圖：

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

從目前市面上的HTML5游戲來看，基本采用方案一就可滿足當(dāng)前用戶需求。采用方案二會(huì)增加項(xiàng)目研發(fā)時(shí)長，并且增加人力成本。

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

白鷺引擎中的約束功能：

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

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

UI就是游戲的臉面，是給用戶留下第一印象最直觀的內(nèi)容。因此UI中的各個(gè)細(xì)節(jié)必須保證統(tǒng)一美觀，這樣才能給用戶留下好印象。

html5 游戲開發(fā)(HTML5游戲開發(fā)過程中的二三事)

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定