HTML5游戲開發(fā)的五個(gè)最佳實(shí)踐
HTML5是偉大的,因?yàn)樗嗖哦嗨嚨?- 它沒有具體針對單一的平臺.更重要的是,HTML5是無所不在的. 就我所知的,它在你的PC上,你的手機(jī)上,你的平板設(shè)備上,甚至在你的廚房電器上.
就憑HTML5-多才多藝和無所不在這兩個(gè)特點(diǎn) -- 不辯自明, 為什么眾多的開發(fā)者們備受鼓舞. 然,眾所周知,"一旦開發(fā)者們被激發(fā)了靈感,他們常常會編寫游戲."(好吧,可能只是我做了.)
幸運(yùn)的是,有關(guān)HTML5游戲開發(fā)的文章比比皆是. 然而, 在你打算使用HTML5編寫游戲之前, 我不得不給你一些建議.
你能從本文中學(xué)習(xí)到什么? 我將提及HTML5游戲開發(fā)框架, 怎樣通過支持智能手機(jī)和手持設(shè)備使受眾更廣泛, 怎樣管理游戲狀態(tài), 怎樣解決性能問題, 怎樣支持大多數(shù)瀏覽器平臺.
因此,直奔主題,這里有5個(gè)創(chuàng)建HTML5游戲的最佳實(shí)踐,實(shí)戰(zhàn)!("實(shí)戰(zhàn)"增加了戲劇效果)
最佳實(shí)踐 #1:使用框架
編寫簡單游戲在HTML5中是很容易的,但是當(dāng)你押寶在HTML5上,你就需要做更多的準(zhǔn)備,確保游戲順利運(yùn)行.
例如,當(dāng)你使用了很多的圖片,聲音效果,和其它的資源,它們會花費(fèi)一些時(shí)間等待瀏覽器從服務(wù)器下載. 如果在編寫游戲時(shí), 你不把它放在心上, 你會焦頭爛額. 因?yàn)閳D片和聲音文件是異步加載的,你的JavaScript代碼會在資源全部加載完成前執(zhí)行.這常常導(dǎo)致"popping"(圖片不可用),聲音效果在需要時(shí)不播放. 好的修正方法是創(chuàng)建一個(gè)預(yù)加載器,延后腳本代碼的執(zhí)行,直到所有的資源都下載完畢為止.
另一個(gè)問題是,你很可能想在不同的機(jī)器和/或不同的瀏覽器,以不同的速度運(yùn)行你的游戲. 對此, 當(dāng)你沒有更多做為的時(shí)候,你仍要確保動畫和移動速幀獨(dú)立于游戲運(yùn)行平臺.
實(shí)際上, 每個(gè)游戲都很多功能性的樣板代碼. 幸運(yùn)的是, 你不必自己從頭編寫. 有很多框架讓你僅關(guān)注游戲邏輯, 而不是去擔(dān)心這些瑣碎(和大)的事, 確保你的游戲順利運(yùn)行.
使用框架唯一需要注意的是, 你有太多選擇. 像ImpactJS框架, 皆在幫助開發(fā)游戲的方方面面, 而像EaselJS框架主要關(guān)注圖形處理. 最后還是由你來挑選你認(rèn)為最舒服的框架. 這些可能讓人摸不著頭腦, 但在JavaScript世界, 確定了框架往往意味著確定了編程風(fēng)格。
- ig.module(
- 'monster'
- )
- .requires(
- 'impact.game',
- )
- .defines(function(){
- Monster = ig.Entity.extend({
- eyes: 42
- });
- });
一個(gè)好例子是ImpactJS, 它不僅提供圖形顯示的抽象或播放聲音效果, 也織入了自定義對象和繼承模型,如上所示.
Ascend Arcade delivered three games in three months using the ImpactJS framework.
盡管有很多的HTML5游戲現(xiàn)在依賴于某種形式的框架, 很多開發(fā)者仍然堅(jiān)持一路顛簸, 試圖重新構(gòu)建一切. 然而這可能是一個(gè)好的學(xué)習(xí)經(jīng)驗(yàn), 但如果你想在合理的時(shí)間完成, 使用框架是正確的方法. 一個(gè)好的例子是, Ascended Arcade 使用 ImpactJS框架, 在三個(gè)月中發(fā)布了三款有意思的(有些受到好評)游戲.
最佳實(shí)踐 #2: 認(rèn)真考慮小的和觸摸屏的設(shè)備
可能HTML5的銷售賣點(diǎn)之一是,它可以工作于桌面PC, 手持電腦甚至智能手機(jī).(如果你還沒有看過Windows Phone 7 Mango上運(yùn)行的IE9, 看看這個(gè)視頻).
跨平臺(take that,Webster's 字典!)特性是HTML5與身俱來的, 常常只需付出少量的額外工作便可做到. 然而, 有幾個(gè)你需要認(rèn)真考慮的事情...
首先也是最重要的, 屏幕尺寸可能在不同設(shè)備中區(qū)別很大. 如果想讓你的HTML5游戲在移動設(shè)備上運(yùn)行良好,你要么確保它們支持多個(gè)分辨率,要么不超過WVGA框架大小800x480.
縱然這樣,既然大多數(shù)移動設(shè)備缺乏一次渲染整個(gè)網(wǎng)頁的能力, 采用先進(jìn)的縮放和平移技術(shù)編寫游戲可能會適得其反. 這可以通過viewport標(biāo)記關(guān)閉.下面的代碼片段將使游戲窗口占滿可用的橫向屏幕. 設(shè)置屬性"user-scaleable"為"no"告知手機(jī)瀏覽器禁用平移, 否則常常會導(dǎo)致手指控制游戲的沖突。
- <meta name="Viewport"
- content="width=device-width; user-scaleable=no; initial-scale=1.0"
- />
就算游戲在小屏幕設(shè)備上渲染沒問題, 你也應(yīng)該停下來思考一下輸入問題. 大多數(shù)僅支持觸摸式的設(shè)備擁有個(gè)虛擬鍵盤,他們可能會占用太多屏幕空間來控制游戲角色. 如果嚴(yán)格的觸摸式輸入出了問題, 你應(yīng)該創(chuàng)建一個(gè)受限的虛擬鍵盤,僅僅創(chuàng)建游戲需要的按鈕(如方向鍵). 然而,最好的做法是控制你的游戲,不需要額外的屏幕元素. 一個(gè)很好的例子是Spy Chase游戲,你用一個(gè)手指控制自動車(一些你不可能在實(shí)際生活中嘗試的東西)。
最佳實(shí)踐 #3:自動保存玩家進(jìn)度
像site pinning特性, 試圖給web瀏覽器web應(yīng)用程序和常規(guī)的桌面應(yīng)用同樣的地位. 然而, 作為應(yīng)用程序運(yùn)行的網(wǎng)站想法太新了, 網(wǎng)頁要維持客戶端狀態(tài). 關(guān)閉Microsoft Word前,你可能會三思后行, 但是可能不會對于一個(gè)開放的網(wǎng)頁謹(jǐn)慎行事.大部分時(shí)間, 它不是問題 --- 大多數(shù)網(wǎng)頁要嘛是無狀態(tài)的, 要嘛是在服務(wù)器上維護(hù)記錄你的信息。
然而, 瀏覽器游戲, 是非常不同的小怪獸. 既然JavaScript代碼運(yùn)行在客戶端, HTML5游戲狀態(tài)通常都保持在瞬時(shí)內(nèi)存中(又稱RAM).關(guān)閉游戲器窗口,你辛苦賺取的積分就付之東流了。
現(xiàn)在, 你可能會認(rèn)為, 一個(gè)明智的用戶會足夠謹(jǐn)慎, 他們連續(xù)玩了8小時(shí), 不關(guān)閉游戲. 但事故常有發(fā)生, 特別是當(dāng)打開了多個(gè)選項(xiàng)卡或突然斷電。
一言蔽之: 當(dāng)編寫HTML5游戲的時(shí)候, 絕對的最佳實(shí)踐是定期保持玩家進(jìn)度, 允許玩家恢復(fù)上一次關(guān)閉網(wǎng)頁時(shí)的狀態(tài)。
現(xiàn)在,你應(yīng)在哪保存玩家的進(jìn)度呢?過去,顯而易見的地方是服務(wù)器端或?yàn)g覽器cookie. 兩個(gè)解決方案都不是特別有吸引力. 服務(wù)器端方案, HTTP請求不得不每次構(gòu)造需要存儲或取回的信息. 使用cookie的方案, 你的空間就非常有限了, cookie的可用空間大大依賴于瀏覽器配置。
更好的可行方案是使用HTML5 DOM storage. DOM storage 通過一個(gè)接口, 讓你為每個(gè)網(wǎng)站保存幾兆的數(shù)據(jù), 它類似于一個(gè)key-value存儲(或者一個(gè)JavaScript expando對象). 這非常方便,但在HTML5游戲上下文中, 你也可能需要記住復(fù)雜的數(shù)據(jù)結(jié)構(gòu) --- 一些DOM storage非原生支持的結(jié)構(gòu)。
幸運(yùn)的是,現(xiàn)代的JavaScript引擎都有內(nèi)建的機(jī)制, 將對象序列化成緊湊的結(jié)構(gòu),如JSON. 使用這種方案, DOM storage也可以記住復(fù)雜信息.接下來的兩個(gè)助手函數(shù), 使用HTML5 DOM storage和ECMAScript5的內(nèi)建JSON特性, 解決了游戲狀態(tài)的存儲和取回。
ECMAScript5:
- function saveState(state) {
- window.localStorage.setItem("gameState", JSON.stringify(state));
- }
- function restoreState() {
- var state = window.localStorage.getItem("gameState");
- if (state) {
- return JSON.parse(state);
- } else {
- return null;
- }
- }
最佳實(shí)踐 #4: 使用監(jiān)控器
開發(fā)游戲的一個(gè)最大挑戰(zhàn)是加入越來越多的游戲特性的同時(shí)能保持高幀率.
好消息是, 瀏覽器比過去幾年快了很多,HTML5游戲運(yùn)行在恒定的60fps已經(jīng)成為現(xiàn)實(shí).
這實(shí)屬不易. 對于IE9,意味著要編寫一個(gè)全新的JavaScript引擎, 使用多CPU內(nèi)核和基于Direct2D的完全的硬件加速渲染管道.
IE9的內(nèi)置監(jiān)控器能幫助你定位性能漏洞.
對于簡單游戲,你不需要擔(dān)心性能問題.但既然HTML5是平臺無關(guān)的,你很可能會針對大量的設(shè)備和瀏覽器開發(fā), 有些不像你想像的那么快速. 即使你只針對高性能電腦, 性能仍然會成為一個(gè)問題.
如果你想游戲運(yùn)行在60fps, 單個(gè)幀渲染不能超過16毫秒. 這可能看起來像是個(gè)艱巨的任務(wù), 但這是可以做到的.
很幸運(yùn),有一些工具可以幫助你. 在IE9中(或者10),單擊F12,打開開發(fā)者工具,選擇"Profiler"選項(xiàng)卡并單擊 "Start profiling".
現(xiàn)在導(dǎo)航到你感覺性能應(yīng)被改善的地方,給監(jiān)控器大概30秒的時(shí)間收集數(shù)據(jù),然后單擊"Stop profiling." 將給你展現(xiàn)一個(gè)關(guān)于每個(gè)游戲函數(shù)累計(jì)執(zhí)行時(shí)間的概覽. 大多數(shù)時(shí)候, 你會發(fā)現(xiàn), 少數(shù)幾個(gè)函數(shù)占用了大部分執(zhí)行時(shí)間.優(yōu)化這些函數(shù)將給你超值回報(bào), 分析這些代碼, 拖后腿的子程序?qū)⒃彤吢?
不要盲目的相信直覺, 在當(dāng)今的JavaScript引擎中, 看起來慢可能實(shí)際上運(yùn)行得很快. 最佳優(yōu)化方案是時(shí)常監(jiān)控和判斷代碼的改變是否對性能有負(fù)面影響.
社會化游戲: Warimals 基于HTML5而允許你身邊的Facebook好友一起玩游戲.
最佳實(shí)踐 #5 創(chuàng)意!
HTML5不光在技術(shù)上是有趣的, 瀏覽器本身也是一個(gè)完美的游戲平臺.
感謝瀏覽器... 它存在于很多不同的設(shè)備中,他們常常(總是)在線的,它們是人們彼此交流的工具, 通過email,聊天室和社交網(wǎng)絡(luò).做為一個(gè)瀏覽器的游戲開發(fā)者, 你可以創(chuàng)建游戲, 讓世界各地的人聚集在一起, 帶給他們快樂.
如果你是一個(gè)HTML5游戲的開發(fā)新手,可能編寫你曾經(jīng)玩過的線下游戲的克隆會很誘人. 這種做法沒有錯(cuò)誤. 但是,如果你想讓做線上游戲, 現(xiàn)在是一個(gè)好的機(jī)會, 請拿出全新的, 極具創(chuàng)意的游戲理念. 一個(gè)有趣的例子是 Warimals, 第一個(gè)基于HTML5的Facebook游戲.在 Warimals 中,你可以扮演小狗或小雞,還能讓你的Facebook好友和你一起玩. 何樂不為呢?
總結(jié):
感謝框架開發(fā)者的工作和JavaScript開拓者, HTML5已經(jīng)成為一個(gè)相當(dāng)成熟的游戲開發(fā)平臺. 這是好消息, 因?yàn)閣eb是個(gè)普適的應(yīng)用環(huán)境，只要有合適的工具（很多已經(jīng)集成到IE9和IE10或者可以免費(fèi)下載）和合適的框架，HTML5的開發(fā)體驗(yàn)會充滿愉悅并令人振奮，尤其是在分享有趣的和創(chuàng)造性的經(jīng)驗(yàn)的時(shí)候。
英文：Top 5 Best Practices for Building HTML5 Games…In Action!
原文鏈接：http://www.oschina.net/question/1579_46161
【編輯推薦】
