? ? ??**前言** ? ? ? 迪斯尼《[Find Your Way to OZ](http://www.findyourwaytooz.com/)》這個貼近地氣的游戲我在最新一期《程序員》雜志的《從HTML5移動應用現狀談發展趨勢》這篇文章里有所提及，它借用了近期上映的《[魔境仙蹤](http://movie.douban.com/subject/4816602/)》電影的設定（設定來自于經典故事《綠野仙蹤》，看過這個電影的同學們會深有感觸），構建了一個等同的宏大游戲世界。同時迪斯尼又和谷歌合作，把它作為Chrome瀏覽器性能和HTML5技術的一個show case。對于這樣一個使用了WebGL 3D、攝像頭、3D音效等多種先進技術、支持桌面和移動端、品質出色的HTML5游戲，了解它背后的實現原理和技巧必然對于我們來說有著非常巨大的參考意義。  ? ? ??這篇文章我早就想翻譯出來，幫助大家更好的了解HTML5在游戲開發里的應用和國外的應用情況，但是這篇文章實在太長，所以只能分次刊載，以饗讀者。 ? ? ??此教程在我近期HTML5介紹的文章中難度可稱高級，適合有一定經驗的開發者閱讀和學習。 ? ? ??**介紹** ? ? ??“尋找奧茲之路”是迪斯尼為谷歌Chrome帶來的全新體驗。它讓你在互動的旅程中穿越堪薩斯馬戲團，然后通過一個巨大的風暴到達奧茲王國。  ? ? ??我們的目標是結合瀏覽器的技術能力，以創建一種充滿樂趣、身臨其境的體驗，用戶可以與電影之間形成一個強大的聯系。 ? ? ??這個游戲的工作實在是太龐大，所以我們只能列出一些章節，把我們認為有趣的技術故事寫出來。教程的難度隨著進度會逐漸增加。 ? ? ??我們有很多人努力工作來創建更好的體驗，但是太多無法一一列舉。請訪問[該網站](http://findyourwaytooz.com/)，體驗整個頁面下的完整故事。 ? ? ??**預覽** ? ? ??在PC端《尋找奧茲之路》是一個豐富的身臨其境的世界。我們把3D和傳統的電影制作靈感結合起來，創造一個好幾層的接近現實的場景效果。其中最突出的技術是用Three.js引入WebGL，使用CSS3特性來定制著色器和DOM動畫元素。除此之外，getUserMedia API（WebRTC）增強了互動體驗，允許用戶直接從攝像頭添加自己的形象，以及WebAudio帶來了3D音效。 ? ? ??但是這種技術體驗的神奇之處在于它們是如何融合為一體的。這也是面臨的主要挑戰之一：如何把視覺效果和互動元素融合在一起來創建一個一致的場景？這種視覺的復雜性非常難以管理：很難說清楚我們在任何一個時間需要開發什么場景。 ? ? ??為了解決視覺效果和優化這一問題，我們大量使用了一個控制面板，用于捕獲我們正在檢查的那個時間點的所有相關設置。在瀏覽器中可以實時修正場景中的一切，例如亮度，縱向深度，伽瑪線等等。任何人都可以在體驗中嘗試調整重要參數的值，參與并發現什么效果最好。 ? ? ??在分享我們的秘密之前，我要提醒你，它可能會導致崩潰。確保你沒有正在瀏覽什么重要的東西，并且在訪問該網站的網址時添加[?debug=on](http://findyourwaytooz.com/?debug=on)。等待網站加載，一旦你進入后按Ctrl+I鍵，會看到右手邊出現一個下拉菜單。如果取消選中“退出相機路徑”選項，你可以使用A、W、S、D鍵和鼠標在空間中自由的移動。  ? ? ??我們不會詳述這里的所有設置，但是我們鼓勵你試驗：按鍵顯示不同的場景中不同的設置。在最后的風暴場景中有一組額外的按鍵：Ctrl+A，可以切換播放的動畫。在這個場景中，如果你按Esc（退出鼠標鎖定功能），再次按下Ctrl+I鍵可以進入風暴場景的特殊設置。看看四周，并且截取一些像下面這樣的漂亮明信片。  ? ? ??要做到這一點以確保其對我們的需求具有足夠的靈活性，我們采用了一個很棒的名為dat.gui的框架（可以在[這里](http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage)看看過去關于如何使用它的教程）。它允許我們能夠迅速改變暴露給游客的設置。 ? ? ??**有點像繪景** ? ? ??許多經典的迪士尼電影和動畫創建場景意味著合并不同的層。有外景層、單元動畫層，以及物理設置層和通過玻璃繪畫獲得的頂層：這種技術稱為[繪景](http://baike.baidu.com/view/2114328.htm)。 ? ? ??在許多方面我們創造的體驗的結構是相似的，即使有些“層”遠遠超過了靜態的視覺效果。事實上，它們根據更為復雜的計算影響事物看起來的方式。然而，至少在大畫面的水平，我們處理視圖，將一個合成到另外一個之上合。在頂部，你看到一個UI層，其下是3D場景：它由不同的場景組件組成。 ? ? ??頂部接口層使用DOM和CSS 3創建。事件通信使用Backbone路由器+ onHashChange HTML5事件來控制哪塊區域響應動畫。（項目源代碼：/develop/coffee/router/Router.coffee）。 ? ? ??**教程：Sprite表和視網膜支持** ? ? ??我們依賴一種有趣的優化技術，把多個接口層圖像合并為一張單獨的PNG來減少服務器請求。在這個項目中，接口由多于70 張的圖像組成（不包括3D紋理），并且全部預加載以減少網站延??遲。你可以在這里看到最新的[Sprite表](http://en.wikipedia.org/wiki/Sprite_(computer_graphics))： ? ? ??正常顯示 - [http://findyourwaytooz.com/img/home/interface_1x.png](http://findyourwaytooz.com/img/home/interface_1x.png) ? ? ??Retina顯示屏 - [http://findyourwaytooz.com/img/home/interface_2x.png](http://findyourwaytooz.com/img/home/interface_2x.png) ? ? ??下面是我們如何發揮Sprite表優勢的一些技巧，在視網膜設備上如何使用它們，以及如何將接口盡可能設置的簡潔而整齊。 ? ? ??創建Sprite表 ? ? ??我們使用[TexturePacker](http://www.codeandweb.com/texturepacker)來創建任何你需要的Sprite表格式。在這種情況下，我們采用[EaselJS](http://www.createjs.com/#!/EaselJS)，它非常整潔，并且可以用于創建動畫Sprite。 ? ? ??使用生成的Sprite表 ? ? ??一旦創建了Sprite表，你應該看到這樣的一個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] }, } ~~~ ? ? ? 其中： - ? ? ? ? images指向sprite表的地址 - ? ? ? ? frames是每個UI元素的坐標[x, y, width, height] - ? ? ? ? animations?是每項內容的名稱 ? ? ??請注意，我們已經使用了高清圖像來創建Sprite表，然后我們只需通過調整圖像尺寸為一半來創建正常版本。 ? ? ??融合一切 ? ? ??現在，我們只需要一段Javascript代碼來使用它。 ~~~ var SSAsset = function (asset, div) { var css, x, y, w, h; // Divide 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 DIV div.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')); ~~~ ? ? ??[在這里下載完整的示例](http://www.html5rocks.com/static/demos/oz/assets/ss_example.zip) ? ? ??如果要多了解一些可變像素密度，你可以看看Boris SMUS的[這篇文章](http://www.html5rocks.com/en/mobile/high-dpi/)。 ? ? ??**3D內容管道** ? ? ??環境體驗建立在WebGL層之上。當你想到一個3D場景，最棘手的問題之一是要如何確保你從建模，動畫和特效這些領域都可以創建最富有表現潛力的內容。從許多方面來說，這個問題的核心是內容管道：用一個定好的程序從3D場景來創建內容。 ? ? ??我們想創造一個令人振奮的世界，所以需要一個可靠的進程幫助3D藝術家來創建它。他們將需要給予他們的三維建模和動畫軟件盡可能多的表達自由，而我們將需要通過代碼將它們呈現在屏幕上。 ? ? ??我們在這類問題上已經工作了一段時間，因為過去每次我們創建了一個3D網站，所以發現之前使用工具的一些限制。后來我們創造了這個被稱為3D Librarian的工具，正準備要把它應用到真正的工作上。 ? ? ??這個工具有一些歷史：它最初是為了Flash誕生的，它會允許你把一個大的Maya場景作為一個單一的壓縮文件為拆包運行時進行優化。這是最優的原因是因為它有效的把場景包裝為基本相同的數據結構，在渲染和動畫時進行操作。這樣在文件加載時只需要做很少的解析。Flash中的解包速度非常快，因為文件是AMF格式，Flash能夠原生??解壓。在WebGL中使用相同的格式，需要CPU多做一些工作。事實上，我們不得不重新創建一個解壓數據JavaScript代碼層，這基本上會將這些文件解壓，并重新創建WebGL所需的數據結構。解壓整個3D場景是對CPU有一些負擔：解包游戲的場景1在中高端機上需要約2秒鐘。所以為此我們在“場景設置”時間（實際上是場景出現之前）用Web Workers技術來實現，所以不會影響用戶的體驗。 ? ? ??這個方便的工具可以導入3D場景：模型、紋理和骨骼動畫。你可以創建一個單一的庫文件，它稍后能被3D引擎所載入。 ? ? ??不過我們曾經遇到一個問題，現在用WebGL來處理。因此，我們創建了一個特定的JavaScript層，使用3D庫來壓縮3D場景文件，并把它們翻譯成正確的WebGL能理解的格式。 ? ? ??**教程：要有風** ? ? ??在“尋找奧茲之路”中一個反復出現的主題就是風。劇情的主線由弱到強的風所串起。 ? ? ??狂歡節的第一個場景相對平靜。經歷各種場景，用戶逐漸體驗強風，最后來到最終的場景，風暴中。 ? ? ??因此，重要的是提供一個身臨其境的風的效果。 ? ? ??為了實現這種效果，我們在3個狂歡節的場景中填充比較軟的對象，例如帳篷和氣球。  ? ? ? （待續） ? ? ? 譯自：[http://www.html5rocks.com/en/tutorials/casestudies/oz/](http://www.html5rocks.com/en/tutorials/casestudies/oz/) ? ? ? 轉載請注明：來自蔣宇捷的博客（http://blog.csdn.net/hfahe）