cocos2d-x CocoStudio工具集发布

转自：http://www.cocoachina.com/devchannel/2013/0413/5989.html

 

本次大会更多相关报道，请访问CocoaChina2013春季开发者大会官网>>

来自触控的张晓龙为我们分享了CocoStudio工具集，CocoStudio工具集是基于Cocos2d-X的一款完整的游戏开发体系，由UI编辑器，动画编辑器，数据编辑器以及场景编辑器四部分组成。

（目前CocoStudio的网站还在制作中，如果您想了解CocoStudio的功能及下载CocoStudio，请访问Studio.cocos2d-x.org社区论坛。）

张晓龙：第一次在这种级别的会议上做演讲，我心里还是非常紧张的。刚才王哲在上面做精彩的演讲，我在下面不停的喝水，不停的上厕所，导致我们的工作人员以为我逃跑了，不停的打电话找我。

先做一个自我介绍，我叫张晓龙，这个名字其实大家都听说过，但是我不是《甄嬛传》里面演温太医的那个张晓龙，不过会后要想要张晓龙签名的话也可以来找我。首先先说一下我的团队，我的团队，包括我以前都是做游戏的。我以前是在捕鱼达人的团队里面做游戏开发，在做捕鱼的时候，我是遇到很多的问题。那个时候我们是用Cocos2D-X引擎，那个引擎是非常强大的，但是缺少一套非常完整的工具。没有这些工具的话，我们想做一些动画，想做一些特效，我们就只能用代码去写。美术想实现的一些功能，也要等我们把代码写完之后他才能看到，有可能这个效果也不是他们想要的，这么一来一去的话就会增加很多沟通成本。所以从那个时候我们就觉得，有一套完整的开发工具是一个非常重要的事情，所以我从这个游戏开发团队离开，然后组建一个团队，我们来做CocoStudio。

相信大家应该跟我有相同的体会，所以我今天就把我们一个阶段性的成果和大家分享一下。CocoStudio是基于Cocos2D-X的，刚才王哲也介绍了很多Cocos2D-X里边非常炫的工具，但是这里我要说CocoStudio不光是一个简单的工具，是由很多的工具组成，我们称它为一套完整的游戏开发体系。

中间这个是我们CocoStudio的Logo，旁边四个石头代表我们CocoStudio是由四部分组成。有些引擎只有一套工具，功能貌似也很强大，又能做动画，也能做UI，还能写代码。但是这样的工具通常会造成最终很难分工，也很难合并。而且这样的一个工具对于一个设计师来说通常比较复杂，很难上手。如果我是一个UI设计师，我只想去设计UI，我不想做别的，更不想写代码，这个时候有一个非常强大的工具在他面前，他可能无从下手，因为这个东西太复杂了。现在我给你一个UI编辑器，这个UI编辑器非常纯粹，它的功能非常干净，除了UI编辑，其他什么都没有，我估计这个UI设计师他一定会用得非常爽，这就是我们所说的CocoStudio。

我先从UI编辑器先讲起，我们介绍的第一个工具是UI编辑器。我们先来看一段视频，“界面左边是一排控件，我们把所有的控件拖到界面当中去，调整坐标，在右边设置它们的属性。因为这个视频就是我们开发人员录的，我们也没有找专业的美术，所以做得可能不是很专业。这个视频演示了几个不常用的控件。大家可以看到，除了编辑功能，其他什么都没有，很简单。”

首先我想说一下UI控件，首先看一下我们UI编辑器目前所支持的控件，这些是Cocos2D-X目前所有的控件，全部支持。我们来继续看，下面冒出来是12个问号，这是什么呢？我先不告诉大家。我想说的是，我们在每一个版本里面都会开放一些新的控件，我们团队的一个小伙子会负责这套UI系统和UI编辑器的长期维护。这个小伙子不光擅长UI，更擅长表演，所以我在这里情不自禁的给大家秀一张海报，右边这个小伙就是我们这个做UI的，可能他更大的梦想是想当一名演员。

UI编辑器是支持碎图合并功能，大家通过刚才的视频也看到我们拖了很多的控件，用到了很多的图，我们导出的时候可能有很多图。大家都清楚，图片数量如果非常多的话，在程序里面加载会非常低效。所以通常大家会使用一些第三方工具，将图合并成一张。这样的话，在程序里面的运行效率会比较高，我们现在把这个功能也直接集成到UI编辑器里面。这样的话，大家在导出的时候就不需要再借助一些第三方工具再去合图。我们来看一下，下面这一堆乱七八糟的图就是刚才视频里面所用到的基础的碎图。通过这个碎图合并功能，我们可以直接把它合并成一整张图，相信这样就会获得比较高的效率。多分辨率适配，这应该是很多开发者非常关注的一个问题。在我们UI编辑器里面，我们首先可以自己去设定一些分辨率，我们把所有的控件按照分辨率自适配自己的尺寸和坐标，通过这种形式，我们可以非常完美的去支持多分辨率。自定义UI模板是我介绍的UI编辑器的第三种功能，我们在做这个游戏的时候，比如我们做了一个商店界面或者一个设置界面，我下一个游戏的时候还需要这个界面，我不想重复造轮子，我可以把这个界面保存成模板，我在下一个项目当中把这个模板导进来，我们替换相应的资源，保证我们制作上是非常高效的。这就是我刚才介绍的UI编辑器，当然它还有很多其他的功能，希望大家会后下载，可以自己去体验。

对于美术设计师来说，不光只是做UI设计，他需要做人物、动物，还需要去做花花草草，而且我们还需要让这些花花草草动起来，这就需要动画编辑器。同样我们先来看一段视频，“我们看到把一堆构成这个色块所有的角色拖到我们的编辑区，拼接成一个角色。下面是我们用于设定关键帧的，这个动画是我做的。作为一个技术，我觉得能把动画做成这样我还是挺满意的，所以大家凑合看吧。这是一个快速创建帧的功能，非常快。”

看完视频之后，我先给大家看一张图。和刚才那个编辑器不是很像，这是我之前在做捕鱼项目的时候。因为当时，我们缺少做动画的工具，所以我们做了一个简单的动画编辑器，把这张图放在这儿。这是刚才视频里面演示的，也是这次我们要公布的新的动画编辑器的界面。两个编辑器对比起来我们会发现，现在的编辑器比以前要专业一些。为什么要放这两张图，我想说的是，动画编辑器是给美术设计师用的，所以我们在界面设计上是尽量参考美术经常使用的一些软件，无论是从界面上还是快捷键这些功能，尽量是保持美术的习惯。他们在使用这个动画编辑器的时候就非常容易上手，不存在什么门槛。同样我们动画编辑器就是只能做动画，我们动画设计师在使用这个编辑器的时候，它的功能是非常纯粹的。这样的话，我们这个编辑器所表现的动画功能，相信它会比其他工具的动画编辑功能更专业。

骨骼系统是动画编辑器里面一个非常重要的部分。骨骼系统是什么？举个例子，我站在这里，我是由骨骼撑起来的，因为没有骨骼我会瘫在这儿了。我所有的动作，全部是由我的骨骼去驱动的。那么骨骼系统在我们动画编辑器里面也是做这个事情的。骨骼动画有什么好处呢？首先我们骨骼动画是一个关键帧动画，传统的动画编辑方式一般都会使用到序列帧动画。骨骼动画比序列帧动画优势在哪里？一个动画设计师要做一个人的动画，他如果做序列帧的话差不多要做10多张图。他如果要把所有的动作全部做完的话，差不多估计这个角色得上百张图了。我们假如说这个动画设计师辛辛苦苦的把这个角色画完，这个时候我们策划说你这个角色设计得不够性感，我想要性感一点。这个美术要哭了，因为他需要重新把所有的动作再去画一遍。可能在座的一些资深动画设计师，他会说我们用3DMAX，这样的话就不需要全部画了，因为可以用三渲二，这是一个好的方法。但是当你把所有的动作，不同身材的角色全部创建完之后给程序，程序员跑过来了，说你这个动画用到的图太多了，我的内存都撑爆了，要减图。估计这个时候这个美术的表情应该是这个样子的。如果这个动画设计师他说没关系，我可以画，我可以减帧。这个时候我们策划就跑过来跟动画设计师说，你做了一个走的动作，你又做了一个砍的动作，现在我想要一个一边走一边砍的动作。这个美术师哭了，因为在序列帧里面，他如果要做一个一边走一边砍的动作的话，需要再画这么多张图，或者说重新去渲染。如果说我们把这个东西画完了之后，这个策划又跑过来说，我想要一个趴着砍人的动作，我想要一个跑着砍人的动作，我还想要一个喝着水砍人的动作，估计这个时候设计师就要砍这个策划了。

如果使用我们这个骨骼系统的话，就能解决这个问题。我们只需要做一张角色的图，把不同的部件拆开，给他套上骨骼。通过这个骨骼驱动就可以做很多的动作，包括跑、走、跳、砍，这里面不需要再额外多浪费其他的图，可能最后只需要四五张图就可以。这个资源差不多是几十倍的节约，而且这个东西在程序里面运行都非常高效。骨骼动画还有一个好处，就是如果说我们这个项目用了100个角色，如果序列帧的话，美术就要给每一个角色都要设计10几套动作，最终的图量是非常庞大的。用我们骨骼动画的话，我们可以在第一个角色身上把动作设计好，定义成模板，套在其他的角色身上，就可以共用这个动画，这是非常方便的。这里是简单的演示了一下骨骼动画的视频。大家看到蓝色和灰色的东西就是骨骼，套在角色的部位上，就可以驱动它的动作，这是我们的一个技术，用自己非常不专业的技能去做一个人开枪的动作，所以希望下面如果有一些比较专业的动画设计师不要嘲笑。

碎图合并，因为刚才我们UI编辑器是有碎图合并，而且我们使用得非常爽，所以我们把这个功能也合并到我们动画编辑器。如果我们做了一个动画，最终我们可以合并成一张图，而且这个东西在我们动画编辑器和UI编辑器导出的时候是自动的。刚才提到骨骼动画的时候，我说了很多序列帧不好的地方，但是序列帧确实在做一些动画，或者是有一些特效还是非常有用的。比如说我们在做角色动作的时候，序列帧还是非常关键的，包括我们做一些爆炸特效，做一些火焰特效的话，序列帧实现的效果比较好。动画编辑器依然支持序列帧，而且我们把序列帧做得非常简单，非常高效。刚才大家也看到了，我们只需要三个操作就可以把序列帧完成。

相信在座肯定有做页游的，或者我们之前的游戏是用Flash做的。如果用这个工具的话，我们之前做的Flash会不会浪费呢？我们动画编辑器支持Flash动画直接导入到我们的动画编辑器里面，我们在动画编辑器里面再做二次编辑。这样的话我们导出来的资源是可以完美的支持到Cocos2D-X。编辑碰撞区域我觉得在动画编辑器里面去做这个事情是非常合适的，因为我们动画编辑器是可视化的，所以在这里面可以绘制碰撞区域，可以保证碰撞的精准。参考点是什么意思？我们在动画层面上定义一个点，让它完成某些功能。比如说我要骑马，我是一个动画，马是一个动画，我在马背上设计一个参考点，这样的话我骑马才不会骑到马屁股。如果我想骑着的话，我在我的胯下设置一个参考点，实现骑马的动作。同样我们可以用这种功能去做换装和换武器。

UI编辑器和动画编辑器都是给美术用的，下面我们介绍两个编辑器是给策划用的，先说数据编辑器。数据编辑器非常简单，它就是把策划用的Excel数值表分解，然后转化成Cocos2D-X可以识别的格式，虽然说这个功能非常简单，可能大家觉得不重要。但是我们之前做游戏的话，我们的策划是一直在用Excel做数值表的。这是我们的数据编辑器，中间我们会去分析这里面每一个表单，然后把它列在上面，右边是显示我们的数值，我们可以转换和拷出，把一张非常大的表分解成每一个小表。数据编辑器可以配合场景编辑器来使用，大家看一下这个方块是什么，这里面我来解释一下，我们这个场景编辑器是基于实体和组件的模式，我们创建一些实体，就是一个一个的方块。把所有的功能设计成一个一个组件，分别绑在这些实体上。我们看到创建了一个实体，绑定一个动画组件就可以实现一个动画加入到场景中，场景编辑器就是实现将所有的资源整合在一起。

在这里要提到一个框架，叫FrameWorkforCocoStudio。简单来说是对于我们场景编辑器导出资源的一个解析。这套FrameWork是基于Cocos2D-X的，基于实体和组件开发的。现在我们是把它开放给大家去试用，而且我们会有一个团队一直在维护这套框架。框架本身是支持Javascript脚本的，如果大家想去快速的开发游戏原型，相信这个框架是非常适合的，因为我们配合这个场景编辑器，配合我们CocoStudio其他的工具，再配合这个框架，可以快速的做出游戏原型。场景编辑器可以整合我们之前CocoStudio其他编辑器的资源，构成当前的游戏关卡，同时也支持第三方的工具模式，刚才大家也看到了里面喷泉的粒子效果。后续我们在场景编辑器里面也会开发插件系统，大家可以二次开发自定义的控件。

以上就是我今天介绍的四个工具，我想说的就是，所有的工具合在一起是构成一套完整的游戏开发体系，分工更明确，让每一个人干自己最专业的事，而不去管他人的事。某一个程序员会跳出来，说这里面怎么没有给我的工具？我想说的是，如果我们把这四个工具给我们的开发团队提供出去的话，我们的程序程序员就可以安心的写代码，不用再去关心动画，也不用再去关心UI。这里面再强调一下，我们这套CocoStudio是完全免费的。我们的团队现在呢，正在公司给大家制作完整的安装包，把下载链接放到我们的网站上，相信大家不久就可以去下载。

我们CocoStudio还有一个开发者共同成长计划，大家可以和我们的工作人员去了解，加入开发者共同成长计划，在CocoStudio使用上可以获得我们CocoStudio的在线支持，同时我们会有一些线下聚会，会邀请大家跟我们一起做一个交流。我们可以提供一些需求定制开发，当然这个需求如果是非常合理，非常重要的话，我们会加入到我们的开发计划。这是我们CocoStudio的合作方式和联系网站，网站我们和Cocos2D-X是一个，微博我们是Cocos2d-x。大家有什么问题的话可以联系我们，谢谢大家！

（目前CocoStudio的网站还在制作中，如果您想了解CocoStudio的功能及下载CocoStudio，请访问Studio.cocos2d-x.org社区论坛。）