您所在的位置: 首页 > 新闻报道
CocoStudio工具集发布
2013-04-14

本次大会更多相关报道,请访问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社区论坛。)