怎樣開發(fā)優(yōu)秀的HTML5游戲-迪斯尼《尋找奧茲之路》游戲技術(shù)詳解（一）

迪斯尼《Find Your Way to OZ》這個貼近地氣的游戲我在最新一期《程序員》雜志的《從HTML5移動應(yīng)用現(xiàn)狀談發(fā)展趨勢》這篇文章里有所提及，它借用了近期上映的《魔境仙蹤》電影的設(shè)定（設(shè)定來自于經(jīng)典故事《綠野仙蹤》，看過這個電影的同學(xué)們會深有感觸），構(gòu)建了一個等同的宏大游戲世界。同時迪斯尼又和谷歌合作，把它作為Chrome瀏覽器性能和HTML5技術(shù)的一個show case。對于這樣一個使用了WebGL 3D、攝像頭、3D音效等多種先進技術(shù)、支持桌面和移動端、品質(zhì)出色的HTML5游戲，了解它背后的實現(xiàn)原理和技巧必然對于我們來說有著非常巨大的參考意義。

這篇文章我早就想翻譯出來，幫助大家更好的了解HTML5在游戲開發(fā)里的應(yīng)用和國外的應(yīng)用情況，但是這篇文章實在太長，所以只能分次刊載，以饗讀者。

此教程在我近期HTML5介紹的文章中難度可稱高級，適合有一定經(jīng)驗的開發(fā)者閱讀和學(xué)習(xí)。

介紹

“尋找奧茲之路”是迪斯尼為谷歌Chrome帶來的全新體驗。它讓你在互動的旅程中穿越堪薩斯馬戲團，然后通過一個巨大的風(fēng)暴到達奧茲王國。

我們的目標(biāo)是結(jié)合瀏覽器的技術(shù)能力，以創(chuàng)建一種充滿樂趣、身臨其境的體驗，用戶可以與電影之間形成一個強大的聯(lián)系。

這個游戲的工作實在是太龐大，所以我們只能列出一些章節(jié)，把我們認為有趣的技術(shù)故事寫出來。教程的難度隨著進度會逐漸增加。

我們有很多人努力工作來創(chuàng)建更好的體驗，但是太多無法一一列舉。請訪問該網(wǎng)站，體驗整個頁面下的完整故事。

預(yù)覽

在PC端《尋找奧茲之路》是一個豐富的身臨其境的世界。我們把3D和傳統(tǒng)的電影制作靈感結(jié)合起來，創(chuàng)造一個好幾層的接近現(xiàn)實的場景效果。其中最突出的技術(shù)是用Three.js引入WebGL，使用CSS3特性來定制著色器和DOM動畫元素。除此之外，getUserMedia API（WebRTC）增強了互動體驗，允許用戶直接從攝像頭添加自己的形象，以及WebAudio帶來了3D音效。

但是這種技術(shù)體驗的神奇之處在于它們是如何融合為一體的。這也是面臨的主要挑戰(zhàn)之一：如何把視覺效果和互動元素融合在一起來創(chuàng)建一個一致的場景？這種視覺的復(fù)雜性非常難以管理：很難說清楚我們在任何一個時間需要開發(fā)什么場景。

為了解決視覺效果和優(yōu)化這一問題，我們大量使用了一個控制面板，用于捕獲我們正在檢查的那個時間點的所有相關(guān)設(shè)置。在瀏覽器中可以實時修正場景中的一切，例如亮度，縱向深度，伽瑪線等等。任何人都可以在體驗中嘗試調(diào)整重要參數(shù)的值，參與并發(fā)現(xiàn)什么效果最好。

在分享我們的秘密之前，我要提醒你，它可能會導(dǎo)致崩潰。確保你沒有正在瀏覽什么重要的東西，并且在訪問該網(wǎng)站的網(wǎng)址時添加?debug=on。等待網(wǎng)站加載，一旦你進入后按Ctrl+I鍵，會看到右手邊出現(xiàn)一個下拉菜單。如果取消選中“退出相機路徑”選項，你可以使用A、W、S、D鍵和鼠標(biāo)在空間中自由的移動。

我們不會詳述這里的所有設(shè)置，但是我們鼓勵你試驗：按鍵顯示不同的場景中不同的設(shè)置。在最后的風(fēng)暴場景中有一組額外的按鍵：Ctrl+A，可以切換播放的動畫。在這個場景中，如果你按Esc（退出鼠標(biāo)鎖定功能），再次按下Ctrl+I鍵可以進入風(fēng)暴場景的特殊設(shè)置。看看四周，并且截取一些像下面這樣的漂亮明信片。

要做到這一點以確保其對我們的需求具有足夠的靈活性，我們采用了一個很棒的名為dat.gui的框架（可以在這里看看過去關(guān)于如何使用它的教程）。它允許我們能夠迅速改變暴露給游客的設(shè)置。

有點像繪景

許多經(jīng)典的迪士尼電影和動畫創(chuàng)建場景意味著合并不同的層。有外景層、單元動畫層，以及物理設(shè)置層和通過玻璃繪畫獲得的頂層：這種技術(shù)稱為繪景。

在許多方面我們創(chuàng)造的體驗的結(jié)構(gòu)是相似的，即使有些“層”遠遠超過了靜態(tài)的視覺效果。事實上，它們根據(jù)更為復(fù)雜的計算影響事物看起來的方式。然而，至少在大畫面的水平，我們處理視圖，將一個合成到另外一個之上合。在頂部，你看到一個UI層，其下是3D場景：它由不同的場景組件組成。

頂部接口層使用DOM和CSS 3創(chuàng)建。事件通信使用Backbone路由器+ onHashChange HTML5事件來控制哪塊區(qū)域響應(yīng)動畫。（項目源代碼：/develop/coffee/router/Router.coffee）。

教程：Sprite表和視網(wǎng)膜支持

我們依賴一種有趣的優(yōu)化技術(shù)，把多個接口層圖像合并為一張單獨的PNG來減少服務(wù)器請求。在這個項目中，接口由多于70 張的圖像組成（不包括3D紋理），并且全部預(yù)加載以減少網(wǎng)站延遲。你可以在這里看到最新的Sprite表：

正常顯示

Retina顯示屏

下面是我們?nèi)绾伟l(fā)揮Sprite表優(yōu)勢的一些技巧，在視網(wǎng)膜設(shè)備上如何使用它們，以及如何將接口盡可能設(shè)置的簡潔而整齊。

創(chuàng)建Sprite表

我們使用TexturePacker來創(chuàng)建任何你需要的Sprite表格式。在這種情況下，我們采用EaselJS，它非常整潔，并且可以用于創(chuàng)建動畫Sprite。

使用生成的Sprite表

一旦創(chuàng)建了Sprite表，你應(yīng)該看到這樣的一個JSON文件：

{
 "images": ["interface_2x.png"],
 "frames": [
 [2, 1837, 88, 130],
 [2, 2, 1472, 112],
 [1008, 774, 70, 68],
 [562, 1960, 86, 86],
 [473, 1960, 86, 86]
 ],

 "animations": {
 "allow_web":[0],
 "bottomheader":[1],
 "button_close":[2],
 "button_facebook":[3],
 "button_google":[4]
 },
}

其中：

請注意，我們已經(jīng)使用了高清圖像來創(chuàng)建Sprite表，然后我們只需通過調(diào)整圖像尺寸為一半來創(chuàng)建正常版本。

融合一切

現(xiàn)在，我們只需要一段Javascript代碼來使用它。

var SSAsset = function (asset, p) {
 var css, x, y, w, h;

 // pide the coordinates by 2 as retina devices have 2x density
 x = Math.round(asset.x / 2);
 y = Math.round(asset.y / 2);
 w = Math.round(asset.width / 2);
 h = Math.round(asset.height / 2);

 // Create an Object to store CSS attributes
 css = {
 width : w,
 height : h,
 'background-image' : "url(" + asset.image_1x_url + ")",
 'background-size' : "" + asset.fullSize[0] + "px " + asset.fullSize[1] + "px",
 'background-position': "-" + x + "px -" + y + "px"
 };

 // If retina devices

 if (window.devicePixelRatio === 2) {

 /*
 set -webkit-image-set
 for 1x and 2x
 All the calculations of X, Y, WIDTH and HEIGHT is taken care by the browser
 */

 css['background-image'] = "-webkit-image-set(url(" + asset.image_1x_url + ") 1x,";
 css['background-image'] += "url(" + asset.image_2x_url + ") 2x)";

 }

 // Set the CSS to the p
 p.css(css);
};

這是你如何使用它的代碼：

logo = new SSAsset(
{
 fullSize : [1024, 1024], // image 1x dimensions Array [x,y]
 x : 1790, // asset x coordinate on SpriteSheet 
 y : 603, // asset y coordinate on SpriteSheet
 width : 122, // asset width
 height : 150, // asset height
 image_1x_url : 'img/spritesheet_1x.png', // background image 1x URL
 image_2x_url : 'img/spritesheet_2x.png' // background image 2x URL
},$('#logo'));

在這里下載完整的示例

如果要多了解一些可變像素密度，你可以看看Boris SMUS的這篇文章。

3D內(nèi)容管道

環(huán)境體驗建立在WebGL層之上。當(dāng)你想到一個3D場景，最棘手的問題之一是要如何確保你從建模，動畫和特效這些領(lǐng)域都可以創(chuàng)建最富有表現(xiàn)潛力的內(nèi)容。從許多方面來說，這個問題的核心是內(nèi)容管道：用一個定好的程序從3D場景來創(chuàng)建內(nèi)容。

我們想創(chuàng)造一個令人振奮的世界，所以需要一個可靠的進程幫助3D藝術(shù)家來創(chuàng)建它。他們將需要給予他們的三維建模和動畫軟件盡可能多的表達自由，而我們將需要通過代碼將它們呈現(xiàn)在屏幕上。

我們在這類問題上已經(jīng)工作了一段時間，因為過去每次我們創(chuàng)建了一個3D網(wǎng)站，所以發(fā)現(xiàn)之前使用工具的一些限制。后來我們創(chuàng)造了這個被稱為3D Librarian的工具，正準(zhǔn)備要把它應(yīng)用到真正的工作上。

這個工具有一些歷史：它最初是為了Flash誕生的，它會允許你把一個大的Maya場景作為一個單一的壓縮文件為拆包運行時進行優(yōu)化。這是最優(yōu)的原因是因為它有效的把場景包裝為基本相同的數(shù)據(jù)結(jié)構(gòu)，在渲染和動畫時進行操作。這樣在文件加載時只需要做很少的解析。Flash中的解包速度非?？?，因為文件是AMF格式，F(xiàn)lash能夠原生解壓。在WebGL中使用相同的格式，需要CPU多做一些工作。事實上，我們不得不重新創(chuàng)建一個解壓數(shù)據(jù)JavaScript代碼層，這基本上會將這些文件解壓，并重新創(chuàng)建WebGL所需的數(shù)據(jù)結(jié)構(gòu)。解壓整個3D場景是對CPU有一些負擔(dān)：解包游戲的場景1在中高端機上需要約2秒鐘。所以為此我們在“場景設(shè)置”時間（實際上是場景出現(xiàn)之前）用Web Workers技術(shù)來實現(xiàn)，所以不會影響用戶的體驗。

這個方便的工具可以導(dǎo)入3D場景：模型、紋理和骨骼動畫。你可以創(chuàng)建一個單一的庫文件，它稍后能被3D引擎所載入。

不過我們曾經(jīng)遇到一個問題，現(xiàn)在用WebGL來處理。因此，我們創(chuàng)建了一個特定的JavaScript層，使用3D庫來壓縮3D場景文件，并把它們翻譯成正確的WebGL能理解的格式。

教程：要有風(fēng)

在“尋找奧茲之路”中一個反復(fù)出現(xiàn)的主題就是風(fēng)。劇情的主線由弱到強的風(fēng)所串起。

狂歡節(jié)的第一個場景相對平靜。經(jīng)歷各種場景，用戶逐漸體驗強風(fēng)，最后來到最終的場景，風(fēng)暴中。

因此，重要的是提供一個身臨其境的風(fēng)的效果。

為了實現(xiàn)這種效果，我們在3個狂歡節(jié)的場景中填充比較軟的對象，例如帳篷和氣球。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com