在本文，我們將介紹HTML5的能力和解釋關(guān)于JavaScript的常見(jiàn)誤解，提出一些解決HTML5可怕的音頻問(wèn)題的方案，以及介紹開(kāi)發(fā)HTML5游戲可能遇到的主要問(wèn)題。
我敢說(shuō)，讀者們應(yīng)該已經(jīng)知道，用單一的語(yǔ)言編寫(xiě)游戲且不需要移植或甚至重新編譯就在多個(gè)平臺(tái)上發(fā)布，能擴(kuò)大游戲的普及范圍，增加玩家的自主權(quán)，這對(duì)商業(yè)是有好處的。
關(guān)于HTML5，網(wǎng)上流傳著諸多誤解。最重要的一個(gè)問(wèn)題是，“HTML5迎來(lái)全盛時(shí)期了嗎?”
簡(jiǎn)短的答案是：是的，你可以用HTML5寫(xiě)出很好的游戲，這些游戲可以在多個(gè)瀏覽器、平臺(tái)和設(shè)備上運(yùn)行且保持相同的品質(zhì)。
更長(zhǎng)的答案是：詳見(jiàn)下文——HTML5仍然很年輕，它還有一些非�，F(xiàn)實(shí)的問(wèn)題應(yīng)試避免。
HTML5-logo(from 36kr.com)
熱詞之外
所以當(dāng)我們談?wù)揌TML5時(shí)，我們其實(shí)是指Javascript(JS)與圖像和交互API相給合，用JS在瀏覽器顯示。與其他成熟的技術(shù)一樣，Javascript也有它自己的教條和誤解。
以下是常見(jiàn)的誤區(qū)：
“Javascript 太慢!”
這是真的，直到2005年以后瀏覽器制作者開(kāi)發(fā)好好搞JS的優(yōu)化�，F(xiàn)在通常認(rèn)為，JS已經(jīng)是最富動(dòng)態(tài)的語(yǔ)言——與靜態(tài)語(yǔ)言Java和C#相比，速度只有本地編譯的C的約一半。這是很了不起的。
“Javascript沒(méi)有類(lèi)庫(kù)!”
我們經(jīng)常聽(tīng)到這個(gè)報(bào)怨，但這不是真的;JS的原型遺產(chǎn)傳達(dá)了你想在游戲中出現(xiàn)的所有基本的OO特征(面向?qū)ο?：成員變量、成員功能、亞類(lèi)、靜態(tài)成員、多態(tài)形、反射在、函數(shù)/構(gòu)造函數(shù)過(guò)載、類(lèi)型識(shí)別。
“Javascript不安全，因?yàn)樗皇蔷幾g的!”
使用極簡(jiǎn)化和混淆(如果反射不需要的話)，把你的代碼變成少空白的、少評(píng)論的廢話，就像本地代碼編譯一樣有效，對(duì)人記住，任何在客戶端上運(yùn)行的東西，無(wú)論它是Javascript、Java還是C++，都是不安全的，含糊并不是安全。
“Javascript不是真正的編程語(yǔ)言!”
這太蠢了。從語(yǔ)言設(shè)計(jì)的角度出發(fā)，Javascript是相當(dāng)好的。它是Scheme Lisp語(yǔ)言加上C式句法和Smalltalk風(fēng)格原型的對(duì)象的簡(jiǎn)化版本。
順便一提，Javascript的下一個(gè)版本——ES6會(huì)非常好的。
我們已經(jīng)認(rèn)識(shí)了關(guān)于Javascript的幾個(gè)常見(jiàn)誤解，現(xiàn)在可以談?wù)凥TML5了。HTML5只是添加到我們所知道和喜愛(ài)的現(xiàn)有的HTML上，作為游戲開(kāi)發(fā)者，我們真的只關(guān)心幾個(gè)選項(xiàng)。以下是使用HTML5的好處和一些陷阱。
Canvas
這是我們都已經(jīng)聽(tīng)說(shuō)的與HTML5游戲有關(guān)的特征。Canvas在你的網(wǎng)頁(yè)頁(yè)面上創(chuàng)造一個(gè)2D繪制空間。你可以控制幀緩存大小(象素寬和高)，設(shè)置Canvas元素的屏幕大小;它會(huì)根據(jù)元素大小自動(dòng)拉伸或收縮緩存。你甚至可以創(chuàng)造離屏幕的Canvas，然后復(fù)制一個(gè)Canvas到另一個(gè)，使效果和表現(xiàn)更加強(qiáng)大。
使用簡(jiǎn)單的間隔計(jì)時(shí)順(或更好的，請(qǐng)求動(dòng)畫(huà)幀 API)和Canvas，你就可以用更少的時(shí)間繪制東西。
“陷阱!”
除了飛快地加速位圖圖像，Canvas包含強(qiáng)大的API(基于PostScript)，用于幾何線和填充，和初步的文本渲染工具;然而，你要少量地使用這些，因?yàn)樗鼈兺档蛶省?/P>
另外，Canvas喜歡從少量的源圖像繪制，所以你要控制好繪制圖像調(diào)用次數(shù)(這可能是底層驅(qū)動(dòng)/API的現(xiàn)實(shí))。所以，壓縮這些小圖像(你會(huì)希望舊能減少http加載調(diào)用)和使用離屏幕Canvas來(lái)緩存嘲中不變的部分(游戲邦注：把那些6400次繪制貼圖變成一次繪制圖像命令)。
老實(shí)說(shuō)，HTML5的音頻弱爆了。這個(gè)問(wèn)題沒(méi)有辦法掩蓋了。在我進(jìn)一步探討這個(gè)問(wèn)題以前，我先向你保證，HTML5是可以提供比較體面的聲音體驗(yàn)的，但你將面臨以下幾個(gè)問(wèn)題：
音頻格式問(wèn)題：
某種瀏覽器只能播放某種音頻格式，這意味著你不得不至少配置兩種音頻格式(目前是.mp3和.ogg)。要怪就怪軟件專(zhuān)利吧。
糟糕的信息：
有一個(gè)API會(huì)詢(xún)問(wèn)瀏覽器它可以播放什么音頻格式;可悲的是，這個(gè)API有一個(gè)非�？膳碌慕獯a器支持，所以它得到的回答是“也許”�？v觀那么多種瀏覽器，我們還發(fā)現(xiàn)這個(gè)API在支持什么和不支持什么上完全說(shuō)謊了。
∩怕的執(zhí)行：
有些瀏覽器，即使它們發(fā)誓它們可以播放某種格式;它們的解碼器/流媒體執(zhí)行法也是無(wú)效的。延遲嚴(yán)重、低劣的音頻質(zhì)量、不正確的計(jì)時(shí)。有些瀏覽器(或操作系統(tǒng))根本不能播放，卻說(shuō)自己支持某種格式。
嚴(yán)重的延遲
如果你通過(guò)http加載一個(gè)聲音然后點(diǎn)擊播放，到聲音下載完的時(shí)候，對(duì)應(yīng)的事件已經(jīng)過(guò)去了。如果這是背景音樂(lè)，那就無(wú)所謂，但如果是動(dòng)作游戲的聲音特效呢?那就不能接受了。
聽(tīng)起來(lái)真是太糟了!
音頻是HTML5當(dāng)下的第一大問(wèn)題;所幸有許多能人開(kāi)動(dòng)腦筋，再加上技術(shù)的進(jìn)步，HTML5的音頻至少能用了，雖然還算不上好。
音頻救星：Audio Sprites
⊥像Atlas是針對(duì)圖像的2D封裝方案，為了減少http調(diào)用和域名費(fèi)用的負(fù)擔(dān)，針對(duì)音頻的1D解決方案——Audio Sprites應(yīng)運(yùn)而生。Remy Sharp在這方面做了一些基礎(chǔ)工作。他的基本思路是，你把你的聲音特效打包進(jìn)一個(gè)聲音文件中，每個(gè)聲音之間留半秒的無(wú)聲狀態(tài)，作為計(jì)時(shí)誤差。一個(gè)附帶的.json文件羅列了所有這些包含在Audio Sprites中的文件，以及它們的起止位置。
借助Audio Sprites，你只需要把一個(gè)文件轉(zhuǎn)換為ogg和mp3，且你只需要一個(gè)http請(qǐng)求就能加載它了。
延遲消失了!
有一個(gè)統(tǒng)一的大聲音文件的主要好處是，我們避免了小聲音文件的傳輸問(wèn)題。瀏覽器可以預(yù)加載這個(gè)大聲音文件，然后當(dāng)被調(diào)用時(shí)就尋找各個(gè)聲音特效的開(kāi)頭，這樣延遲就非常小了。我們的唯一問(wèn)題是，在這個(gè)聲音結(jié)束而下一個(gè)聲音播放以前，我們必須監(jiān)控和中止傳輸。
“糟糕的格式檢測(cè)怎么辦?”
在一定程度上這仍然是一個(gè)問(wèn)題;我們已經(jīng)發(fā)現(xiàn)，你可以使用MP3，大部分瀏覽器都支持MP3;但在編寫(xiě)的時(shí)候，最好能在菜單中加入“MP3或OGG”的設(shè)置選項(xiàng)。另外，確保你沒(méi)寫(xiě)錯(cuò);許多人在格式檢測(cè)方面偷懶。
“這聽(tīng)起太難處理了!”
是的，是很讓人頭疼;要求我們花幾周的時(shí)間開(kāi)發(fā)必須的工具和尋找技巧。
順便一提，希望還是有的。大部分網(wǎng)頁(yè)瀏覽器已經(jīng)支持新的Opus格式和/或新的基于OpenAL的WebAudio API。普及只是一個(gè)時(shí)間的問(wèn)題。
WebGL
作為HTML5運(yùn)動(dòng)中的一個(gè)主要熱詞，WebGL承載了太多希望，即3D游戲能夠使用本地圖像API。然而我們的實(shí)驗(yàn)表明，WebGL還沒(méi)有準(zhǔn)備好迎接黃金時(shí)代。在相同的機(jī)子上，可以運(yùn)行用C++寫(xiě)的OpenGL程序，但用WebGL寫(xiě)的就運(yùn)行不了，這個(gè)事實(shí)意味著仍然存在問(wèn)題。該死的NVidia/ATI 驅(qū)動(dòng)專(zhuān)利!與Canvas相比，WebGL還很難學(xué)習(xí)。到年底，WebGL應(yīng)該非常有希望成為2D和3D圖像中間件的可行選擇。
WWW負(fù)擔(dān)
瀏覽器支持許多文件格式化的特性(CSS、HTML、XML、SVG等)，而這些特性對(duì)Canvas和WebGL游戲太不實(shí)用了，可能最好避免。一款簡(jiǎn)單的游戲只需要半頁(yè)的HTML作為裝載javascript的容器。不幸的是，如果出于某些原因你并不了解網(wǎng)頁(yè)設(shè)計(jì)，那么為了制作JS游戲，你就得學(xué)習(xí)基礎(chǔ)的HTML和CSS。無(wú)論如何，登錄頁(yè)面和UI對(duì)話框是必須知道的。
因?yàn)镃anvas和WebGL的渲染是很糟糕的，你可能希望使用HTML作為游戲內(nèi)的文本(游戲邦注：如提示、角色對(duì)話等)。這個(gè)技巧是使用“pointer-events: none”(CSS)來(lái)避免通過(guò)鼠標(biāo)點(diǎn)擊出現(xiàn)文本。
使用CSS的“正解方法”可能是單調(diào)且沒(méi)有意義的。當(dāng)不確定時(shí)，就使用和濫用“position: absolute”!
XML是HTML的近親，有些人可能會(huì)認(rèn)為瀏覽器會(huì)有出色的XML工具。相反的是，我們發(fā)現(xiàn)它們不僅笨拙，有時(shí)候甚至漏洞百出，所以我們把舊的XML資產(chǎn)轉(zhuǎn)換成JSON。
另外，你可能需要安裝一個(gè)網(wǎng)頁(yè)服務(wù)器程序，比如Apache。打開(kāi)你的硬盤(pán)中的HTML 文件，你也許能夠運(yùn)行你的游戲，但有一些奇怪的案例限制會(huì)讓你很為難，特別是當(dāng)你的游戲是AJAX或WebGL的。
陷阱：網(wǎng)頁(yè)瀏覽器不是100%兼容的
眾所周知，“跨平臺(tái)”從來(lái)就不是無(wú)縫的。我們的建議是，至少支持最常用的3、4種瀏覽器，并經(jīng)常性地在這些瀏覽器上做測(cè)試。Chrome和Safari通常是最適合玩游戲的，且它們都使用WebKit，所以100%是互相兼容的。
Firefox也不錯(cuò)——在某些方面甚至更好，但要注意避免滲出邊界特征如“l(fā)et [x,y] = point”。IE和Opera需要額外的努力，它們可能不太適合比較大的游戲，因?yàn)樗性O(shè)備都會(huì)選擇比它們更好的瀏覽器。但另一方面，對(duì)于簡(jiǎn)單的休閑游戲，支持IE還是比較簡(jiǎn)單的，且可能是獲得商業(yè)成功的必須條件。
如果你在制作手機(jī)/平板游戲，請(qǐng)記�。菏謾C(jī)瀏覽器是不同的。
資源打包和加載
在其他平臺(tái)你可以在安裝包里解壓所有資源，HTML5卻不同，你要把子畫(huà)面和聲音特效、小的HTML文件嵌入JSON，嵌入GLSL著色器如果你使用的是WebGL的話，把JSON嵌入JS，然后合并和壓縮所有JS文件。我們使用Make、PHP和NodeJS scripts、ImageMagick、LAME和OggEnc自動(dòng)化這個(gè)過(guò)程。
之后，當(dāng)你的游戲啟動(dòng)時(shí)，預(yù)加載你的所有資源(可能除了音樂(lè))。我們使用async.js來(lái)從AJAX中同時(shí)取得所有東西，然后開(kāi)始游戲循環(huán)。
AppCache(AKA Offline Mode)是一種相當(dāng)簡(jiǎn)單的加速預(yù)加載和重新加載的方法(甚至于對(duì)在線多人游戲)，如果你保持游戲簡(jiǎn)單的話。記住，這個(gè)方法也可能出大錯(cuò)，在你得意忘形以前，先讀讀《Application Cache is a Douchebag》這篇文章吧。
一開(kāi)始，當(dāng)你在你自己的機(jī)子上運(yùn)行游戲時(shí)，是不會(huì)發(fā)生這種問(wèn)題的。提醒你一下，如果你完成了一款HTML5游戲，資源加載問(wèn)題可能拖延你的發(fā)布日程。
總結(jié)
用一種能夠無(wú)縫兼容現(xiàn)有的網(wǎng)頁(yè)服務(wù)器的語(yǔ)言制作游戲，具有簡(jiǎn)化免費(fèi)和開(kāi)放平臺(tái)的網(wǎng)頁(yè)開(kāi)發(fā)的潛能，使HTML5成為開(kāi)發(fā)和實(shí)用性方面非常誘人的選擇。
投稿郵箱：chuanbeiol@163.com 詳情請(qǐng)?jiān)L問(wèn)川北在線：http://m.fishbao.com.cn/
