開發HTML5跨平臺游戲相關經驗

　　我們剛成立Gamezee的時候，行業中許多人都對HTML5抱有成見，就算是一些對其較為樂觀的人士也只是說，HTML5將是未來發展潮流，但目前還不夠成熟和穩定，無法制作出當前主導社交游戲領域的Ville類型Flash游戲。

　　當時我們準備使用HTML5制作一款可同時運行于PC端的Facebook，以及所有iOS設備和Android手機平臺移動網絡的大型等視距游戲。

　　這款出自單個團隊之手，并且基于HTML5/node.JS的游戲《Skyscraper City》僅運行一個代碼庫，它是我們這家工作室的開山之作。

　　《Skyscraper City》這款城建游戲現在已經入駐Facebook及iOS、Android手機平臺，結合了社交建設玩法，含有樂高積木風格的元素。玩家可以堆疊任何一種城市單位以建設高塔，或者裝飾建筑等。

　　開發這款游戲并非易事，以下是我們所總結的一些經驗：

　　allisons_city(from gamasutra)

　　1)移動設備的玩家數量多于我們的預期。

　　我們想制作跨平臺HTML5游戲的原因之一就是，我們自己也是游戲玩家。我玩過《CityVille》，并希望外出時也能在手機上玩到這款游戲。Zynga雖然推出移動版《CityVille Hometown》，我也可以在iPhone或Android手機下載這款游戲，但它與原版《CityVille》并不相同，它是另一座城市。而我們的游戲卻能提供真正的跨平臺體驗，你可以在PC電腦、平板電腦、移動設備上玩游戲，并且實現游戲進程在所有設備上的同步。

　　我們認為多數用戶的想法也是如此——他們多數時候在電腦上玩游戲，然后在其他場所時就拿出平板電腦或手機繼續體驗游戲。但在iPid Touch或iPad上玩游戲的用戶要多于在Mac平臺，而Android手機游戲玩家又會多于這些蘋果游戲用戶。

　　如果我們一開始就清楚這一點，就會花更多時間針對移動設備而非Mac瀏覽器優化游戲體驗。雖然我們設計之初就考慮到移動設備，但我們卻只是將其視為次級游戲環境。我們建議其他開發者將優質的手機游戲體驗作為首要考慮目標。

　　2)必須進行多次試驗。

　　我們一開始就有使用Canvas渲染游戲的念頭。這在桌面電腦平臺上十分管用——完全不存在運行效果的問題。但在iPhone 3GS平臺，運行效果很糟糕(我們制作游戲時的每秒渲染畫面不足5幀，但iOS 5.0發布之后情況大有好轉)。

　　所以我們只好接二連三地創建一個又一個渲染引擎，直到創建出目前使用的DOM渲染器為止(它適用于多數設備)。這個DOM渲染器使用CSS動畫，支持我們在2D圖像上使用偽3D CSS變換以觸發移動設備上的硬件加速功能(這可以略微提升運行效果)。

　　3)HTML5仍存在一些難以攻克的軟肋。

　　HTML5上的音效仍然很有問題。游戲開發需考慮的是植入多種聲音以響應游戲提示信息及玩家輸入操作。但盡管我們進行了多次試驗，仍然無法在多數移動設備上實現較理想的音效(游戲邦注：例如，無法讓聲音即時響應游戲內容或玩家操作)，也難以讓游戲同時播放響聲和音樂。所以我們就選擇在電腦版本的游戲中同時保留聲音及音樂內容，但移動網頁版本僅保留音樂。

　　在DOM上提升運行效果的一個類似做法是在CSS上進行偽3D變換。這可以在多數移動設備上觸發硬件加速，使其獲得比Canvas更出色的運行效果

　　出于某種原因，有些Android設備(例如三星Galaxy S21)并不支持這種操作，所以你無法針對它們提升游戲運行性能。

　　以下是我們用來觸發3D變換的代碼：

1. /******************************/  
2.  
3. /* Makes screen non-selectable and prevents text cursor from displaying */  
4.  
5. /******************************/  
6.  
7. div {  
8.  
9. margin: 0;  
10.  
11. padding: 0;  
12.  
13. -moz-user-select: -moz-none;  
14.  
15. -khtml-user-select: none;  
16.  
17. -webkit-user-select: none;  
18.  
19. /*3D transform */  
20.  
21. -webkit-transform: scale3d(1, 1, 1);  
22.  
23. -o-user-select: none;  
24.  
25. user-select: none;  
26.  
27. }  
28.  

　　4)在設計之初就要有跨平臺理念。

　　我們希望手機版本與電腦網頁版本的游戲體驗更為相近，這意味著我們需要關閉手機版中的縮放功能，在網頁版游戲中移除道具拾取的翻轉效果，并想法在手機版游戲中植入翻轉(我們的想法是通過一個按扭激活或使用手指按壓目標道具來實現這一點)。

　　像《CityVille》這類游戲設計如果不進行重大調整，根本就不適用于手機平臺，因為它一開始就并非瞄準移動設備。它的菜單太大太復雜了，游戲中的東西多得無法在小小的iPhone屏幕中呈現(游戲邦注：所以Zynga才需要針對iOS、Android發布獨立版本的《CityVille Hometown》，而非添加一些元素直接將原版游戲移植到手機平臺)。

　　gifts(from gamasutra)

　　5)不要采用大量堆疊操作。

　　我們游戲的一大特色就是上文提到的堆疊操作。在城市中創建一個巨型機器人或者建設一個由四根細柱支撐的倒金字塔確實很有趣，但在手機平臺上的堆疊操作卻問題百出。如果用戶的手指不夠纖細，有時候就難以準確選中他們想點擊的物品。另外，與Flash一樣，如果你在屏幕上拖動的對象越多，渲染時間就會越長。

　　玩家在這款游戲中一開始擁有10 X 10的城市方格，最高可以建設11層樓。如果每一格都建設這么高的樓，那需要渲染的建筑內容就多了(如果玩家的可玩區域擴展4倍后，那么渲染的工作量就更大了)。

　　所以，雖然堆疊很好玩，但對于擴建后的城市來說卻十分不利于玩家操作，它會延長游戲的加載時間(在某些移動設備上的加載時間超過一分鐘，在桌面電腦就沒有這么明顯)。我們現在正在優化游戲渲染大量對象的運行性能，但如果我們提前知道這一點，可能就會不會采用這種棘手的堆疊玩法了。

　　Skyscraper City(from gamasutra)

　　6)善于運用CSS知識

　　你最好很擅長CSS技術，因為讓游戲在桌面電腦平臺、Android手機及所有iOS設備的主流瀏覽器流暢運行，需要用到大量的CSS知識。我們有一個網頁開發者的任務就是處理與CSS相關的工作，針對多種移動設備創建可動態變換尺寸的菜單。在電子游戲設計中，有50%的工作用于創建菜單。而HTML5跨平臺游戲開發中有50%屬于與CSS相關的工作。

　　以下是我們在這個開發過程中的一些體會：

　　我們的實踐證明，開發者可以使用HTML5制作出很棒的跨平臺等視距游戲。

　　如果玩家可以在一個設備上玩某款游戲，多數人就會想在手機或平板電腦上繼續體驗該游戲。

　　制作HTML5跨平臺游戲需進行大量試驗。

　　雖然HTML5很強大，但仍有一些不甚完善之處。

　　跨平臺游戲體驗意味著，游戲設計之初就要考慮到用戶在不同設備上的體驗。

　　不可在手機游戲中植入需進行大量堆疊或過度拖動的操作。

　　最好很精通CSS技能。

　　以下是我們在Facebook平臺開發跨平臺HTML5游戲的一些極有幫助的參考資料：

　　1)viewporter. https://github.com/zynga/viewporter. 這個Zynga開源代碼允許你獲取任何設備的屏幕尺寸，并針對這些屏幕調整游戲大小。它比你自己從頭編寫代碼更省時間(我們用過Viewporter，也自己寫過代碼，所以才會知道這一點。)

　　2)Weinre.http://phonegap.github.com/weinre/. 這個遠程調試器工作原理類似于Web Inspector，但它運行于移動設備。它有助于追蹤iPhone和iPad等設備上的控制臺錯誤信息。

　　3)JQuery. http://jquery.com/ 你可以利用這個庫中現成的代碼，省下自己寫代碼的時間。它對文本動畫處理極有用處，我們進行了一些修改并推出了JQuery Mobile，它更適用于移動設備平臺。

　　4)node.JS. http://nodejs.org/ 在你使用Javascript編寫內容時，它可以讓你省時省力地使客戶端代碼及服務器相適配。在作為游戲服務器時，node.JS的擴展性能也十分理想。