北京pk10计划50期连中
游戲觀察 游戲產業媒體
手機端下載
當前位置:游戲觀察 > 新聞 > 研發資訊 > 正文

開發者分享HTML5游戲開發過程中的二三事

2019-03-02 10:00 來源:游戲觀察

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

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

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

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

  一、適配方案

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

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

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

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

  最終效果如圖:

約束比例縮放

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

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

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

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

  該方案的最終效果如圖:

全屏鋪滿

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

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

  二、元素布局方式

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

  白鷺引擎中的約束功能:

約束功能

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

  三、UI標準

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

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

  作者:Luiu

本網站所收集的資料來源于互聯網公開信息或網友自助投稿,轉載的目的在于傳遞更多信息及用于網絡分享,并不代表本站贊同其觀點和對其真實性負責,也不構成任何其他建議。如果您發現網站上有侵犯您知識產權的資料,請與我們取得聯系,本站會在3個工作日內刪除。

游戲觀察

聚焦極有價值的游戲產業資訊。打造有影響力的游戲產業媒體。

第十九屆游交會5月20日在杭州濱江區舉辦,現已開啟報名
北京pk10计划50期连中 塞维利亚到里斯本夜巴 体彩四川金7乐69明 阿兹特克宝藏免费试玩 pk10牛牛公式 河南快三基本走势一定牛 微信捕鱼送分能提现金 大圣捕鱼 古墓奇兵 广东快乐十分走势 3d开机号开奖号100期