HTML5遊戲開發的5條實用建議

　　HTML5很棒，因為它幾乎無所不能——它并不是為某種特殊的應用設計的。更重要的是，HTML5幾乎是無處不在的。它就在你的PC機上、你的手機上、你的平闆裝置上——它甚至可能就在你的廚房電器上。

　　正是由于HTML5具有豐富的功能并且無處不在，是以它給開發者帶來了很多的靈感。俗話說得好，“一旦開發者有了靈感，他們就開始編寫遊戲了。”（這句話應該是作者編的）

　　幸運的是，有關HTML5遊戲開發的指南現在已經有很多了。而這篇文章則是要告訴開發者在開發HTML5遊戲機上分器http://www.hfded.com以前應該具備的一些全局概念。你能 從這篇文章中學到什麼？這裡會介紹HTML5遊戲開發的一些架構，你将知道如何使你設計的遊戲能夠在更多的平台上運作，了解如何管理線上遊戲的狀态，如何 處理性能問題。

　　話不多說，現在就開始介紹HTML5遊戲開發的5條實用建議。

　　建議1：使用架構

　　如果隻是用HTML5編寫一些小程式其實非常簡單，但如果想往你的遊戲中加入更豐富的功能，那麼就有許多其他的事情需要處理了。

　　比如，如果你的遊戲中有大量的圖檔、音效或是其他的資源，那麼浏覽器需要從你的遊戲伺服器上下載下傳這些資源，這往往需要花費很多的時間。如果你在 編寫程式的時候沒有考慮這些問題，那麼你也許會對最後的結果感到意外。由于圖形和聲音檔案都是異步下載下傳的，也許在你的資源下載下傳好以前你的 JavaScript腳步已經開始運作了。這就是所謂的“爆音”現象（圖像顯示異常），而聲音也可能在錯誤的時間播放。一個好的解決方法就是建立一個預先 下載下傳機制，保證所有的資源下載下傳完以後才允許腳本執行。

　　另一個你可能碰到的問題就是你的遊戲在不同的機器甚至是浏覽器中運作的速度有所不同。雖然這也許在你的控制範圍以外，但你還是可以盡量使得你的動畫或是動作的速度不依賴于遊戲運作架構的速度。

　　其實，現在有許多的遊戲模闆代碼，裡面實作了大多數遊戲需要的功能。這樣，開發者不需要從頭到尾編寫一個完整的遊戲程式。現在有許多架構可以幫助開發者設計遊戲，開發者隻用關注具體的遊戲邏輯，而不用擔心如何使遊戲順暢運作這些細節問題。

　　

　　使用架構時唯一需要注意的一點就是如何從衆多的架構中挑選一個合适的架構。像ImpactJS這樣的架構功能非常強大，幾乎可以在各個 方面為開發者提供幫助；而像EaselJS的架構則主要是處理圖形方面的工作。最後，還是需要由開發者決定使用哪種架構更加合适。這看起來似乎很簡單，但 在JavaScript的世界裡面，選擇一個架構時也意味着你選擇了一種特定的程式設計風格。

1. ig.module(
2. 'monster'
3. )
4. .requires(
5. 'impact.game',
6. )
7. .defines(function(){
8. Monster = ig.Entity.extend({
9. eyes : 42
10. });
11. });

　　ImpactJS就是一個很好的例子，它不僅提供了圖像顯示和音效處理的方法，還在實作中插入了自己的對象和模型。

　　Ascended Arcade三個月内發開了三款遊戲，全部使用的是ImpactJS的架構

　　雖然現在已經有很多HTML5遊戲使用了一些架構，但是還是有很多開發者不嫌麻煩地選擇不依賴任何架構完全自己開發。如果你想在合理的時間内完 成任務，使用架構當然是最有效的方法。Ascended Arcade就是一個很好的例子，在短短三個月的時間裡，他們就開發出了三個遊戲，全部使用了ImpactJS架構。

　　建議2：将小螢幕和觸屏裝置考慮在内

　　HTML5最大的賣點之一就是它既能在桌面PC上使用，也能在筆記本電腦、平闆裝置甚至是智能手機上運作。（這裡有IE9在Windows Phone 7 Mango上的運作效果示範）。

　　HTML5與生俱來就具備了跨平台的特性，通常為開發者節省了很多工作。然而，有些事情是需要開發者考慮的…

　　SpyChase在Windows Phone 7 Mango上的運作效果

　　首先也是最重要的一點，不同的裝置螢幕的尺寸也有所不同，螢幕的寬高比以及分辨率可能有很大的差别。如果想讓你的HTML5在移動裝置上擁有良 好的效果，確定它支援多種分辨率并且不超過WVGA的800×480架構大小。此外，由于大多數的移動裝置無法在一個螢幕上顯示所有的頁面内容，他們常常 采用精确的縮放和平移技術，而這些技術通常并不适用于遊戲的編寫。可以在程式設計的時候使用viewport meta标志禁用這些功能。下面的代碼片段可以用來使你的遊戲視圖根據螢幕的實際水準寬度自動調節。移動浏覽器上的縮放功能常常與觸控遊戲控制功能産生沖 突，可以将“user-scaleable”參數設定為“no”，進而禁用浏覽器的縮放功能。

1. <meta name="Viewport"
2. content="width=device-width"; user-scaleable=no; initial-scale=1.0 />

　　現在你已經能夠将你的遊戲視圖很好地呈現在小螢幕裝置上了，接下來就該考慮如何處理使用者輸入的問題了。大多數觸屏裝置都有一個虛拟鍵盤，但是在 玩遊戲的時候顯示一個虛拟鍵盤實在太浪費空間了。你應該開發一個有限的虛拟鍵盤，隻提供遊戲中使用到的按鍵（比如箭頭）。當然，最好是盡可能在遊戲中不需 要使用額外的元素。Spy Chase在這方面做得很好，使用者隻用一個手指就能控制遊戲中的汽車了。

　　建議3：自動儲存使用者的記錄

　　使用 site pinning,web浏覽器試圖讓Web Apps可以像桌面apps一樣工作。但是，讓網站像Apps一樣運作的想法還比較新鮮，同樣的，讓Web頁面儲存用戶端的狀态也尚未成熟。使用者在關閉 Microsoft Word的文檔時可能會思考一下内容是否已經儲存，而在關閉Web頁面時往往不會這麼仔細了。通常這并不會帶來什麼問題——大多數的Web頁面是沒有狀态 的，或者是将使用者的記錄儲存在了伺服器上。

　　但如果是處理浏覽器遊戲，情況就完全不同了。通常在用戶端執行的是JavaScript代碼，HTML5遊戲通常将遊戲的狀态緩存在記憶體中（RAM）。一旦關閉浏覽器視窗，使用者辛辛苦苦赢得的高分就永遠地丢失了。

　　你可以要求使用者小心一點，不要将正在進行的遊戲視窗關閉，但是意外總是會發生的，尤其是當使用者開了多個視窗或是電池沒電的時候。

　　長話短說：在編寫HTML5遊戲時，最好是經常将遊戲玩家的進度狀态儲存一下，當使用者重新打開關閉的web頁面時，應該讓使用者可以繼續之前沒有結束的遊戲而不是重頭來過。

　　你應該将使用者的記錄儲存在哪裡呢？過去，答案往往是伺服器端的資料庫或是用戶端的cookie。但是這兩個都不是最佳的選擇。如果是在伺服器 端，則會産生額外的HTTP請求開銷。如果是cookie的話，則可以儲存記錄的空間非常有限，并且cookie的壽命取決于浏覽器的配置。

　　一個更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一個key-value存儲（或是JavaScript定義的對象）的接口，可以為每個網站儲存幾兆的資料。使用起來非常友善，但是 在HTML5遊戲中，你可能想要記錄一些更加複雜的資料結構——這些DOM storage本身可能并不支援。幸運的是，現在的JavaScript提供了一套機制幫助開發者将一組對象壓縮成一些緊湊的符号，這就是JSON機制。 使用這套機制，DOM storage可以儲存任何格式的資訊。下面的兩個函數展示了如何使用HTML5 DOM storage儲存遊戲狀态以及ECMAScript5中的JSON功能：　　

1. function saveState(state) {
2. window.localStorage.setItem("gameState", JSON.stringify(state));
3. }
4. function restoreState() {
5. var state = window.localStorage.getItem("gameState");
6. if(state) {
7. return JSON.parse(state);
8. }else{
9. retrun null;
10. }
11. }

　　建議4：使用profiler

　　遊戲開發中最大的挑戰是在加入許多功能以後，如何保證遊戲仍然具有高的幀顯示頻率。

　　好的消息是近幾年來，浏覽器的速度越來越快了，基于HTML5的遊戲已經可以達到每秒60幀了。

　　這是非常了不起的。對IE9來說，這意味着開發了一個全新的JavaScript引擎，能夠利用多CPU核心以及基于Direct2D的硬體渲染管道。換言之，如果你配備了高配置的遊戲平台，IE9就能充分地利用這些硬體平台。

　　IE9整合了JavaScript分析器，能夠發現性能瓶頸

　　對于簡單的遊戲，這意味着你不必擔心它的性能問題。但由于HTML5可以運作在任何平台上，這意味着你發開的HTML5遊戲應該能夠運作在任何 一個裝置或是浏覽器上，其中有些裝置或浏覽器的處理能力可能并沒有你希望的那麼快。即使你的應用隻針對高性能的PC，遊戲的性能也是一個不得不考慮的問 題。

　　如果你要求你的遊戲達到每秒60幀，這意味着每一幀的渲染時間不能超過16毫秒。也就是說，在你一眨眼的時間裡面，你需要完成至少6幀的渲染工作。現在聽起來可能有點難以想象…但是有些非凡的遊戲确實能夠做到。

　　幸運的是，這裡有些工具可能能夠幫助你。在IE9（或是IE10）上，通過按下F12按鍵可以打開開發工具面闆。選擇“Profile”選項然後選中“Start profiling”。

　　現在在你覺得性能需要提升的地方停留30秒，profiler将收集相關資料，然後選擇“stop profiling”。你将看到你的遊戲中的每個功能的累積執行時間。通常，你會發現某些功能占用了大部分的時間。這樣你就能有針對性地優化那些特别耗時的功能了。

　　不要過分相信自己的直覺——有些代碼可能看起來效率很低，但在某些JavaScript引擎上執行起來速度卻很快。最好的辦法就是時常地反複分析程式，對于修改過的代碼，需要反複進行測試確定你的修改确實能夠提升程式的性能。

　　遊戲變得越來越社會化：Warimals是基于HTML5的遊戲，使用者可以與Facebook上的好友一起參與遊戲

　　建議5：要有創造性！

　　能夠開發出在浏覽器中運作的遊戲是一件很棒的事情，而更酷的是可以使用HTML5在浏覽器上開發遊戲應用！從技術的角度看，HTML5是非常棒的，而浏覽器也是非常理想的遊戲平台。

　　想想看…各種不同的裝置上都有浏覽器，它們通常是時時線上的，它是人們接收郵件、聊天和社交網絡的工具。浏覽器遊戲的開發者，可以利用自己開發的遊戲将來自世界各地的人們聯系在一起。

　　如果你還不熟悉HTML5的遊戲開發，你可能将你線上下玩過的遊戲照搬過來。這當然沒有什麼問題。但如果你想讓你的遊戲變為一個“交流工具”， 你最好能夠擁有更加新穎和創造力的想法。Warimals就是一個例子，它是第一個基于HTML5的facebook遊戲。在遊戲中，使用者可以扮演成一隻 小狗或是小貓，并可以邀請自己的Facebook好友一同參加。使用者有什麼理由不喜歡這個遊戲呢？

　　總結

　　感謝架構的開發者和JavaScript的相關工作者，HTML5已經成為了一個相當成熟的遊戲開發平台。這是一個好消息，因為Web是唯一一 個适合各種應用廣泛使用的運作環境。選擇合理的工具（很多工具都可以在IE9和IE10中使用，并且能夠免費下載下傳到）和架構，HTML5遊戲開發将是一件 簡單并且有價值的事情，尤其适合開發新穎和社交性很強的遊戲。