日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
開發(fā)HTML5跨平臺游戲相關(guān)經(jīng)驗

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

專注于為中小企業(yè)提供網(wǎng)站建設、做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)普洱免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

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

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

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


 

allisons_city(from gamasutra)

 

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

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

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

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

2）必須進行多次試驗。

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

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

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

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

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

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

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

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

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

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

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

 

 

gifts(from gamasutra)

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

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

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

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

 

 

Skyscraper City(from gamasutra)

6）善于運用CSS知識

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

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

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

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

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

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

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

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

最好很精通CSS技能。

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

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

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

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

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

原文地址：http://www.html5cn.org/article-2541-1.html


網(wǎng)頁標題：開發(fā)HTML5跨平臺游戲相關(guān)經(jīng)驗
文章地址：http://www.5511xx.com/article/dpojeie.html