開發(fā)HTML5跨平臺游戲相關(guān)經(jīng)驗

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

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

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

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

　　開發(fā)這款游戲并非易事，以下是我們所總結(jié)的一些經(jīng)驗：

　　allisons_city(from gamasutra)

　　1)移動設(shè)備的玩家數(shù)量多于我們的預(yù)期。

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

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

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

　　2)必須進行多次試驗。

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

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

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

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

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

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

　　以下是我們用來觸發(fā)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)在設(shè)計之初就要有跨平臺理念。

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

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

　　gifts(from gamasutra)

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

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

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

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

　　Skyscraper City(from gamasutra)

　　6)善于運用CSS知識

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

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

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

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

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

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

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

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

　　最好很精通CSS技能。

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

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

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

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

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