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