火星網(wǎng)校
html游戲開發(fā)(HTML5游戲開發(fā)過程中的二三事)
發(fā)布時間：2023-11-27 20:43:26 瀏覽量：98次
?HTML5游戲開發(fā)過程中的二三事
文/ Luiu
最近跟的一款項目是HTML5手游，在這個項目中遇到并解決了諸多問題，也學習到了很多項目開發(fā)過程中需要注意的事情。這個項目自立項到現(xiàn)在已經(jīng)過了5個多月，如今項目研發(fā)已經(jīng)過了早期的忙亂階段，于是借此機會梳理下思緒，為了能夠更好的完成以后的工作。如果能給想進入HTML5這個領(lǐng)域的新團隊一些參考，那也是一件極好的事情。
這款項目是我們團隊接到的第一款HTML5類型的游戲合約，在此前團隊一致在致力于傳統(tǒng)回合制手游研發(fā)。因此團隊可以說在這個領(lǐng)域幾乎是從零開始（當然一開始的時候我們不這么覺得），所以在研發(fā)進行到中期的時候遇到了很多影響效率的問題。
其中影響最大的問題之一就是——界面適配
HTML5手游這個品類說白了就是把頁游裝進一個殼里，本質(zhì)上他還是一個頁游，擁有很多頁游的特性。它是在頁游框架的基礎(chǔ)上，將UE對移動設(shè)備做了優(yōu)化。因此該類游戲在后期將會根據(jù)渠道需求發(fā)行多個版本，包括直接在網(wǎng)頁運行（電腦網(wǎng)頁和手機網(wǎng)頁）、在手機端運行、在平板電腦設(shè)備上運行。這樣就會帶來一個嚴重的問題——兼容性問題。由于HTML5跨平臺的特性，很容易產(chǎn)生兼容問題。最明顯的一個就是界面適配問題，最基本的要做到UI在不同長寬比的屏幕下均能完全展示，在這個基礎(chǔ)上再考慮對主流長寬比的屏幕進行特殊處理，優(yōu)化用戶體驗。
界面適配的方案一：約束比例縮放（主流方案）
方案描述：該是保持界面中元素的相對位置不變，在不同長寬比的屏幕中進行整體縮放。
這種方案會將界面分為上中下3個區(qū)域，將中間的主要區(qū)域視作一個窗口根據(jù)屏幕比例進行縮放。在縮放的過程中保證窗口長寬比不變，保持長或者寬任意一個維度占滿屏幕就可，不強求整體鋪滿屏幕。
方案優(yōu)勢：處理簡單，且最終效果還可以?？梢员ＷCUI在不同長寬比的屏幕下均能完全展示，并且UI布局不變。
最終效果如圖：
圖中黑色部分為空白區(qū)域，雖然對界面的美觀有一定影響，但是影響不大。如果把中間的區(qū)域設(shè)計為窗口的樣式，會使界面看起來更自然。
界面適配方案二：全屏鋪滿
方案描述：該方案同樣要將界面分為上中下3個區(qū)域，只是對中間那塊主要區(qū)域采用了不同的處理方式。這種方案會要求中間區(qū)域底板鋪滿屏幕，所有處于該底板上的元素坐標需要根據(jù)界面的長寬比進行計算，并且界面中的列表，底框等元素的大小也要根據(jù)屏幕的長寬比進行計算。
方案優(yōu)勢：該方案可以解決方案一種空白區(qū)域的問題，在移動設(shè)備上顯示更加美觀。
該方案的最終效果如圖：
這個方案實現(xiàn)較方案一來說更加復雜，并且最終效果不好把控。容易造成不同比例屏幕下UI出現(xiàn)重疊，超出邊界等問題。如果處理不好，最終效果反而不如方案一。
從目前市面上的HTML5游戲來看，基本采用方案一就可滿足當前用戶需求。采用方案二會增加項目研發(fā)時長，并且增加人力成本。
我們這個項目使用的是白鷺引擎，在該引擎的UI編輯器中有個約束坐標的功能。使用該功能，可以將元素的坐標相對屏幕四邊或者中心進行約束，確?？s放后界面布局隨之改變。建議界面中的元素更多的采用約束的形式，而不是絕對坐標。
白鷺引擎中的約束功能：
為什么建議使用約束的形式呢？這是因為約束的方案更有利于保證界面中元素的邊距，居中，四邊對齊等布局。這樣當用戶在兩個相似界面之間切換時，相同的元素位置也相同。不會出現(xiàn)切換時由于相同元素坐標的微小差異造成的晃動感。并且該方案更方便約定團隊成員在拼界面時的規(guī)范，只需要約定相同元素的邊距，元素互相之間的間距等。再者，如果采用界面適配方案一時使用約束功能的話，后期若要改為方案二，也會更加方便一些。
規(guī)定UI標準對于保證UI的最終效果十分重要。在項目開始之初，就需要設(shè)計好界面中的通用控件的樣式和規(guī)格，包括通用按鈕、列表、標簽等。并且不同功能標簽的字體大小、色值、樣式（加粗、描邊）等也要有統(tǒng)一的標準。除了以上這些控件的規(guī)格和樣式，還需要規(guī)定游戲中各種彈窗的樣式和規(guī)格，否則必然會出現(xiàn)彈框大小參差不齊，影響UI美觀。
UI就是游戲的臉面，是給用戶留下第一印象最直觀的內(nèi)容。因此UI中的各個細節(jié)必須保證統(tǒng)一美觀，這樣才能給用戶留下好印象。
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設(shè)計領(lǐng)域和數(shù)字藝術(shù)教育的重要性，歡迎點擊咨詢報名。
-
2. 手機游戲如何開發(fā)(如何制作傳奇手游，都需要準備些什么？)
?如何制作傳奇手游，都需要準備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現(xiàn)在的手游，說明時代在進步游戲在更新，更趨于方便化移動化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費、一鍵制作炫酷特效，適合新手小白?？靵碓囋?！
-
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇?！短烀嬗肪哂卸嗑€劇情多結(jié)局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經(jīng)濟體系揭秘，不同玩家角色的經(jīng)濟活動
Bigtime加密游戲經(jīng)濟模型分析，探討游戲經(jīng)濟特點，幫助玩家更全面了解這款GameFi產(chǎn)品。
-
6. 3D動漫建模全過程，不是一般人能學的會的，會的多不是人?
步驟01:面部,頸部,身體在一起這次我不準備設(shè)計圖片,我從雕刻進入。這一次,它將是一種純粹關(guān)注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
7. 3D動畫軟件你知道幾個?3ds Max、Blender、Maya、Houdini大比拼
當提到3D動畫軟件或動畫工具時,指的是數(shù)字內(nèi)容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術(shù)動畫的軟件程序。但是,在3D動畫軟件中還包含了其他類型的...
-
?三昧動漫對于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應(yīng)并不會推出《巫師4》。因為《巫師》系列在策劃的時候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現(xiàn)《巫師4》
-
9. 3D打印技巧揭秘！Cura設(shè)置讓你的模型更堅固
想讓你的3D打印模型更堅固？不妨嘗試一下Cura參數(shù)設(shè)置和設(shè)計技巧，讓你輕松掌握！
-
10. Unity3D入門:手把手帶你開發(fā)一款坦克大戰(zhàn)的游戲
Unity工程創(chuàng)建完成后如圖所示: 接下來應(yīng)該導入此項目所需的Unity Package文件,要用到的Unity package文件大家可以去Unity3D的官方網(wǎng)站下載(地址:ht...
最新文章
