快速开发高性能的游戏（移动和Web)

2013-04-14

编辑注：CocoaChina2013春季开发者大会，于4月13日顺利举办，这里GameRes作为合作媒体，为大家发送会议上的经验访谈。

在技术研讨分会场上，来自Zynga的Ricardo Quesada给我们简单介绍了什么是Cocos2D以及Cocos2D的应用方面，随后他重点介绍了Cocos2D两个重要的功能，一个是C++的版本，可以用于手机，iOS和Android，另外一个就是OpenGL ES2.0的版本


Ricardo Quesada：大家好，非常感谢大家的到来，首先我要跟大家说一声抱歉，因为我不会说普通话。首先我想给大家做一下自我介绍，并跟大家解释一下什么是Cocos2D。我从事编程师已经有很多年了，我是1995年入行的，在2008年1月份和几个朋友一起成立了一个公司，然后在2008年3月份我们一起开创了一家公司。我从2010年的时候开始主攻这个行业，在2012年的时候我又从事了另外一个游戏软件的开发。我在2011年的时候加入了Zynga这个公司，在这个公司里面我主要负责Cocos2D这个业务，并且一起开发了Cocos2D、HTML5。今天我主要跟大家分享一下Cocos2D-JS。我今天要跟大家分享一下Cocos2D的一些模块，再进一步给大家做详细介绍。

Cocos2D主要应用于两个方面，一个是手机，一个是网络的游戏开发。Cocos2D主要由两个重要的部分组成，一个是Cocos2D，另外一个是Chipmunk。它的另外两个应用的工具是CocosBuilder和CocosPlayer，所用的语言主要是Javascript。不仅如此，这些非常重要的元素都是这里面比较重要的组成部分。我们为什么要创造这个Cocos2D呢？因为它不仅容易把握，而且更加适合于在手机上的应用。另外一方面，应用于手机上的软件它们并不能在网络上兼容，所以我们要构造一个在两方面都能够使它们共同使用的一个东西。所以我们要创立一个在手机和网络上都可以高效使用的工具。

接下来详细的给大家介绍一下Cocos2D的应用原理。正如大家所熟知的，Cocos2D是一个游戏的开发软件，接下来我要跟大家介绍一下其他的一些方面。众所周知，Cocos2D被很多大的游戏公司所运用，但是它在很多小型的游戏公司里面也有很大的作用。比如像刚才介绍的那个游戏公司，在2012年苹果应用的游戏当中获得了大奖。Cocos2D在开发软件上也非常有用，大家也可以通过不同的渠道来搜索Cocos2D，可以在网上的搜索引擎里面搜索到不下70余个的Cocos2D应用程序的书籍。大家也根据Cocos2D写了很多的博客，开发了很多相关的一些游戏。

刚才关于Cocos2D一些基本的特征，上面的演讲人已经讲过，我在这里也就不赘述了。我在这里想重点跟大家叙述的是Cocos2D两个重要的功能，一个是C++的版本，可以用于手机，iOS和Android，另外一个就是OpenGL ES2.0的版本。Cocos2D HTML5和Cocos2D-X的功能差不多是一样的，除此之外是用Javascript的版本来编撰的。Cocos2D和Cocos2D HTML5一样也有自己的模块，我们是用Javascript来绑定这个Cocos2D的。一边是用C++版本写出来，可以在各种各样的MobilePhone上面来进行渲染。另一方面我们Cocos2D HTML5能跑在浏览器上面，并且用WebGL和Canvas来做渲染。去年我们做的一件比较吃力的事情，就是把C++绑到Javascript上，使用Javascript的引擎，这样就有一个Javascript的API在Native上面。最后我们就有一个完全一样的Javascript API，最后来调用这个API做游戏，就可以跑在HTML5的Web上面。

我要强调的是，我们用完全一样的Javascript API，如果你在Cocos2D-X的地方调用了，底下就会创造一个C++的对象出来，如果在上面调用的话，就可以会创建一个Javascript的对象出来。举个例子，比如说上面这一句Javascript的代码，我创建一个例子出来，如果跑在Cocos2D-X上面，底下全部跑的是C++代码，建立一个C++的Object出来，可以跑在iOS和Android的Native上面，如果在HTML5上面，最后跑的是Javascript代码，最后实现在网页的浏览器上面。这个ParticleSystem是对于运算性能要求比较高的代码，当你跑在C++的实践上，Cocos2D-X上面，我在初始化之后开始运行的时候，调用全部是C++代码，这时候就没有再去调用到Javascript代码，所以在C++的实现上面跑是很快的。采用Javascript把C++绑上去的实现，其实已经覆盖了所有的API。最后跑起来的性能，虽然代码都写在JS上面了，但是比你跑在Cocos2D HTML5浏览器上面的性能要快6倍。

前面讲到包括渲染部分和物理引擎，我们用了Chipmunk 2D，但是Chipmunk这个定义做得比较早，所以我继续用Chipmunk这个名字。Chipmunk是一个2D的物理引擎，它跑起来非常快，很轻量级，也是开源的，最重要的是有Javascript版本，我们可以直接用。Chipmunk一个API的版本，能够编译跑在所有的Mobile Phone上，因为Mobile Phone太多了，所以我们只讲在iOS和Android两个上面的。Chipmunk如前面所说，它有一个JS的版本。这个完全是用纯的Javascript写的，它跟C++版本是功能完全一样的，但是可以跑在Web上，跟HTML5是非常类似的。Chipmunk 2D本身有一个实现版本，能够跑在Native跑在手机上面，还有一个可以跑在浏览器上面这两个版本是完全一样的。我们把Chipmunk2D也绑到Javascript上面，其实跟前面的方式一样，最后我们做了Javascript绑定之后，我们就有一个完全一致的Chipmunk 2D，既可以跑在Native的方式，也可以跑在Web上面。也就是说，像上面这一行代码创建一个Space，就是用Javascript写的。当它运行的时候，如果通过Javascript运行的，最后运行其实是C语言。也就是说，像建立一个Space，实际上是很耗CPU的，我们把这个东西绑到C去实现，C的运行效率是很高的。这个方案已经绑到所有的Chipmunk API里面，最后运行的都是C++。

另外我想提到的组件是WebGL，它看起来不像是一个很核心的，但是是很重要的。像OpenGL2.0在iOS和Android上面都支持，启用C的API。WebGL的标准也是用在OpenGL2.0，但是它是跑在浏览器。一样的，我们把这一套方案用在OpenGL ES2.0上面。这里有一个亮点我强调一下，这样绑完了以后，如果在WebGL上面写的游戏，调用WebGL接口，把这个东西放到Open为GL ES2.0这个上面跑，底下直接就落到这个C的API上面。像上面这三行，实际上是WebGL的代码调用的，其实你可以脱离开浏览器来跑，我们把这些2.0的全部绑架在Javascript层了。

这是视觉编辑器CocosBuilder，在开始讲之前我想强调一下为什么要有自己的工具。去年的时候强调过，如果我们用编辑器，我们就需要写更少的代码，更少的代码意味着很多东西数据驱动了以后，就会有很少的Bug，最后整个产品的质量会提升。还有一个优点就是开发起来很快，因为拖拖拽拽，比写代码肯定快很多，开发速度比较快。用编辑器有一些原来用编码根本做不到的事情，现在做得到了。举个例子，第一代的Design是2010年的时候第一版出来，就可以在那个Design里面创建例子效果，并且直接可以看到视觉效果，这个事情在之前通过Cocos2D的API是实现不出来的，因为很难想像最后的效果是什么样的。所以在Design出来之前，我们在Cocos2D建立一个例子效果，建立一个发射器基本上需要30分钟，写很多代码。所以CocosBuilder首先是一个界面的编辑器，带有关键的动画编辑，同时也能做资源的管理。这个界面编辑器我们更习惯于叫场景编辑区，拖任何一个东西出去，像放一个效果，直接拖进去就可以了。它有一个关键帧，动画编辑的时候，可以设关键帧，去改变这个东西的属性，只要设好关键帧以后，中间的过渡过程就有这种计算。

它的另外一个功能是资源管理器，首先是支持多分辨率，可以自动的做屏幕分辨率的适配，包括现在看到的iPhone、Android这种不同的分辨率，另外就是碎图打包的功能，这样就可以缩短加载时间和提高效率，最后导出的格式可以导出PVI这种格式。

CocosPlayer是一个APP，你把它开启之后，它就等你Pod上面的信息，可以把这些资源都发到CocosPlayer里面，甚至你不需要安装开发环境，直接有CocosPlayer就可以了，可以把资源直接发到CocosPlayer，它在里面就跑起来了。CocosPlayer你改了你的Javascript代码，你改了你图片的位置和旋转，只要点一个Play，只要花几秒钟，他就把数据发到CocosPlayer里面直接跑起来了，CocosPlayer可以跑在iOS和Android上面。

接下来讲一些开发的信息。前面也提到JS Bindings是怎么工作的，我们也花了很多时间在这方面。Chipmunk虽然是一个面向对象的思想，但是确确实实没有一个像C++对象的东西出来，但是Javascript是一个面向对象的，有Javascript对象。像这种纯C的风格里面，新建一个cpBody，在下一段塞到这个cpBody里面，没有明确的说是一个类，就是一个指正，一段内存。在我们最初的绑定里面，我们把Javascript写得像C一样，有cpBodyNew，因为这个里面有New的东西，所以建立一个对象，第二个函数里面有Body，这样的写法实际上对Javascript是不友好的，Javascript程序也会觉得很诡异。后面我们改进之后要自动绑定，生出来的API，BodyNew就很自然，对Javascript是友好的。在我们改进之后，可以看到API就很明确了，我先利用一个Object出来，然后调用Object的方法，这样对Javascript就很友好，实际上是作用在Body这个Object上面，这个绑定是完全是在这些规则之下自动生成的。所以Cocos2D现在是以每六周为一个发布周期，我们现在正在做第四次的联合发布。但是第四次联合发布里面就包含上面所写的这些东西，Cocos2D-X、Cocos  HTML5等等。

下面是我的一些建议，首先尽量去使用Cocos2D和Chipmunk 2D的API，其实就是尽量少用一些平台相关的API。这样的话，调用Cocos2D、Chipmunk 2D的API，最后在Native的环境下，以C++的速度在手机上跑。比如说碰撞点，你自己可以在Javascript上面写一个，反正无非就是矩形相交，矩形碰撞。实际上你自己去写一个矩形相交碰撞，最后用Javascript计算是很耗时的。但是你已经有Chipmunk 2D了，你要计算这种矩形计算的时候，就直接调用Chipmunk 2D的API就可以了。另外一个建议就是尽量去使用CocosBuilder，因为它解析是在C++解析的，这些都是Native的Object。最后就是按照C++语言来写，举个例子，不要老去频繁的构造和销毁对象，尽量使用这样一个回收池来回收，在画面上消失后就塞到回收池，用的时候就再捞出来用。虽然我们前面讲了Javascript，但是你还是可以把一些你觉得性能比较情景的地方用C++去实现，实现完了之后，就用我们的自动绑定工具绑定到Javascript上面，在上面再写C++的模块，这样就能提升很大的性能。

下面是一些我们正在做的功能，但是还没有完成的。首先有一个Javascript的调试器，我等一会儿也会演示，我计划把这个东西合并到CocoStudio里面去。对于Cocos2D-X我们现在还没有主页，我们现在正在建立一个主页。我个人比较喜欢的一个功能就是命令行，比如说你看版本，新建一个游戏，或者是你想把这个游戏部署跑到网页上，或者是编辑发布到不同的平台上面，你只要用Command line的这个工具，很快就会做完。

下面是一个Demo。这个代码是使用Cocos2D-X，也用了JS Bindings。这是一个很简单的物理游戏，一个车有物理性能，载了一些西瓜，最后要载到那个市场去。大家现在可以看到，水果掉到地上，所以Game Over。这个版本现在演示的是用Javascript代码写完了以后跑在iOS上面。这是完全一样的代码，我们没有在里面改任何的，它现在跑在Web上面，这个游戏很简单。下面给大家展示CocosBuilder可视化编辑器，这个游戏叫Crystal Craze，在右边是属性的编辑窗口，我现在把CocosPlayer编辑器跑起来，把这个连接起来，刚才首先是CocosPlayer跑在这个iOS的模拟器上面，这个时候CocosPlayer里面就点了Publish，所有的资源就上传到iOS，实际上是上转到CocosPlayer的APP里面，在CocosPlayer里面就跑起来了。刚才看到的是iOS的模拟器，现在点了一个Safari，直接在这个里面跑起来了。我现在要对这个Player的按键增加一个Keyfriend，大家点一下这个Keyfriend，在Location最开始的地方加入。我把时间轴移到后面，又加了一个关于Location的Keyfriend，在结束的地方修改角度。所以在编辑界面改完以后点击一下Run，在CocosPlayer里面最终的结果已经变了。其实我也没有写入代码，就是点击一下，这个同样的带动在Web里面也是可以看到的。我增加了一个效果，所以会稍微的动一下。这样改动使你非常快的就可以看到最终的效果，可以在设备上看到，也会在Web上看到。

我现在要演示一下，我已经运行上了这个程序，我现在准备加一个断点。当点击About的时候会有一个回调，调到这个函数里面。这个函数在第60行，我准备在60行上面加一个断点。大家停下来之后就可以做一些你想要的事情，比如说这个List里面到底有哪些东西。这个List里面有一个LastScore，我想篡改这个分数，所以可以作弊，在里面改数字。可以连接到一个远程的设备，虽然说现在是用模拟器在本机上，但是其实可以连接到远程的设备上面。我准备把这个做到CocosBuilder里面去，加一个断点就可以断下来。我们这些测试实际上都是同样的跑在Web和Native上面。比如这个例子用很简单的Shader去做出效果出来。所有这些功能都跑在Android上面，因为都是用一个写的，实际上也是在网页上面。这个版本就是跑在网页浏览器里面，其实用了WebGL接口，但是也是同样的代码。调用同样的Shader脚本，代用WebGL脚本，可以跑在iOS上面，可以跑在网页上面。在CocosBuilder里面有一些目录的图，可以看到我们有这些图片格式支持，还会支持PVR。现在用Cocos2D JS写Web的东西，前面有的是发了HTML5版本，有的是iOS版本，有的是跑在Android上面，跑在HTML5上面发布到Facebook上面，很快就会移植到Android和iOS上面。如果你想开始我说的很酷的功能的话，首先是到Cocos2D-JS这个网站，现在还是空的，我们会尽快搭建起来。另外是在Texts这个仓库里面，可以找到我们的测试游戏，还有怎么样使用这些引擎，还有CocosBuilder文档，还有下载编辑器。

我要分享的就是这些，谢谢大家！

问：如果我用JSB来做的话，下面的网络是已经装好了，还是怎么样？
Ricardo Quesada：这个问题其实早晨也有讲过，我们把HTML5这个网页上大家用得很习惯的接口，虽然现在没有，但是我们很快就会做出来。如果你要用第三方库，绑一个接口出来是很容易的，因为我们有自动绑定的工具。但是我们要做的是能够跟浏览器相兼容的接口。

问：CocosBuilder还有什么功能实现？
Ricardo Quesada：我们打算把CocosBuilder很多功能实现，比如说Publish这个功能，我们会写出来，在共同的平台上共用，这是跨平台的。在CocosBuilder功能减少之后，底下还会调用命令行。现在CocosBuiler是用iPhone开发的，我们打算重新写这个CocosBuilder，这个事情不会很快实现。

问：如果我现在有一款已经成型的JS在HTML5上面跑的一款游戏，如果我想以现在C++版本JS Bindings这样的功能移植到这上面来，工作量会不会比较大？因为我可能会用到一些对象，包括一些方法，所以我想知道这个工作量大概会是怎么样的？
Ricardo Quesada：这依赖于你使用的引擎和底下用的技术，如果加载管理的结构，跟Cocos2D很像你移植起来会快一点。因为不太清楚你的技术怎么样，所以还是说根据你的项目。

参与评论