林顺：Cocos2d-html5游戏案例分享

Hi，大家好，我是林顺，目前在负责Cocos2d-html5引擎的维护，今天很高兴可以在这里和大家一起来做Cocos2d-html5游戏案例分享。

CocoaChina的春季大会，4月13日，167天以前，在这里和大家分享了当时Cocos2d-html5的引擎状态和对HTML5产品的预期，重点推荐了JSB方案。167天之后，非常开心的看到很多游戏厂家都出了基于JSB的商业游戏作品。在这个期间，无数的坑都被填上了，修复了。有了这么多的商业作品验证，JSB方案的这条路，已经是被无数大型的压路机一遍一遍的轧过，已经非常畅通了。今天给大家带来的是Cocos2d-html5在手机浏览器的案例，一起看一下HTML5游戏跑在移动浏览器上面的效果是什么样，能给大家带来什么的信息，能承载什么样的商业作品。今天Cocos2d-html5是过来接受检验的。

通过《红颜知己》的这个JSB游戏的案例，他们可以获得在线升级功能，且不会错失HTML5的市场机会，游奇开发团队总结，Cocos2d-html5的游戏开发在前期尽量在浏览器上面做，把差不多95%以上的功能在浏览器全部都做好。因为在浏览器上面做的话，有很多不错的工具，开发更加高效，这些在后面的分享中会提到，这样的方式做完之后，再移植到JSB的话就非常顺畅了。

今天主要分享的游戏案例是《一二三国》卡牌游戏，这款游戏的Hybrid版本在iOS平台和豌豆荚上已经发布了，首先看一下《一二三国》开发的视频介绍（播放视频）。

这是一款跑在浏览器上面的游戏。我们下半年引擎主要在做针对移动浏览器的优化，包括性能优化和兼容性改进。我们需要有具体的游戏案例做反向验证。这款产品是奇矩互动开发的卡牌游戏，我们在他们的产品基础上提供免费技术支持，协助他们一起做产品数据测试，用来修正引擎的问题，非常感谢奇矩互动的大力支持。目前改游戏功能已经和混合版本同步，将来要做全平台发布的尝试，并使用同一份代码。

游戏在PC上跑得怎么样，这个事情已经没有什么悬念了，我们不care。我们主要看一下游戏在移动浏览器的表现如何。在移动设备的世界里，究竟想要的性能切点在哪里？我们该关注哪些机器？这边只列了很少的机型，但是都很有代表性。MTK6577芯片的机型，在4月份买的时候，一台机器500块钱左右，现在已经是370块钱就可以买到，双核1G主频，内存512M。MTK6589机型则是今年的主流，山寨机的主流。红米大家更加熟悉，也是799块钱。

在过去的167天里面，引擎针对移动浏览器做了无数的改进。在这里非常感谢Google的Chrome、欧朋的团队，吕康豪以及Intel、沈熙。我们在2.1.3版本到2.2版本在性能方面做了很多的优化，特别是在移动浏览器上面。大家可以看到，在2.1.4的版本和2.2的版本分别有非常大的提升。

我们来看一下详细的数据，2.2版本在PC上跑是原来2.1.3版本的6.29倍，提高的性能非常大。但这不是重点，PC的性能一向都不是问题。我们更关注的是手机，在手机上跑2.2版本是原来的2.1.3版本的3.47倍，比原来改进非常多。在2.2版本，还重点改进了LabelTTF的实现方式，增加了预渲染和cache，效率是原来的2倍。在这167天里面，我们针对html5在移动浏览器的性能表现，做了非常多的工作。你需要不断地去发现关键路径的热点，想尽这种办法去优化它，非常耐心的去找到每一个最小的细节，来优化它。这个代价是非常大的，但是是非常值得投入的。因为整体性能上去了，才能提供给开发者更轻松的使用环境。引擎一点一滴的性能提高最后在商业产品里面体现，是所有人都可以受益的，非常宝贵。所以我们花了非常的精力在做这方面的改进。

HTML5游戏的运行环境是在浏览器里面，所以需要注意性能和浏览器的工作原理关系。临时对象的创建和销毁会消耗CPU资源，同时也给GC增加负担，所以我们的很多精力都投入在零食对象的优化上面。兼容性的提升方面，一个游戏需要在所有的浏览器上面都能跑的很好，现在我们正在做主流浏览器的支持，测试改进全屏API，音频，多分辨率支持等。

我们在2.2版本里面集成了一个功能，可以实现边玩边加载资源，这个功能在页游行业里面是非常常用，但是需要自己设计。现在这套东西完全做好了，放在了引擎里面，你只要拿来用就好了。（播放视频）大家看视频，在进入游戏的时候，先构建整个场景，此时的界面显示是不完整的，但是素材加载好之后，它会自动补齐显示，完成一个完整的界面。大家看到人物的素材，在游戏里用简单的纹理来替代，当加载完了真正的资源之后会被再替换掉，这两个方法都可以加速游戏的快速响应。

如果前面说的这些功能都不太能吸引大家的话，那么这个功能你肯定喜欢。DragonBones到处的素材，不仅可以通过CocoStudio导入，Cocos2d-html5还可以直接支持DragonBones的到处文件。大家可以看到动画或特效用Flash做完，然后用DragonBones导出就可以直接跑在浏览器上面。（播放视频）这种方式可以让设计人员采用熟悉的工具按照原来熟悉的方法来做，《一二三国》就是用这种技术构建动画和特效的。所以，现在Cocos2d社区多了一个动画、特效编辑器，它的名字是Adobe Flash。在JSB的改进方面，王哲也介绍过改进部分，这里补充的是我们对JS API设计和改进的原则，Cocos2d-html5的设计的使用对象是JS程序员，所以所有的设计都以最符合JS程序员的使用习惯为准则。而JSB的API是同步跟随Cocos2d-html5，这也是我建议大家项目构建的时候，从浏览器端进行开发的原因。

这里还给大家介绍常见的一些调试工具。为什么要列出这些工具来呢？因为这里有一个故事，上个月和Duke一起在厦门做线下沙龙的时候，来了一个哥们儿，做了一款产品，找到我们，说这个游戏做完了，效率无论如何都上不去，然后用打包的方式无论如何性能还是上不去。怎么办呢？我一问是不是Cocos2d-html5的引擎？他说不是。我问他性能热点在哪里？他听完，一脸困惑，没有给我答案。我当时不太理解为什么他不知道热点在哪里。我说你是哪里的团队？他说，我的办公室跟你们挺近的。我一看2公里之内，我说你方便的时候到我办公室去一下。他就去了，打开他的游戏，用remote debugger工具跑起来之后发现一个第三方的音频库在请求音频资源的时候出错了，然后自己给自己反复的设置timeout，就这个地方就有30%的CPU开销。找到那个东西，当场改了之后，当场30%的效率就上去了。我非常也佩服他们，在没有工具的帮助下，竟然把这个项目垒到这种状态。所以，开发中的常用好用的工具还是需要普及下的，提高开发效率。下步的计划，Cocos2d-html5会支持JSB的Remote Debugger，可以做单步，变量查看，调用栈查看。Cocos2d-html5的下一个版本还会对CocoStudio实现支持。

之前介绍的是引擎的改进部分，产品的情况。下面来关注下今天HTML5生态圈里面发生了什么样的事情？我们非常诧异的发现，html5这种应用方式不断地被发现、创建，并实践出来新的应用场合。我们在167天之前的大会上和新东方在线教育团队聊过，当时他们是拿Cocos2d来做教育产品，原生类型的应用。前几天跟他们聊，他们说现在我们用Cocos2d-html5做了针对幼儿教育的产品，而且告诉我们说他们现在有150个产品。167天里面，平均下来一天一个产品。这是什么速度呀？大家可以看到，在浏览器里面开发产品的极高效率，如果有很熟悉的经验，出产品的速度是非常快的。

渠道方面，一直很期待能有大型高流量的APP集成HTML5游戏的，比如说微信，或者其他大流量的社交类型应用。通过html5这种技术，可以轻松实现点开即玩儿的这种体验，和内置到微信的打飞机一样的体验。

这里还非常高兴的给大家展示一下，现在支付方面的情况，因为游戏做的好，最后收钱还是很重要。有一个好的作品，我怎么样能够快速的收到钱，体验是什么样子的？（播放IAP视频）这里给大家准备了一个支付的演示，首次登陆需要填写手机号和短信验证码，当然第二次就不需要了。从视频可以看到这个支付流程非常短，非常便捷，选一个商品发出一个请求，弹出一个确认对话框，整个购买流程就结束了，非常好的体验。生态圈为html5产品已经提供了很完善的支持。

在html5里面有哪些作品？在下半年有两个比较大型的游戏，有《修仙三国》、《不江湖》，还有《魔界之王》、《谁的乱世》。通过前面的介绍，我们可以看到HTML5在技术方面、产品方面、游戏厂家的状态、渠道的状态，已经是非常不错的状态。目前原生游戏市场的发展已经非常成熟和稳固了，如果你要新创业，已经有难度了，有可能会非常不错，但是挑战会很大。但是对于html5市场来说，现在html5市场还处于发展早期，如果大家创业或选择新项目的话，可以考虑从html5方向入手，因为JSB方案已经是被压路机轧了好几遍的路了，你不会丢失任何原来的原生市场机会，而且还有html5新的市场机会在那边等着大家。

我的分享到此结束。谢谢大家！