HTML5游戲開發(fā)的最佳實(shí)踐框架分享

在現(xiàn)如今，隨著互聯(lián)網(wǎng)科技飛速的發(fā)展和進(jìn)步，目前HTML5已經(jīng)在不同的領(lǐng)域讓網(wǎng)頁(yè)設(shè)計(jì)更強(qiáng)大的?？焖伲踩?，響應(yīng)式，互動(dòng)和美麗，這些優(yōu)點(diǎn)吸引更多的Web開發(fā)人員使用HTML5。HTML5有許多新的特性功能，允許開發(fā)人員和設(shè)計(jì)師創(chuàng)建應(yīng)用程序和網(wǎng)站，帶給用戶桌面應(yīng)用程序的速度，性能和體驗(yàn)。那么關(guān)于使用HTML5開發(fā)工程師編寫游戲，下面我們一起來看一下HTML5游戲的最佳實(shí)踐框架吧。  

最佳實(shí)踐1:使用框架  

編寫簡(jiǎn)單游戲在HTML5中是很容易的,但是當(dāng)你押寶在HTML5上,你就需要做更多的準(zhǔn)備,確保游戲順利運(yùn)行.  

例如,當(dāng)你使用了很多的圖片,聲音效果,和其它的資源,它們會(huì)花費(fèi)一些時(shí)間等待瀏覽器從服務(wù)器下載.如果在編寫游戲時(shí),你不把它放在心上,你會(huì)焦頭爛額.因?yàn)閳D片和聲音文件是異步加載的,你的JavaScript代碼會(huì)在資源全部加載完成前執(zhí)行.這常常導(dǎo)致"popping"(圖片不可用),聲音效果在需要時(shí)不播放.好的修正方法是創(chuàng)建一個(gè)預(yù)加載器,延后腳本代碼的執(zhí)行,直到所有的資源都下載完畢為止.  

另一個(gè)問題是,你很可能想在不同的機(jī)器和/或不同的瀏覽器,以不同的速度運(yùn)行你的游戲.對(duì)此,當(dāng)你沒有更多做為的時(shí)候,你仍要確保動(dòng)畫和移動(dòng)速幀獨(dú)立于游戲運(yùn)行平臺(tái).  

實(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,它不僅提供圖形顯示的抽象或播放聲音效果,也織入了自定義對(duì)象和繼承模型。AscendArcadedeliveredthreegamesinthreemonthsusingtheImpactJSframework.  

盡管有很多的HTML5游戲現(xiàn)在依賴于某種形式的框架,很多開發(fā)者仍然堅(jiān)持一路顛簸,試圖重新構(gòu)建一切.然而這可能是一個(gè)好的學(xué)習(xí)經(jīng)驗(yàn),但如果你想在合理的時(shí)間完成,使用框架是正確的方法.一個(gè)好的例子是,AscendedArcade使用ImpactJS框架,在三個(gè)月中發(fā)布了三款有意思的(有些受到好評(píng))游戲.  

最佳實(shí)踐2:認(rèn)真考慮小的和觸摸屏的設(shè)備  

可能HTML5的銷售賣點(diǎn)之一是,它可以工作于桌面PC,手持電腦甚至智能手機(jī).(如果你還沒有看過WindowsPhone7Mango上運(yùn)行的IE9,看看這個(gè)視頻).  

跨平臺(tái)(takethat,Webster's字典!)特性是HTML5與身俱來的,常常只需付出少量的額外工作便可做到.然而,有幾個(gè)你需要認(rèn)真考慮的事情...  

首先也是最重要的,屏幕尺寸可能在不同設(shè)備中區(qū)別很大.如果想讓你的HTML5游戲在移動(dòng)設(shè)備上運(yùn)行良好,你要么確保它們支持多個(gè)分辨率,要么不超過WVGA框架大小800x480.  

縱然這樣,既然大多數(shù)移動(dòng)設(shè)備缺乏一次渲染整個(gè)網(wǎng)頁(yè)的能力,采用先進(jìn)的縮放和平移技術(shù)編寫游戲可能會(huì)適得其反.這可以通過viewport標(biāo)記關(guān)閉.下面的代碼片段將使游戲窗口占滿可用的橫向屏幕.設(shè)置屬性"user-scaleable"為"no"告知手機(jī)瀏覽器禁用平移,否則常常會(huì)導(dǎo)致手指控制游戲的沖突.  

content="width=device-width;user-scaleable=no;initial-scale=1.0"/>  

就算游戲在小屏幕設(shè)備上渲染沒問題,你也應(yīng)該停下來思考一下輸入問題.大多數(shù)僅支持觸摸式的設(shè)備擁有個(gè)虛擬鍵盤,他們可能會(huì)占用太多屏幕空間來控制游戲角色.如果嚴(yán)格的觸摸式輸入出了問題,你應(yīng)該創(chuàng)建一個(gè)受限的虛擬鍵盤,僅僅創(chuàng)建游戲需要的按鈕(如方向鍵).然而,最好的做法是控制你的游戲,不需要額外的屏幕元素.一個(gè)很好的例子是SpyChase游戲,你用一個(gè)手指控制自動(dòng)車(一些你不可能在實(shí)際生活中嘗試的東西)。  

最佳實(shí)踐3:使用監(jiān)控器  

開發(fā)游戲的一個(gè)最大挑戰(zhàn)是加入越來越多的游戲特性的同時(shí)能保持高幀率.  

好消息是,瀏覽器比過去幾年快了很多,HTML5游戲運(yùn)行在恒定的60fps已經(jīng)成為現(xiàn)實(shí).  

這實(shí)屬不易.對(duì)于IE9,意味著要編寫一個(gè)全新的JavaScript引擎,使用多CPU內(nèi)核和基于Direct2D的完全的硬件加速渲染管道.  

IE9的內(nèi)置監(jiān)控器能幫助你定位性能漏洞.  

對(duì)于簡(jiǎn)單游戲,你不需要擔(dān)心性能問題.但既然HTML5是平臺(tái)無(wú)關(guān)的,你很可能會(huì)針對(duì)大量的設(shè)備和瀏覽器開發(fā),有些不像你想像的那么快速.即使你只針對(duì)高性能電腦,性能仍然會(huì)成為一個(gè)問題.  

如果你想游戲運(yùn)行在60fps,單個(gè)幀渲染不能超過16毫秒.這可能看起來像是個(gè)艱巨的任務(wù),但這是可以做到的.  

很幸運(yùn),有一些工具可以幫助你.在IE9中(或者10),單擊F12,打開開發(fā)者工具,選擇"Profiler"選項(xiàng)卡并單擊"Startprofiling".  

現(xiàn)在導(dǎo)航到你感覺性能應(yīng)被改善的地方,給監(jiān)控器大概30秒的時(shí)間收集數(shù)據(jù),然后單擊"Stopprofiling."將給你展現(xiàn)一個(gè)關(guān)于每個(gè)游戲函數(shù)累計(jì)執(zhí)行時(shí)間的概覽.大多數(shù)時(shí)候,你會(huì)發(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)控和判斷代碼的改變是否對(duì)性能有負(fù)面影響.  

社會(huì)化游戲:Warimals基于HTML5而允許你身邊的Facebook好友一起玩游戲。  

最佳實(shí)踐4：創(chuàng)意!  

HTML5不光在技術(shù)上是有趣的,瀏覽器本身也是一個(gè)完美的游戲平臺(tái).  

感謝瀏覽器...它存在于很多不同的設(shè)備中,他們常常(總是)在線的,它們是人們彼此交流的工具,通過email,聊天室和社交網(wǎng)絡(luò).做為一個(gè)瀏覽器的游戲開發(fā)者,你可以創(chuàng)建游戲,讓世界各地的人聚集在一起,帶給他們快樂.  

如果你是一個(gè)HTML5游戲的開發(fā)新手,可能編寫你曾經(jīng)玩過的線下游戲的克隆會(huì)很誘人.這種做法沒有錯(cuò)誤.但是,如果你想讓做線上游戲,現(xiàn)在是一個(gè)好的機(jī)會(huì),請(qǐng)拿出全新的,極具創(chuàng)意的游戲理念.一個(gè)有趣的例子是Warimals,第一個(gè)基于HTML5的Facebook游戲.在Warimals中,你可以扮演小狗或小雞,還能讓你的Facebook好友和你一起玩.何樂不為呢?