当我们的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特性。 你看，在眼前这么多的Android设备上，我们注意到，一些器件表现出永久性的运动伪影，使毛刺，问题与Web字体，缺少的元素，而不是简单的“错误”，可能是固定的许多其他问题。
相反，这些问题是如何通过特定设备的浏览器组件处理的渲染和部分卸载到GPU造成的。 我们无法修复的问题，代码孤单。 我们只能够使用晦涩的CSS技巧，这往往有副作用，以解决它们。
尝试统一
回到公司，Q42，我们评估Numolition的当前状态。 核心玩法是不够好被释放，这感觉真的很不错。 什么感觉不是很好被渲染故障和性能上的一些设备。 尽管大多数人在Q42有很新的Android机型，而我们根本没有做什么疯狂的代码，我们希望比赛多一点顺利比它运行。
注 ：我们的网络游戏版本使用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了解更多信息，但你不就得了，当然。
近期评论