cocos2d-x 动画工具 Flash2Cocos2d-x(1)

最近在研究cocos2d-x引擎,制作游戏非常重要的一点就是需要一个动画工具,在网上找了一下,发现找到的工具不是很符合自己想象的,要么没有缓动效果, 要么没有骨骼等。其实在使用libgdx的时候就用到过一款叫做spriter的工具, 网址:http://www.brashmonkey.com/spriter.htm,那时用的版本还不支持tween效果,只能一帧一帧制作,很是麻烦,现在出了新的版本,但是用法还是有些局限性。后来倒是找到一个flash工具,网址为:http://blog.sina.com.cn/s/blog_570dfe6a01013wua.html套用作者的话:“为了方便制作独立游戏,便于制作动画,高效灵活的控制游戏动画,写了这个骨骼动画工具。时间轴动画、位图序列动画都耗时耗力,没有美术是做不出来好的效果的。这个工具很轻量,包含一套简易的骨骼引擎以及缓动引擎,做简单的动画完全没有问题。 骨骼动画并没有实现反向动力学,主要是用于给在 FlashCS 里制作的关键帧补间,可以在运行的时候动态的修改控制动画的细节”这是例子的地址:http://akdcl.sinaapp.com/example.html#e=0感觉这个工具如果能用在制作游戏应该会十分方便的,在flash制作动画,然后导出数据,在cocos2d-x引擎端读出数据解析动画帧,这样游戏开发能减少很多工作。flash本身是非常强大的,虽然不可以使用全部的flash的功能,但是用来制作游戏还是完全够了。有了目标就有了动力,我将flash版的骨骼移植到了cocos2d-x上,github地址:https://github.com/jyinkailej/Flash2Cocos2d-x,里面有源码和例子,基于cocos2d-x 2.0.x版本,有兴趣的同学可以看一下。使用说明:
Flash:我使用的事 Flash cs 6.0.1.文件->新建-> actionscript3.0->确定2.点击矩形工具->在场景中拖出 一个矩形,3.重复2拖出第二个矩形。4.分别右键矩形->转换为元件,在库中可以看到元件1 和元件2 再右击新建文件夹“test”,将2个元件拖入新建的文件夹。在场景中用选择工具同时选中两个元件,右键创建元件3,同样拖到这个文件夹中。4844.双击元件3进入到 编辑元件3,把原来的图层删掉,创建3个新图层,分别叫as, t1, t2 。在t1图层拖进元件1,t2图层拖入元件2。左键点击元件1,在属性栏填入t1, 同样操作元件2命名为t2.4855.在as的第一帧右键->动作,填入var xml:XML=



6.编辑时间轴,得到4867.打开Exporttool.fla 将 元件3拖入打开的 Exporttool.fla 场景中8.控制->测试影片->在Flash professional中(可能不一样)4879.保存骨骼数据,保存贴图数据作为单个文件。(因为原来工具提供的保存贴图数据不支持输出plist,所以另外弄了一个输出单个贴图文件的,输出单个picture后可以用Texture Packer打包成支持Cocos2d的格式)到此Flash这边的就做完了。目前只支持直接获取老式的补间动画。其实也可以支持新式的补间动画的,只需要选中新式补间动画,右键->转换为逐帧动画 就可以了,你们也可以试一下。新式的补间动画很好用啊,支持创建运动路线,缓动曲线,嗯,确实可以。其实原作者提供的例子很详细了,我稍微改了一点工具,大家可以看看 http://blog.sina.com.cn/s/blog_570dfe6a01013wua.html

非常不错的思路,到是值得一试.感谢你的分享!

— Begin quote from ____

morefun 发表于 2012-9-9 16:13 url

其实我是这么考虑的
只需要能通过配置文件调用现有的cocos2d-x的Action就可以了
例如,缩放,移动,旋转之类的 …

— End quote

可能我没解释清楚 Flash工具 那边做到了什么,
这样说吧 ,Flash工具能自动生成 Cocos2d-x库这边需要的 xml 解析文件,

像491
这样的xml文件 都是自动生成的,

我前面说的 要写一些 xml 只是向 Flash导出工具 说明哪些东西需要导出,还有他们的骨骼父子关系。

492
上图 就是 生成 上上张图所需要写的xml ,位置,缩放,旋转都是自动生成的。所以做的工作也不是很多吧,O(∩_∩)O~

目前支持的有 位置,缩放,旋转,骨骼

想要其他功能还需要挖掘工具的潜能。

— Begin quote from ____

morefun 发表于 2012-9-9 13:35 url

楼主的库很好,但是这个flash生成配置文件太麻烦了,可以考虑air写个工具生成所需要的配置文件 …

— End quote

具体说下需求嘛,现在 Flash工具这边出了个 1.3版本的Flash扩展, 可以省下 编写 初始 xml 这块,但是不能自动生成包含父子关系的xml,而且生成的格式和以前的版本不一样,还需要修改Flash2Cocos2d-x这边的库才能使用,暂时是用着1.0的工具。
490

可惜不懂flash

— Begin quote from ____

ykc290147631 发表于 2012-9-9 12:51 url

可惜不懂flash

— End quote

也挺简单的吧,只需要懂一点 movieclip,timeline,元件,图层的概念就差不多了。
然后就是拖一拖timeline,设置一下帧就行了,应该不会花很多时间吧。
实在不行,再出个详细点的教程吧。

  • 本帖最后由 jyinkailej 于 2012-9-8 23:55 编辑 *

Cocos2d-x:将Flash2Cocos2d-X 放到Cocos2d-x根目录example中提供了3个例子。example1:
// step 1: add your skeleton xml fileCCConnectionData::sharedConnectionData()->addData(“ExportTool_skeleton.xml”);
// step 2: create a CCSpriteBatchNode CCSpriteBatchNode *batchNode = CCSpriteBatchNode::create( “knight.png” ); // step 3: create a armature just need armature name, plist, picture, and a CCSpriteBatchNodearmature = CCArmature::create(“knight”, “knight”, “knight.plist”, “knight.png”, batchNode);/armature = CCCocos2dCommand::createArmature(“zombie”, “zombie”, “Zombie.plist”, “Zombie.png”); armature->getDisplay()->setPosition(ccp(size.width/2, size.height/2));armature->getDisplay()->setScale( 1 );
// step 4: play the animationarmature->getAnimation()->playTo(“stand”, 1, 60, true);
addChild( batchNode );

  • 本帖最后由 jyinkailej 于 2012-9-8 23:57 编辑 *

example2 :测试大量armature运行的效果,windows中600个 60帧(刚才测600个只有36帧,吓到我了,早上还60帧的呢,原来开了鲁大师,给我降能了)488android中不知道是我机子太水还是没设置对还是就是这样的,才50个60帧左右,求解释。因为 在 CCBone 和 CCTween中使用了CCArray保存了指针 ,所以 想要释放的话还需要CCBone::removePoolObject();
CCTween::removePoolObject();CCConnectionData::sharedConnectionData()->removeAll(); 这个最好在程序结束再释放,因为程序用到的数据基本都是指向这里面的数据我使用了vld来测试内存泄露所以如果不调用上面的函数 ,程序结束的时候会出现很多内存泄露的信息,例子2中的做法:
AppDelegate::~AppDelegate()
{
SimpleAudioEngine::end();

CCConnectionData::sharedConnectionData()->removeAll();
CCBone::removePoolObject();
CCTween::removePoolObject();

}

example3:使用骨架,武器跟随鼠标拖拽转动。
博客地址:http://rainynote.com/

这是个好东西呀,做动画就很方便了!
上次CocoaChina线下聚会,有个家伙就说他们公司的动画就是用flash做,然后自己解析xml文件给cocos2d-x用。

这个太赞了,之前一直在找骨骼动画的工具!!!看到这个之后,泪奔啊。。。

— Begin quote from ____

morefun 发表于 2012-9-10 17:03 url

额,稍等啊,好像http://www.brashmonkey.com/
好像这个工具直接能生成那个配置文件
其实还是只要做解析就好 …

— End quote

还是有不一样的,这个工具可以生成包含骨骼从属关系的数据,而且Flash的新补间动画还是挺有吸引力的
494
具体等我把1.3版本的工具移植了再出个详细点的教程吧

感谢分享,本身也在尝试写,还是大神速度快……

请问用的是哪个版本的引擎啊?

— Begin quote from ____

ff_78 发表于 2012-10-29 11:25 url

我们也是用的这个版本,例子已经跑起来了。

— End quote

不可能呀,代码编译斗不过,我记得光main函数里就有几个返回的函数要被类型改成指针什么的,改完第一个例子能运行,之后关闭或做别的动作又会出错。,好多地方出错,我都改好几天了,没改完呀。

— Begin quote from ____

ff_78 发表于 2012-10-29 11:44 url

我们也改过一些地方,像std编译有问题啊,playto里面的一个参数改成0啊。最后改到可以用了。不过cocos2dx …

— End quote

要改超级多的东西,累死了都,我去吃午饭,回来联系你

— Begin quote from ____

jyinkailej 发表于 2012-9-15 22:07 url

我是输出到 根目录下的 Debug.win32 或者 Release.win32 下 可能 你其中一个目录没有 DLL …

— End quote

大神,我给你发消息了,记得查收,我先去吃饭,下午回来

— Begin quote from ____

ff_78 发表于 2012-10-29 11:44 url

我们也改过一些地方,像std编译有问题啊,playto里面的一个参数改成0啊。最后改到可以用了。不过cocos2dx …

— End quote

大神,我给你发消息了,记得查收

— Begin quote from ____

ff_78 发表于 2012-10-29 11:25 url

我们也是用的这个版本,例子已经跑起来了。

— End quote

大神,你抛弃我了么。。。

— Begin quote from ____

jyinkailej 发表于 2012-9-8 23:52 url

Cocos2d-x:将Flash2Cocos2d-X 放到Cocos2d-x根目录example中提供了3个例子。example1:
// step 1: add you …

— End quote

从2.02开始试,终于2.01版本合适了;你的库目录有改动过,改回去后显示成功了,但报如图错误,求指点。

— Begin quote from ____

woshidanew 发表于 2012-9-15 16:37 url

从2.02开始试,终于2.01版本合适了;你的库目录有改动过,改回去后显示成功了,但报如图错误,求指点。 …

— End quote

我是输出到 根目录下的 Debug.win32 或者 Release.win32 下 可能 你其中一个目录没有 DLL