火盒CEO王楠：开发工具决定Html5游戏制作水准和精细化程度

小篱

　　GameRes游资网4月16日在厦门举办首场HTML5主题沙龙，沙龙邀请了众多知名H5游戏从业小伙伴，共同探讨H5游戏的未来发展趋势。厦门火盒CEO王楠作为本次沙龙重量嘉宾出席，并发表主题演讲。

　　王楠，厦门火盒网络科技联合创始人。曾在上海育碧和德国Yager担任关卡设计师，作品包括《幽灵行动》、《贝奥武夫》、《特种部队》、《死亡岛2》等，回国后在厦门梦加网络科技担任《蒸汽之城》制作人。之后联合创建了游戏引擎研发公司厦门火盒网络科技，负责全功能HTML5游戏引擎Fireball开发。

　　以下为王楠演讲：

　　感谢主办方，很高兴今天有机会跟大家分享。我今天来到这个沙龙，相信和大家有着相同的原因，就是我们都觉得 HTML5是个很有意思的东西，他是一种新的游戏载体和传播分发形式，可能孕育一个目前还是蓝海的市场。我们今天除了讨论 HTML5众所周知的优势以外，还会重点说一下HTML5除此之外的重要意义。

　　自我介绍一下，我是来自厦门火盒网络科技的王楠，我和我的小伙伴之前的经历差不多，最开始都是在主机游戏行业做研发，之后页游、手游这些都有做过，用过从虚幻到 Unity 和 Cocos 的各种游戏引擎。后来我们都跑来做 HTML5相关技术的开发，原因就是我们觉得 HTML5是一种能够改变世界，当然也会改变整个游戏研发行业的新技术。

　　传播和分发上的优势

　　HTML5在传播分发方面的优势大家应该比较熟悉了，前面几位嘉宾也都讲的很好，这里就简单复习一下吧。

　　首先比起需要下载的 app，HTML5是直接到达用户的，这个优势在今后网速和流量成本进一步降低后对比原生 app 会更加明显。

　　接下来从生产部署的角度上说，HTML5游戏能够很容易实现热更新，配合一些持续集成系统和前端工程，很多情况下更新游戏甚至是对用户来说是无法察觉的，不需要停机维护。

　　HTML5 的形式非常灵活，既可以在浏览器中运行，也可以内置于社交网络和其他超级 app，还能够同时在传统渠道推广打包成原生 app 的下载版本，通过网页版让用户试玩并转化为下载，在目前传统渠道推荐位置成为紧俏资源时，是一种运营推广的很好的尝试。

　　最后，HTML5不仅可以用来生产一个完整的游戏，还能够作为部件存在在其他 app 里，负责菜单、社交、支付等原生 app 不容易处理的部分。

　　可以回避的劣势

　　大家既然很清楚 HTML5的优势，对其弱点肯定也不陌生，这里我想讲的，主要是这些弱点并不一定都是要真刀真枪的去解决的，很多时候都可以绕道回避。

　　关于浏览器兼容性和体验问题，这些问题你我都清楚，手机操作系统的厂商也了解，在他们着手解决这些问题之前，我们有很多方法可以避开。

　　首先就是游戏设计上，如果你的游戏主要在浏览器里传播，就应该从游戏设计出发考虑各大浏览器的兼容性，减小游戏画面尺寸，不要使用可能引起冲突的复杂手势等等。

　　虽然像 iOS 官方的 Safari 这样的浏览器对很多 HTML5游戏的支持有问题，我们还是可以在市面上找到很多很多其他的专门为 HTML5游戏优化过的浏览器，不光可以比较完美的实现全屏和解决手势冲突问题，这些浏览器往往还能通过收藏、记录等功能帮助用户保存游戏的地址，方便二次进入。

　　最后如果实在解决不了的兼容性问题，还可以把 HTML5游戏打包成原生应用，然后配合浏览器里的缩水试玩版推广嘛。

　　下面我们说性能问题，其实不管是 Cocos 还是白鹭，都通过 runtime 的方式解决了很大一部分性能问题，我觉得对于 HTML5开发者而言，现在H5游戏能够达到的性能已经很够用了。

　　由于研发成本、游戏设计和内容量的限制，即使是原生游戏，目前市面上大部分也没有利用到百分百的设备运算能力。开发 HTML5游戏可以先从相对轻量或中度的题材入手，等到技术进一步成熟了再上马做题材高大上画面亮闪闪的重度游戏，也是个不错的策略。

　　另外，游戏是否流畅，体验是否优秀，主要不是看性能发挥的怎样，而是看制作细节和用户体验是否精致到位，通过足够的动画帧数，巧妙安排的资源，再配合合适的工具，可以在不需要很高性能的情况下做出画面精致、体验流畅的佳作。

　　除了传播和分发，HTML5还意味着什么

　　说完了大家都知道的，下面我想谈一些游戏行业的人还不了解，但能够真正让 HTML5作为一种新技术改变我们行业的东西。

　　除了分发能力，HTML5还是一种有划时代意义的技术和工具，这种工具能够帮助我们切实提高开发效率，解决很多在手游行业大家都会遇到的痛点。下面我们就详细介绍这些优势。

　　HTML5在开发移动端游戏时，效率是比原生 app 高很多的，有以下几个原因：

　　HTML5游戏部署和调试非常方便，基本上一个浏览器就都能够解决。原生 app 游戏在部署和调试之前，往往需要经过引擎脚本到原生语言的转换，再加上处理资源和添加各种 SDK 的过程，能在手机上跑起来就已经要费一番功夫了。然后调试方面，目前 Unity 都还不支持移动端的断点调试，只能靠观察脚本 log 输出，可以说相当麻烦。

　　而 HTML5游戏只要在桌面浏览器上运行起来，通过手机访问电脑 ip 地址就可以进行实机测试了，主流浏览器都支持 Javascript 的断点调试和更多高级功能，在这方面可以说是无成本无障碍。

　　除了这些，另外一个开发上能够提升效率节约成本的最大好处，就是 HTML5开发可以利用 Web 前端生态体系中的各种资源。

　　作为孕育了 HTML5的土壤的这个前端生态圈有多大呢？大家可以看一张图，注意几个数字。根据 Mozilla 的统计，全球 web 开发者人数超过800万人，其中有一半以上都是使用 JavaScript 语言进行 web 开发的。JavaScript 社区里有一个叫做 npm 的包管理系统和平台，大家可以把自己的开源工具上传让别人免费下载使用。

　　这张图上我们可以看到， npm 平台上目前有超过13万9千个不同的开源工具，这个数量远远超过我们游戏行业里任何一个可以想象的公共资源平台或市场。 此外 npm 上的工具每日下载量超过5千万次，月下载量达到10亿次规模。

　　所以说这不仅仅是一个庞大的资源库，还是一个非常非常活跃的生态圈，只要你使用 JavaScript 开发脚本或逻辑，需要任何功能时，都可以在这个生态圈里寻找是否已经有人帮你实现了。即使别人的实现不能百分百满足你的需要，由于这是个开源的社区，你也可以很容易的修改现有的工具来达到自己的目的。

　　前端生态圈里，也会有人批评说这个社区技术碎片化太严重，大家都在用不同的方式重复造轮子，但是根据我们从传统游戏行业转来做 JavaScript 开发的经验来看，即使同样的需要有不同技术可以实现，这些技术之间往往也是同根同源的关系，只是在发展方向和实现细节上不能达成一致，才分化成了不同的技术。学懂了一种技术，再去掌握另外的就会很简单。这样的环境也有助于我们不断追求最优化的解决方案。

　　HTML5游戏开发中怎样应用主流前端技术

　　如果几年前，大家可能还觉得JavaScript 是一种专门用来制作网页动态效果的小品语言，无法胜任高大上的游戏开发。但 JavaScript 社区一直在高速发展中，经过 JavaScript 语言标准的几次修订和 Nodejs 的崛起，目前的 JavaScript 已经能够涵盖从 web 端到本地文件操作的各种任务，完全可以支撑起复杂的游戏项目。

　　而另外一项在游戏开发中令人倍感头疼的 UI 界面开发，就是 Web 技术的强项了。传统游戏行业通常采用命令式的语句来制作界面，通常会面对代码量大，难以复用的问题；而 HTML+CSS 的声明式语法，却可以在最短时间内完成复杂的界面排版和流畅的交互体验。近年来前端 UI 框架领域涌现了无数优秀的方案，webapp 的UI 界面开发效率和可维护性不断上升。HTML5游戏研发中也可以借鉴这种 UI 制作方式，能够高效快速的开发需要复杂排版的菜单界面。

　　Chrome/Safari/Firefox 等浏览器自带的调试工具和通过 npm/bower 等包管理工具搜索和下载需要的代码库，也是很适合 HTML5游戏开发团队利用的资源，所有这些都只有一个前提：只要你用 JavaScript 开发，就可以享受上述这些便利。

　　只是在开发效率上更高还不能满足大家的需要，毕竟 HTML5游戏是要和各类原生游戏竞争的，那么我们怎样能提高 HTML5游戏的竞争力呢？排除市场渠道、浏览器支持、性能这些市场环境和整体技术决定的要素以外，开发者可以通过使用更好的工具和流程来改善目前 HTML5游戏市场上整体素质不够高，竞争力较弱的现状。

　　在三年以前 HTML5初次成为热点概念时，市场上就是一个大家各自摸索，缺少成熟的商业化工具的状况，不光开发效率低下，而且也很难实现美术策划主导的内容丰富、创造性强的商业项目，游戏类型也相对单调。

　　实际上，开发工具成熟与否，很大程度上决定了游戏制作水准和精细化的程度。

　　没有完整的图形界面工具链，很难让游戏研发团队中的程序、美术、策划完全参与到项目中。设想一个美术如果从来只是生产游戏中各个元素的零件并交给程序去整合，和另外一个能够在图形化编辑器中随时自己制作资源并随时运行游戏预览测试的美术相比，其能够实现的创造力和制作水准必然大打折扣。

　　美术和策划都能参与到游戏实际制作和组装中只是开始，工具能否以人为本，为不同职能的开发者设计不同风格、符合他们工作习惯的界面，才能够最大程度的提高效率，减少沟通成本。

　　最后，好的开发工具必然不能只面向一个团队和一类项目，而是要能够根据团队结构和项目要求的不同进行扩展和个性化定制。

　　说了半天，具备这些优点，能够最大限度发挥 HTML5游戏开发优势的工具是怎样的呢？

　　Fireball 火球游戏引擎编辑器

　　Fireball 火球游戏编辑器是厦门火盒团队使用纯 Web技术研发的 全功能游戏引擎和编辑器工具链。整体架构由编辑器内核、游戏引擎和插件三层组成。

　　Fireball 编辑器采用了类似 Unity 的以 场景编辑器/层级编辑器/资源管理器/属性查看器/游戏预览窗口 为基础核心的结构。除此之外所有其他功能都以插件形式存在。这个编辑器有以下亮点：

　　属性查看器里的控件都是用 HTML 和 CSS 写的，对于任何一种数据，都可以通过这种方式快速定义一个展示方式，因此用户可以自由的对数据类型进行扩展，不用担心数据的展示和编辑有任何问题。

　　编辑器的游戏预览窗口可以随时运行和暂停游戏，以便包括美术、策划在内的所有开发者进行预览和调试。

　　所有子窗口都可以进行重新排布，可以添加任意数量的插件窗口来扩展编辑器功能。

　　而编辑器和插件之外的引擎层，是可以根据需要进行整合和替换的，Fireball 这个产品的核心是编辑器，而除了自研的 Fireball 引擎之外，我们也可以将市面上流行的开源引擎整合进来，减少用户的学习适应成本。

　　有了 Fireball 这样完全使用 HTML5技术开发的游戏编辑器，我们前面提到的通过引入 Web 技术来提高开发效率的优势就可以完全的发挥出来。包括使用 DOM 开发菜单界面，加上 WebGL 渲染的动画画面，充分发挥两种截然不同的渲染方式的优势；使用 HTML+CSS 来快速实现编辑器扩展和定制；编辑器内预览和运行游戏，以及使用 Chrome DevTools 进行调试；还有一键构建项目并在移动设备上预览，甚至直接发布到云端的功能。

　　说到一键发布，就不得不提到开发原生手机游戏时最让人头疼的部署流程。以前我在使用 Unity 开发iOS 游戏时，制作一个发布版本需要完成以下步骤：

　　编译 C# 脚本，生成 Objective-C 的 Xcode 项目。

　　通过 Shell 脚本调用另外一个 python 脚本，来修改 Xcode 项目的配置。

　　通过 Shell 脚本，拷贝各类 SDK 库文件到 Xcode 项目。

　　通过 Shell 脚本调用 Xcode 的构建命令，完成打包操作。

　　这个流程使用了四种不同的程序语言，项目较大时可能会花费7-10分钟才能完成，再加上拷贝到手机以及等待运行的时间，每次修改都要重复这样的过程，浪费了大量时间。

　　而在使用纯 JavaScript 环境的 Fireball 中，这些流程全部都可以用 JavaScript 脚本和 gulp 构建命令来完成，最后再通过编辑器扩展做成一个按钮和几个需要配置的参数。

　　有了这样的自动化流程，Fireball 不光可以让美术策划自己动手丰衣足食，在编辑器里进行生产和测试，还能让产品经理或项目经理可以生活自理，在出版本时免去一个接一个找人确认的麻烦，直接自己一键完成打包部署过程，用自己的手机就可以进行测试了。

　　最后奉上本次分享的总结，我们不光要看到 HTML5优秀传播能力带来的巨大市场和商机，也要看到 Web 开发生态可以给游戏行业带来的巨大效率变革。通过使用 Fireball 火球编辑器这样扩展整合能力很强的纯 Web 工具，可以帮助游戏开发者无障碍的利用 Web 开发的优势，用更高的效率开发具有创造力的，做工精良的有趣游戏。

Fireball 火球编辑器试用地址：http://fireball-x.com/