2024年-HTML游戲開發(fā)實例分享百度學習課件

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

用更語義化的標簽構建頁面？

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

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

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

1.6

GHz

to3.33

GHz

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

ControllerGame

DriverResource

DataResource

LoaderManagersCommand

ManagerInfo

ManagerRender

ManagerScroll

ManagerSound

ManagerSprite

ManagerStage

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

IE9beta還不支持globalCompositeOperation

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

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