Cocos Studio教程五:Action编辑器用户指引

Cocos Studio Action Editor UserGuide
http://upyun.cocimg.com/CocoStudio/course/coostudiov0.3.1.0_courses03.zip,1

一、创建一个新的项目


点击菜单栏中的【文件】->【新建项目】(快捷键Ctrl+N)

在新窗口中设置项目名称(1)及保存的路径(2),设置完成后即可点击确定(3)

此时新的项目已经创建完成,我们来看一下ActionEditor的结构,大家可以看到新建项目后界面并没有什么变化,因为Action编辑器和UI编辑器并不同,它不需要画布,只有一个渲染窗口。

Cocos2d-x游戏中常用的动画有两种,一种是骨骼动画,另一种是帧动画。我们的Action编辑器对这两种动画都提供编辑动能。下面我将分别介绍.
二、制作帧动画
首先将模式改为动画模式

接下来选择资源窗口中的添加文件夹按钮(pis:帧动画往往需要很多图,所以建议整理到一个文件夹后再导入,但也可以分别导入),引入帧动画所需要的图片资源

我们导入了一个“ButterFlyfish”的文件夹,该文件夹里是一组类似电影胶片一样的图片组。
接下来我们找到动画的第1张图片,并拖拽到渲染区【注意:1.0.x版本更改了操作方法,您需要先在形体模式下添加第一张图片到渲染区,然后切换到动画模式下将剩余的图片添加到对象列表中的layer上】

此时注意我们的以下几个窗口都会自动生成一些东西,首先是动画列表,它自动生成了一个动作名称”Action0”,然后对象结构也会生成一个”Layer108”,关键帧也会自动生成一个帧。

接下来我们选择其余的图片(按住Shift+左键),一块拖拽到对象结构中的Layer108中,如下如:

拖拽完成后我们可以看到关键帧自动生成了很多关键帧。

勾选循环选项,点击播放按钮就可以看到我们做的帧动画了

三、制作骨骼动画
首先新建一个项目,并将需要的图片引入项目资源窗口中,这里只为介绍编辑器使用方法,例子就非常简单,我只用了两个图片,一个是人物,一个是武器。

接下来修改编辑模式为【形体模式】【创建骨骼】

我们在渲染窗口中按住鼠标左键并移动,我们可以得到和下图一样的一个骨骼,松开鼠标后这个骨骼就创建完成了,正常的项目中会有很多的骨骼,但在这里我们只有两个对象,所以只需要两个骨骼。

创建一个骨骼后我们给该骨骼添加贴图(停止创建骨骼模式、形体模式)

我们现在添加的是一个人物的贴图,添加贴图后我们需要对贴图进行调整,以适应骨骼的位置

接下来我们给人物配一把武器,因武器要放到人物的手里,我们新建个以手为起点的骨骼,如下图

因为武器要和手形成联动效果,所以我们需要将这个骨骼与人物的骨骼进行绑定(停止创建骨骼模式),对着武器的骨骼点击右键选择绑定父关系],然后选择人物的骨骼即可

如果想验证是否绑定成功,可以调整人物骨骼的位置,如果武器骨骼也会跟着动的话证明绑定时成功的。
然后我们添加武器的贴图资源并调整位置

接下来我们制作一个简单的动画
切换编辑模式为【动画模式】【停止创建骨骼】

然后选中一个对象(刀和人物是这里的对象)

然后在关键帧窗口中选中第15帧,然后点击【记录关键帧】

可以看到这个对象的帧记录就会自动生成到15帧的位置(中间会自动填充过度帧)

对另外一个对象使用相同的方法添加关键帧。
添加完成后我们队15帧的位置进行画面调整,调整后第一帧和最后一张对比如下

一个简单的砍的动作就完成了,我们可以点击播放来看效果

四、小结
通过以上两个小例子我想大家已经初步掌握的动画编辑器的基本使用方法,一个完美的动画往往是需要精打细磨才做出来了,不过你只要掌握了基本方法并加上勤加练习一定也可以做出好看的动画效果的(当然还要有美工的强力支持P:)
如果大家还对Action 编辑器有什么疑问的话,欢迎到我们的官网论坛参与讨论。

为什么动画模式图片无法拖入渲染区形体模式却可以?

就是这么设计的,动画模式就是用来设计动画的

资源编辑窗口的碰撞区域在代码中如何获取啊?

:8:太占CPU 容易卡死!

你好,请问你的机子什么配置?直接运行cocos2d-x卡不卡?

求助:“我们找到动画的第1张图片,并拖拽到渲染区 ”
拖拽的时候, 在这里崩溃了,使用v1.0.2.0版本, 项目目录在桌面, 路径中有空格, 难道是这个原因么?

在不含空格的目录下, 拖拽成功了

— Begin quote from ____

引用第6楼helloliuchen于2013-11-05 00:28发表的 :
求助:“我们找到动画的第1张图片,并拖拽到渲染区 ”
拖拽的时候, 在这里崩溃了,使用v1.0.2.0版本, 项目目录在桌面, 路径中有空格, 难道是这个原因么? http://www.cocoachina.com/bbs/job.php?action=topost&tid=161600&pid=847087

— End quote

又有个问题, 在动画帧下面点击播放的按钮, 渲染区只能正确显示第一帧, 后面的全是默认图片

空格的不确定会影响不,但是在xp系统中如果目录带“桌面”是肯定失败的。 你说的那个只显示第一帧的问题是指在编辑器中么?能把项目传上来看看么?

— Begin quote from ____

引用第9楼hanrea于2013-11-05 09:38发表的 回 7楼(helloliuchen) 的帖子 :
空格的不确定会影响不,但是在xp系统中如果目录带“桌面”是肯定失败的。 你说的那个只显示第一帧的问题是指在编辑器中么?能把项目传上来看看么? http://www.cocoachina.com/bbs/job.php?action=topost&tid=161600&pid=847135

— End quote

就是按照你示例中的做的啊, 可以参考截图

额,我那个用的不是plist图片哦,不过plist也是支持的。只不过我郁闷的是你的plist图片的名称为什么有斜杠?能否把这个连着资源发给我呢?

发现你说的问题了, 渲染资源的路径错误
plist中每个文件不能再有/分隔符, 一旦有/, 拖动过来的渲染资源拼接就出现错误。
至于plist文件中有/分隔符, 我是在您给的下载链接解压缩后的 项目文件\Resources\SceneEditorTest\fishes\Butterflyfish\Butterflyfish0.plist这里就有

这可能是CocoStudio的一个bug吧,或者说潜规则,我使用的是1.0.2.0版本

ps:感谢您的及时回复

— Begin quote from ____

引用第11楼hanrea于2013-11-05 14:07发表的 回 10楼(helloliuchen) 的帖子 :
额,我那个用的不是plist图片哦,不过plist也是支持的。只不过我郁闷的是你的plist图片的名称为什么有斜杠?能否把这个连着资源发给我呢? http://www.cocoachina.com/bbs/job.php?action=topost&tid=161600&pid=847283

— End quote

请问,1.0.2版本的动画模式是怎么编辑的?我把资源区的图片往渲染区拖,拖不进去啊,这是什么情况

请问,我在形体模式下,创建了骨骼,然后到动画模式下,怎么与骨骼相应的动画都看不见了。。而且我按照你的方法创建的动画,不是精灵图片在运动,而只是一些之前创建的骨骼在运动呢?、求值啊。。

你的贴图被隐藏了,点击帧面板里的红点(鼠标右键)显示帧

请问骨骼动画有没有回调函数

有的,一种是帧事件回调,一个是播放回调

请问这个绑定到父亲中,父亲值的是谁呢?
如果有多个节点那他会认谁为父?:904:

— Begin quote from ____

引用第18楼baowuwolf于2014-02-27 13:02发表的 回 楼主(hanrea) 的帖子 :
请问这个绑定到父亲中,父亲值的是谁呢?
如果有多个节点那他会认谁为父?:904: http://www.cocoachina.com/bbs/job.php?action=topost&tid=161600&pid=894580

— End quote

我明白了,点绑定父节点以后还要点一下父节点