2024年-HTML游戲開(kāi)發(fā)實(shí)例分享百度學(xué)習(xí)課件

HTML5游戲開(kāi)發(fā)實(shí)例分享羅睿BaiduSpace團(tuán)隊(duì)luorui@12/16/2010圖像版權(quán)歸CAPCOM公司所有。我是IE9我是Chrome812024/5/10目錄HTML5簡(jiǎn)介使用HTML5技術(shù)開(kāi)發(fā)游戲總結(jié)與展望Q&A圖像版權(quán)歸CAPCOM公司所有。22024/5/10HTML5簡(jiǎn)介什么是HTML5？HTML5有哪些優(yōu)點(diǎn)和新特性？HTML5能做些什么？32024/5/10什么是HTML5？HTML5是XHTML宣告失敗后的新寵兒。2006年，W3C承認(rèn)他們?cè)谄诖鼿TML遷移到XML方面過(guò)于樂(lè)觀。2009年，W3C停止了關(guān)于XHTML2.0的工作，并將資源轉(zhuǎn)向HTML。現(xiàn)在，標(biāo)準(zhǔn)專(zhuān)家們正把所有令人興奮的、新的Web技術(shù)都塞進(jìn)HTML5中。42024/5/10HTML5有哪些優(yōu)點(diǎn)和新特性？減少了對(duì)外部插件的需求(Flash/SilverLight)更優(yōu)秀的錯(cuò)誤處理。更多取代腳本的標(biāo)記，新元素和表單控件。用于繪畫(huà)的canvas元素。用于媒體回放的video和audio元素。對(duì)本地離線存儲(chǔ)更好的支持。WebMessaging，WebWorkers，WebSocket……52024/5/10HTML5能做些什么？有如此多的新功能，應(yīng)該做點(diǎn)什么了。取代JS驗(yàn)證的表單？

用更語(yǔ)義化的標(biāo)簽構(gòu)建頁(yè)面？

還是實(shí)現(xiàn)一個(gè)即時(shí)聊天工具？嗯……似乎還不夠激動(dòng)人心。

那么，使用canvas和audio做游戲吧！

62024/5/10使用HTML5技術(shù)開(kāi)發(fā)游戲可行性研究。工欲善其事必先利其器。游戲系統(tǒng)結(jié)構(gòu)。游戲細(xì)節(jié)的把握。Canvas的效率和兼容性。Audio的效率和兼容性。游戲優(yōu)化。存在的問(wèn)題。72024/5/10可行性研究俄羅斯方塊，吃豆子還是別的什么?KnightsoftheRound圓桌騎士。模擬器VS手工復(fù)刻。10MHzVS3GHz60FPSVS30FPS82024/5/10俄羅斯方塊，吃豆子還是別的什么?WOW!真酷！92024/5/10KnightsoftheRound圓桌騎士圓桌騎士（knightsoftheround）是由CAPCOM公司于1991年推出的一款動(dòng)作游戲，對(duì)應(yīng)游戲平臺(tái)為街機(jī)，游戲基板為CPS1。游戲操控性上，圓桌騎士也更為注重一招一式地砍殺感覺(jué)，那種刀碰鎧甲的感覺(jué)相當(dāng)曼妙。102024/5/10KnightsoftheRound圓桌騎士112024/5/10模擬器VS手工復(fù)刻用JS制作CPS1模擬器？ROM解碼68000匯編……還是算了吧，弄不來(lái)。純手工復(fù)刻？這個(gè)比較可行……122024/5/1010MHzVS3GHzCPS1'sMotorola68000(@10MHz)CPUandgraphicsICIntelCorei7

1.6

GHz

to3.33

GHz

132024/5/1060FPSVS30FPS顯而易見(jiàn)，60FPS比30FPS更有表現(xiàn)力，視覺(jué)感受更流暢。CPS1的幀頻是60FPS，要提高仿真度，幀頻必須達(dá)到60。帶來(lái)的問(wèn)題是對(duì)性能的苛刻要求。142024/5/10工欲善其事必先利其器動(dòng)作游戲的核心在于各種精靈的動(dòng)作。需要一種工具，能夠方便的創(chuàng)建，編輯，精靈所需要的幀與動(dòng)作。在寫(xiě)游戲之前，必須完成基礎(chǔ)設(shè)施建設(shè)。為此開(kāi)發(fā)了SpriteEditor工具，純JS開(kāi)發(fā)，利用dataURIscheme和圖片另存為功能保存jsonp格式的精靈配置文件。152024/5/10SpriteEditor162024/5/10游戲系統(tǒng)結(jié)構(gòu)典型游戲軟件系統(tǒng)結(jié)構(gòu)圖游戲狀態(tài)仿真器渲染器控制器更新信息信息信息行動(dòng)172024/5/10圓桌騎士DEMO系統(tǒng)結(jié)構(gòu)BaseSpriteCharacterGame

ControllerGame

DriverResource

DataResource

LoaderManagersCommand

ManagerInfo

ManagerRender

ManagerScroll

ManagerSound

ManagerSprite

ManagerStage

MangerCharactersEffectsLancelotSoldier……EffectInfo……入口182024/5/10游戲細(xì)節(jié)的把握每一個(gè)像素，每一幀，每個(gè)動(dòng)作都力求與原作一致。使用Winkawaks模擬器的截圖工廠，配合Fireworks圖形處理，以及SpriteEditor工具，打造出完美的游戲角色。同樣使用Winkawaks的音頻錄制功能，配合Goldwave音頻處理軟件，保持原汁原味。192024/5/10Canvas的效率與兼容性Canvas渲染的效率很不錯(cuò)，在Chrome里分辨率384*224輕松跑到200幀以上。不過(guò)拉伸后效率下降較嚴(yán)重。值得一提的是IE9，得益于強(qiáng)大的硬件加速，即使放大10倍以上，幀率也不低于60。相比之下其他瀏覽器慘不忍睹，幀數(shù)不到兩位數(shù)。Chrome開(kāi)發(fā)版開(kāi)啟硬件加速反而變慢了。202024/5/10Canvas的效率與兼容性比較杯具的是canvas同樣存在兼容問(wèn)題。例如：

IE9beta還不支持globalCompositeOperation

其他瀏覽器的globalCompositeOperation效果也不是完全一致。

Opera的save和restore與其他瀏覽器不一致。IE9不支持canvas的toDataURL方法，如果調(diào)用會(huì)導(dǎo)致瀏覽器崩潰。212024/5/10Canvas的效率與兼容性ChromeOperaFirefoxSafariglobalCompositeOperation兼容情況IE9尚未支持。222024/5/10Audio的效率與兼容性說(shuō)到Audio，更加杯具的事實(shí)。API少得可憐，只能播放，暫停，調(diào)節(jié)音量，Seeking和其他基本功能。不能改變音調(diào)，調(diào)整播放速度，多聲道控制，也不能進(jìn)行流處理，不能指定播放某一段落，總之你想干的事情都不行。各瀏覽器支持的音頻格式也不盡相同。232024/5/10Audio的效率與兼容性Firefox還不支持loop循環(huán)播放屬性。Chrome在密集調(diào)用play，pause或設(shè)置currentTime時(shí)會(huì)導(dǎo)致延遲，甚至瀏覽器崩潰。Safari不支持腳本化的audio，如果使用腳本創(chuàng)建audio標(biāo)簽將無(wú)法正常工作。242024/5/10Audio的效率與兼容性較早的音頻格式支持情況目前IE9已支持MP3格式，仍不支持Ogg。252024/5/10游戲優(yōu)化如何實(shí)現(xiàn)高幀頻？迭代渲染使用setInterval，不使用setTimeout。動(dòng)畫(huà)的實(shí)現(xiàn)方法比較。避免給每個(gè)精靈設(shè)置定時(shí)器，可能造成隊(duì)列阻塞，效率低下。嘗試在一個(gè)統(tǒng)一的定時(shí)器中處理多個(gè)精靈動(dòng)畫(huà)。避免給多個(gè)對(duì)象綁定事件監(jiān)聽(tīng)，嘗試使用統(tǒng)一的事件代理。262024/5/10存在的問(wèn)題有許多過(guò)程沒(méi)有抽象出來(lái)，硬編碼比較多。耦合性較高，在對(duì)象間的交互中知道太多對(duì)方的細(xì)節(jié)。將進(jìn)行重構(gòu)，運(yùn)用更合理的設(shè)計(jì)模式。需要開(kāi)發(fā)更完善的輔助工具。272024/5/10總結(jié)與展望目前HTML5還相當(dāng)不成熟，但仍值得期待。缺少成熟的開(kāi)發(fā)框架和環(huán)境。仍然存在較大