當我們的HTML5游戲Numolition已接近完成，我們決定把它全部帶走，并重建它的統一。 這竟然是一個令人興奮的和寶貴的經驗，一，我想將是值得與其他Web開發者分享。 進來吧，水的溫暖！
去年，我們發布了一個名為手機游戲Quento 。 它是完全用HTML5，包裹在我們的專有PhoneGap的替代，并推出許多應用程序商店與溫和的成功。
這場比賽使我記下了幾個剝離的想法。 一，我特別喜歡的是一個游戲一疊編號的瓷磚，玩家有通過組合數字和攻組，使他們消失，以清除的水平。 我在HTML5中，Quento塔建立了一個原型，這樣我就可以運行它由幾個同事在辦公室里通過簡單地交給他們一個手機，在瀏覽器中運行的游戲。
這些誰扮演的原型真的喜歡這個主意，所以我花了相當多的晚上和周末的設計水平和新的功能試驗。 該游戲是未來一直很好，我什至增加了使用localStorage中保存的水平，這是非常有益的期間通勤內置的關卡編輯器。 是的，Web技術肯定是很大的價值在這個階段。
玩轉注意 ：您可以在瀏覽器中播放的原型 （在Safari和Chrome測試）。 它甚至有水平的編輯器功能。
藝術方向樞軸
我是相當滿意的簡約風格，這是類似于Quento的。 它會不斷的開發時間縮短，使我們能夠快速釋放，讓Quento成為我們品牌的數學游戲 – 這是我似乎有一種親和力，而原因球隊打電話給我，他，誰，使網格與 – 號游戲。
同時，我們的藝術家，理查德，曾秘密準備的一音調上的藝術指導，他認為會令游戲中??脫穎而出。 一天早上，他發現這樣的：
這是點上。 我看到的效果和矯揉造作的人物，加之獨特的游戲，真的可以設置這個游戲分開。 這是前不久理查德生產更多的藝術作品，我們有一個合適的配樂。 本杰明，我們的iOS工程師之一，正在對我們自己的PhoneGap的選擇，因為我們曾與PhoneGap的一些性能問題。 而我把他們放在一起進行一個內部演示之前，我們每年公司之旅。
本場比賽甚至有一個新的名字：數字。 拆遷。 明白了嗎？ 哦，這個詞對谷歌零命中的時候。
內部啟動
我們內部發布之日，本場比賽是這樣的：
它運行在iOS和Android，它的分辨率固定為640×960像素，并且它一直只對WebKit的瀏覽器進行測試。 這種方法曾工作過，并且我們希望使它更加適應或調整它的其他決議和設備之前，以簡化游戲。
注 ：我們的做法是支持短短的決議，如3:4和2:3，然后使用CSS擴展，并用白色相匹配的怪板填充剩余空間。
現在回想起來，設置內部成立日期為原型之后合乎邏輯的下一步，因為現在的游戲有一個觀眾，是一個實際的釋放 。
該劇測試遵循了這一行程中，這是非常豐富的。 大家還是喜歡的游戲，他們不僅享受正常水平，但人們似乎更喜歡我們添加了特殊的塔模式。 我們了解到，所有50個書呆子都相互比較它們的高分，這使我們決定增加某種形式的排行榜。
然而，我們也看到了很多問題從基于Web的DOM和我們的游戲的CSS特性。 你看，在眼前這么多的Andr??oid設備上，我們注意到，一些器件表現出永久性的運動偽影，使毛刺，問題與Web字體，缺少的元素，而不是簡單的“錯誤”，可能是固定的許多其他問題。
相反，這些問題是如何通過特定設備的瀏覽器組件處理的渲染和部分卸載到GPU造成的。 我們無法修復的問題，代碼孤單。 我們只能夠使用晦澀的CSS技巧，這往往有副作用，以解決它們。
嘗試統一
回到公司，Q42，我們評估Numolition的當前狀態。 核心玩法是不夠好被釋放，這感覺真的很不錯。 什么感覺不是很好被渲染故障和性能上的一些設備。 盡管大多數人在Q42有很新的Andr??oid機型，而我們根本沒有做什么瘋狂的代碼，我們希望比賽多一點順利比??它運行。
注 ：我們的網絡游戲版本使用DOM和CSS，而不是帆布建成。 如果我們使用的畫布，我們不會有很多的平臺之間呈現差異。 然而，跨平臺性能，尤其是在舊的設備，是不太可能的東西，帆布（硬件加速與否）可以解決的開箱即用。
展望未來，釋放游戲原樣是一個選項。 用帆布重建是另一回事。 第三個建議，由本杰明給予，是讓統一一試，有以下原因：
- 雖然統一是專為3D游戲，它的開發者正致力于研究一種有前途的原生的2-D引擎，它已經被釋放。
- 它的免費許可 ，似乎讓發展和移動應用程序的分發不需要任何費用，只需要一個啟動畫面，并缺少一些我們覺得我們可以生活在沒有Pro的功能。
- 跨平臺自帶的開箱即用：臺式機，的iOS，安卓，Windows手機，Windows 8中，黑莓。
- 它允許開發在C＃或UnityScript （通常被稱為JavaScript的，即使它更類似于Microsoft的JScript.NET）。 這兩種語言都熟悉的球隊。
- 使用這將是一個很好的學習經驗。
- 它會為我們提供有價值的比較見解。
而且，哎，怎么努力會是什么？ 我們決定給它一個嘗試了兩個星期，看到多遠，我們可以得到。
不是很遠，它橫空出世。 然而，結果是有趣的。
統一從一個HTML5開發人員的角度
我們選擇了去，而不是UnityScript用C＃，，因為它基于類的性質，友好和熟悉的語法。 我們首先從字面上移植的處理的計算引擎現有的方法，而不是視覺效果。 例如，可檢測哪些瓦塊都受到一個給定的抽頭JavaScript的一個片段從這個轉換…
// returns an array of [$tile, $tile, $tile] that match the value of the given tile // optionally (depending on GameOptions) bombs will explode surrounding tiles, // and if those tiles are sets of numbers, they will chain a larger explosion this.getMatchingTiles = function(x, y) { // create an array of tiles to check and put the current one in there var tilesToCheck = [], had = {}, added = {}, valueToMatch = that.getCurrentTileValue(x, y), matchingTiles = []; _lastMatchingBombCount = 0; // helper function to add new tiles to the checking queue function addTileToQueue(x,y, fromDirectMatch, value) { var id = 'tile-' + x + '-' + y + '-' + value; // if x and y are within the frid and this tile hasn't been checked yet if (x >= 0 && y >= 0 && x < that.tilesX && y < that.tilesY && !had[id]) { had[id] = true; if (that.existsTile(x, y)) tilesToCheck.push([x, y, fromDirectMatch, value]); } } addTileToQueue(x, y, true, valueToMatch); }
……這在C＃中：
public List<Tile> GetMatchingTiles(Tile tile) { // stack of tiles to check Stack<CheckTileSetting> tilesToCheck = new Stack<CheckTileSetting> (); // hash of positions (and their value) that were already checked HashSet<string> had = new HashSet<string> (); List<string> added = new List<string> (); List<Tile> matchingTiles = new List<Tile> (); lastMatchingBombCount = 0; lastMatchingStarCount = 0; // adds a title to the stack to check, only if the tile exists // and not already checked (for this value) addTileToQueue addToQueue = delegate(CheckTileSetting cts) { string hadId = "Tile-" + cts.col + "-" + cts.row + "-" + cts.valToCheck; if (!had.Contains(hadId)) { had.Add(hadId); Tile tileToCheck != null) { tilesToCheck.Push(cts); } } }; // add the initial tile to the stack addToQueue (new CheckTileSetting { col = tile.col, row = tile.row, valToCheck = tile.val, fromDirectMatch = true }); }
在最初的幾個星期與統一工作，我有相當多的頭刮新手時刻。 我要忘記的東西一樣的像素和相對定位和習慣的相機，縮放，游戲物體，網格，渲染和著色器。
如何統一工程一個簡短的概述
在Unity項目開始，可以用來對一個菜單中，對于單個水平或什至對整個游戲的空白場景 。 這是一個3-D的容器，和一個攝像頭的位置朝向其中心： 0,0,0 （是的，三 ??軸：X，Y和Z）。 然后您可以從編輯器中添加游戲物體或掛鉤到這可以通過代碼的腳本 。 甲游戲物體只具有場景內的位置，并且它可以是一個空隙容器充當相對位置，它的孩子，或者它可以是一臺窗格中，或者它可以是任何目 （形狀）從一個簡單的立方體，以一個城堡。 這是所有基于組件：網格是一個組件，而是一個腳本，也和你可以將它們添加到任何游戲物體。 然后，添加材料 （紋理），這是當它開始看起來像一個游戲。
任何對象都可以移動或動畫 – 相對或絕對的 – 你可以控制相機，太。 因此，對于Numolition的菜單系統，我們畫漫畫的面板只有一次，然后從左側平移相機向右它們之間進行導航。
你實例化所有對象和地點在一個場景可以在層次結構中面板顯示了整個樹，這是統一的等效的DOM查看。 而游戲運行時，你必須到這個層次來考察項目的實時訪問，但你也可以自由地移動通過3-D空間，代表你目前的游戲。 這個免費的觀點是從實際的游戲觀點不同，可以讓你看到了什么從多個角度回事。 此派上了用場，我們在多個場合，當我們注意到項目（由于被放在后面的其他對象）是因為在太空中的3-D位置不可見
總體而言，統一的IDE提供的場景和財產核查人員是堅實的，可視化和實時性，并在某些情況下的3-D方法效果比一臺Web視圖更好，但我也發現自己丟失的Chrome瀏覽器的WebKit督察不時，包括它的靈活性，尤其是在腳本控制臺。
但我覺得少了點最像的CSS機修工：一種語言，以聲明的方式描述有一定的名稱，祖先路徑，上下文或行為類對象的外觀和感覺。 當然，統一提供主題化的機制，它的圖形用戶界面層 ，但它不一樣，幾乎一樣靈活的CSS，網頁的支柱之一。
這是，然而，在學習體驗的一部分。 前幾個星期后，上攻是，游戲的基本知識已經重建相當迅速，并且它不是我們有一個可玩的版本很久以前。
管理圖像進行跨平臺使用
我們的工作方式一個很好的方面是，統一讓視覺藝術家能夠輕松地做出貢獻。 理查德并沒有簡單地給我們提供了新的作品 – 他建立和調整精靈爆表，并添加粒子效果。 所有我們需要做的就是將它們連接起來，以在游戲中相應的事件。
使用Unity工作的另一個細微的方面是細粒度的控制你管理你的資產。 我們沒有預制棒所有我們將要使用的每個平臺的不同的圖像。 相反，這種情況發生編譯時，根據您已在您的項目的原始原稿。 您可以控制??默認的壓縮，覆蓋它特定的平臺，將其應用到多個圖像或每幅圖像，設定的最大分辨率，以2的內存優化等因素壓縮結果
這確實消除了很大的障礙，仍然是存在于網絡空間的今天，具有敏感的圖像格式仍然在多個迭代制作。 當然，這一切都與HTML5的到來，你今天可以完成它，如果你知道的來龍去脈，但使用Unity它只是在那里，今天，設計時考慮到手機游戲。
評估我們的統一游戲
因為游戲已經達到了為更好，功能更完整的比我們離開了HTML5版本的時候，我們決定花一些時間來評估，迄今為止的結果。
我們很驚訝。 本場比賽順利跑了，我們測試了它在任何高端設備上，并運行Android 2.3的喜歡舊設備真的很好。 當然，幀速率是不一樣的，但這里的大的區別：隨著我們的HTML5（即DOM和CSS）的游戲版本，設備和解決方案之間的差異主要呈現故障，設備特定的打嗝或錯誤。 憑借我們統一的版本，唯一的區別是幀速率和低端設備的內存使用情況。
我們還沒有編寫任何代碼來優化游戲如何將運行。 如果設備運行Android 2.3或iOS 6或更高版本，它只是工作。 與此同時，我們決定提交測試版本亞馬遜Kindle商店 – 盡管沒有實際的Kindle來測試，甚至曾試圖在Kindle的模擬器運行游戲。 這就是信心的結果令我們。
注意 ：由于游戲并沒有完全結束，我們沒有將它發布到Kindle呢。 從那時起，我們已經能夠拿起的Kindle Fire在當地的商店。 你猜怎么著？ 游戲運行精辟！
一個巨大的失望在統一的境界，但是，是資產存儲庫 。 什么是錯的充電附加組件，如矢量繪圖和補間圖書館，但它為其他國家的標準來收取他們的代碼，是開放的Web，這是每個人都試圖推進的境界完全相反。
除了使用社交代碼來把事情做好的，統一的論壇都充滿了開發商展示他們的一次性包裝解決具體問題，從其他用戶的功??能要求，和bug提交，每一個人開發者希望修復它們。 而因為沒有審判這些附加組件，我們最終購買了其中的八扔掉五六個，因為他們根本不是很好。
Windows Phone的試用模式
對我們的開發過程結束，我們了解到的試用模式下的Windows Phone 。 這讓玩家下載游戲免費，然后購買它，但它不同于一個應用程序內購買，因為它不要求開發人員為每個特定的應用程序商店指定購買的項目，然后處理游戲中的每一個購買。 當用戶購買一個應用程序，在試用期間，他們通過正規的購買往返機票，仿佛他們已經購買的游戲在商店直接，然后運回游戲。
團結提供了這種支持通過一個簡單的API ：
UnityEngine.Windows.isOnAppTrial UnityEngine.Windows.PurchaseApp()
我們了解到，用戶幾乎期待的試用模式下Windows Phone的游戲，所以統一提供這樣的功能開箱即用的是一種真正的享受。 實現我們花了不到一天的時間，它可能已經對微軟的選擇促成了我們的特色游戲的應用程序商店的頭版在一些國家，以及在積極的評價 。
不利的一面是，團結不提供相似的基本的API，用于執行應用內購買。 要做到這一點，開發人員仍然需要或者建立它自己或去與在資源商店中可用的第三方插件之一。
為什么我們花了這么長時間
我們開始重寫游戲周邊2013年9月和游戲是2014年3月發布。為什么我們花了這么久的原因有三方面，并沒有具體涉及到任何統一或Web技術。
首先，我們決定去一個漫畫書的設計，所以我們的面板需要舒展 。
因為我們在Unity重建的游戲，我們認為我們會解決的菜單系統，它由漫畫書頁與面板的響應面。 當時的想法是，為了不舒展的任何行，這會顯得別扭按比例繪制這些面板到屏幕上。
這花了我們多次嘗試得到的權利。 它涉及通過網格（即形狀）上的蒼蠅，加載和縮放的材料，做了一大堆數學的產生在代碼中創建的面板。
其次，我們要整合Facebook的排行榜 。 這并不困難，但它只是需要時間。 我們需要弄清楚如何正確地支持誰已經安裝了Facebook應用程序和那些誰也不能同時使用的用戶。 而且由于Facebook的SDK的團結仍然在發展，我們在這里和那里掙扎。 但我們認為，其結果證明花在這個時間。
第三， 支離破碎的規劃 。 我們只是有許多其他項目和很酷的東西怎么回事，所以有時我們不能觸摸一行Numolition代碼的幾個星期 – 雖然我們仍然有周末和晚上。
結論
因此，沒有團結戰勝HTML5的？ 不，也不是這篇文章意在回答這個問題。 這項回顧性的目的，是為了讓您了解什么感覺的一個HTML5開發誰使用DOM和CSS強烈雙方進入統一的游戲開發。
你看，我還是覺得HTML5是……嗯，受詛咒的“真棒！ 沒有它，我們就不會已經能夠建立一個網站，如國家博物館的，我們感到非常自豪的項目之一。 HTML5是一天比一天好了，我們將再次同時使用HTML5和團結為未來的項目。 對于手機游戲，我們認為Web和它的第三方工具的陣容，包裝技術和硬件加速畫布解決方案還有很長的路要走，而統一提供了一個相當有趣的選擇正確的開箱即用。
簡單地說，我們真的很高興與我們的游戲的當前狀態，并給予統一一試提供了寶貴的一課。 團結的偉大業績，細粒度地控制資產管理和部署到多個平臺這么輕易的能力是統一了香草的HTML5大的優勢。
經步入統一世界作為一個Web開發人員，我認為它是安全地說，很多是從統一的方式了解到。 另一方面，單位可以受益于網絡的工作方式 – 例如，開放性和從邏輯聲明的渲染機制的分離。 兩者合一和網絡可以學習，相互受益。
比較
我坐下來與Numolition團隊繪制發展與統一，并與HTML5手機游戲的利弊清單（雖然重點在DOM和CSS與后者）。 這份名單是主觀的就可以了，但它可能是有益的，如果你正在考慮開發您的下一場比賽的統一。
團結，好
- 性能是偉大的。
- 出版是跨平臺的，高度可靠。
- 管理和資產控制容易。
- 藝術家可以很容易地做出貢獻。
- C＃語法還是很友好的。
- 相機定位很容易（相對于左/頂，DOM的回流，等等）。
- 它被證明為專業的游戲。
- 行為是建立在（重力，碰撞等）。
- 場景和關卡編輯器來開箱。
團結，壞
- 2-D仍然是3-D。 它在很大程度上依賴于網格，渲染器和所有的其他的3-D的東西。 （這就像使用WebGL的和Three.js做一個2維游戲）。
- 統一的等效的DOM是層次結構。 一個機制，如CSS來通過代碼生成的風格項目將受到歡迎。
- 做這樣的事情的編碼我自己阿爾法灰度著色器仍然給了我的噩夢。
- 商業資源商店失去了開放的Web，而Git的是試錯和不推技術或可用性邁進。
- 也有小的煩惱。 例如，觸摸代碼和游戲運行，同時節省使得游戲崩潰，這似乎是可以避免的。
- 如果你需要所有的Pro功能，商業執照是昂貴的： 4500美元每個開發人員支持iOS和Android 。
- MonoDevelop的是默認的代碼編輯器，它的工作，但它不是太棒了。 （您可以使用任何其他的編輯器，當然，如Windows上的Visual Studio，但在Mac上的代碼完成，你會發現自己堅持使用MonoDevelop的一段時間。）
HTML5，好
- 這是2-D制成（與DOM，CSS和帆布）。
- CSS是非常強大 – 你會錯過它。
- WebKit的檢查！
- 有沒有在開發過程中的編譯步驟是一個真正的雙贏。
- 只需使用您喜歡的文本編輯器，并開始派對 – 無需IDE或軟件。
- 它是理想的原型。
- Web字體是靈活的（陰影，輪廓等）。
- 視覺樣式和行為可以單獨申報，并應用在運行時。
- 網絡是開放的，向前走，這在很大程度上歸功于社會。
HTML5，壞
- 使用DOM和CSS時，手機游戲的性能看齊，不符合統一。
- 從畫布上表現為與第三方硬件加速解決方案要好得多，但你會失去了好幾個老設備的支持，以及可用的解決方案比僅僅有這一個工具做的工作為你flakier。
- 視覺效果是不可靠的，并有極大的不同設備之間的包裹在本地代碼瀏覽器組件依賴時。
- 一個土生土長的包裝需要發布一個移動應用程序。
- 使用Web字體的手機游戲在某些情況下落入下的“再分配”，并會在我們的情況下產生的高額許可費。
現在，您已經閱讀所有關于如何我們的游戲走過來的，你可能有興趣體驗它自己。 技術細節不談，這是一個具有挑戰性的益智游戲。 您可以通過拖放Numolition了解更多信息，但你不就得了，當然。
