cocos2d-x与FLASH动画之Flash2Cocos2d-x

当前我学习把cocos2d-x应用于Android平台的游戏开发（C＋＋版本）。目前，缺少的是动画编辑器。如果能够把FLASH用作这个平台的动画编辑器那是再理想不过的。

我搜索了许多的网站，最终得出如下结论：

1，读出FLASH中动画的逐帧数据

可以通过较容易地读出FLASH中动画的逐帧数据，然后创建cocos2d-x动画。这方面的主要工具是老G的AnimatePacker。它提供的参考文章是：

http://4137613.blog.51cto.com/4127613/779533

注意：老G同志目前把AnimatePacker更新到了2.0版本，相当OK。我在COCOS2D－X　BETA3中2.1下测试通过（Win32+Android）。NO　PROBLEMS！

关于这个工具的使用方法，上面的页面中作了详细介绍。不过，AnimatePacker要与TexturePacker配合使用。

2，利用FLASH2COCOS2D－X工具（RainyNote开发），极其优秀。

为了偷懒，我把有关文章引用于下面。

NOTE1：RainyNote的博客地址是：http://rainynote.com/2012/09/cocos2d-x-%E5%8A%A8%E7%94%BB%E5%B7%A5%E5%85%B7/

NOTE2：FLASH2COCOS2D－X与一个著名的开源FLASH开发扩展工具DrangonBones （http://dragonbones.github.com/）存在密切关系。
它就是在后者的基础上创建COCOS2D－X这方面的几个库文件形成的。

cocos2d-x 动画工具 Flash2Cocos2d-x

发表于 2012 年 9 月 8 日

最近在研究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版：

感觉这个工具如果能用在制作游戏应该会十分方便的，在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，同样拖到这个文件夹中。

4.双击元件3进入到 编辑元件3，把原来的图层删掉，创建3个新图层，分别叫as, t1, t2  。在t1图层拖进元件1，t2图层拖入元件2。左键点击元件1，在属性栏填入t1, 同样操作元件2命名为t2.

5.在as的第一帧右键->动作，填入

var xml:XML=
<test>
<t1/>
<t2/>
</test>

6.编辑时间轴，得到

7.打开Exporttool.fla 将 元件3拖入打开的 Exporttool.fla 场景中

8.控制->测试影片->在Flash professional中（可能不一样）

9.保存骨骼数据，保存贴图数据作为单个文件。（因为原来工具提供的保存贴图数据不支持输出plist，所以另外弄了一个输出单个贴图文件的，输出单个picture后可以用Texture Packer打包成支持Cocos2d的格式）

到此Flash这边的就做完了。目前只支持直接获取老式的补间动画。

其实也可以支持新式的补间动画的，只需要选中新式补间动画，右键->转换为逐帧动画 就可以了，你们也可以试一下。新式的补间动画很好用啊，支持创建运动路线，缓动曲线，嗯，确实可以。

其实原作者提供的例子很详细了，我稍微改了一点工具，大家可以看看 http://blog.sina.com.cn/s/blog_570dfe6a01013wua.html

Cocos2d-x：

将Flash2Cocos2d-X 放到Cocos2d-x根目录

example中提供了3个例子。

example1:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// step 1: add your skeleton xml file CCConnectionData::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 CCSpriteBatchNode armature = 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 animation armature->getAnimation()->playTo("stand", 1, 60, true); addChild( batchNode );

example2 :

测试大量armature运行的效果，windows中600个 60帧（刚才测600个只有36帧，吓到我了，早上还60帧的呢，原来开了鲁大师，给我降能了）

android中不知道是我机子太水还是没设置对还是就是这样的，才50个60帧左右，求解释。

因为 在 CCBone 和 CCTween中使用了CCArray保存了指针 ，所以 想要释放的话还需要

CCBone::removePoolObject();
CCTween::removePoolObject();

CCConnectionData::sharedConnectionData()->removeAll(); 这个最好在程序结束再释放，因为程序用到的数据基本都是指向这里面的数据

我使用了vld来测试内存泄露所以如果不调用上面的函数 ，程序结束的时候会出现很多内存泄露的信息，例子2中的做法：

1 2 3 4 5 6 7 8

AppDelegate::~AppDelegate() {     SimpleAudioEngine::end();     CCConnectionData::sharedConnectionData()->removeAll();     CCBone::removePoolObject();     CCTween::removePoolObject(); }

 

example3：

使用骨架，武器跟随鼠标拖拽转动。

注意：上面这一篇文章中介绍的是第一个版本的总体操作思路，有许多已经过时，只参考一下其中的总体思路吧!!!

cocos2d-x 动画工具 Flash2Cocos2d-x 1.3

发表于 2012 年 9 月 16 日

前几天 工具更新到了1.3的版本，然后我看着这个工具面板确实挺不错的就赶紧更新代码支持1.3生成的数据，话说1.3数据改动了蛮多的，他的Flash框架改了更多，框架这东西还是认真考虑后再弄个像样的。下面是原作者的PPT：

 

不全是和原版一样，我做了一定的修改来更方便的生成数据。

地址：https://github.com/jyinkailej/Flash2Cocos2d-x

blog:   rainynote.com

使用说明：1.安装 SkeletonSWFPanel.zxp 

2.如果安装不成功，可以手动拷贝文件 1.3\SkeletonSWFPanel\SkeletonSWFPanel\bin-debug 里的 SkeletonSWFPanel.swf  和

SkeletonSWFPanel 文件夹到

C:\Users\youyou\AppData\Local\Adobe\Flash CS6\zh_CN\Configuration\WindowSWF\SkeletonSWFPanel  这是WIN7下的做法，其他系统不大清楚。

3.打开Flash cs6 -> 窗口 ->其他面板 -> SkeletonSWFPanel

4. import-> 选择一个 你想要的 导入方式  导入 动画.

tween time : 两个动作切换 需要花的时间，比如 由 stand 切换到 run  中间的 tween 时间

animation time :  这个动作持续的时间

stage frameRate : 指的是 游戏 的帧率，因为可能不同的朋友 需要不同帧率的游戏，在这里设定了帧率再去调animation time后，你在游戏中 以同样的帧率来运行游戏，就能看到和在工具上显示的 动画效果 是一样的。（这个设定 是为了方便你调射动画速度，因为 Flash中默认是 24 帧 ）

bone animation delay : 这是一个很有用的设定，操作时 选中 

中的一个元素后 再调这个值，效果，举例说 如果只有 做了两帧动画，如果只播放这两帧动画，则会出现 所有 的 bone 的 动作的速率是一样的 ，

像 

图中所示  上面的马 的腿 的动作 是一样的，下面的马腿 设定了 延时 动作，这样出现一前一后跑动的效果，比较真实，不会死板。

5. 1.0的 骨骼从属需要手动 设置 很是繁琐，现在只要 在 bone  框内就可以拖动从属关系。

6.export ：这里提供了三种 保存方式， png  swf   单个文件 ，单个文件主要是方便我们自己可以选择打包方式，png 方式 会把  xml信息也压缩进 png里。

程序里面需要做的就是：
                // step 1: add your skeleton xml file
                //CCConnectionData::sharedConnectionData()->addData(“knight.xml”);
                CCConnectionData::sharedConnectionData()->addData(“zombie.xml”); 

                // step2: add plist and png to cache
                CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile(“zombie.plist”, “zombie.png”);

                // step 3: create a CCSpriteBatchNode 
                //CCSpriteBatchNode *batchNode = CCSpriteBatchNode::create(“knight.png”);
                CCSpriteBatchNode *batchNode = CCSpriteBatchNode::create( “zombie.png” );

                // step 4: create a armature just need armature name, plist, picture, and a CCSpriteBatchNode
                // armature = CCArmature::create(“Knight_f/Knight”, “Knight_f/Knight”, “knight.plist”, “knight.png”, batchNode);
                armature = CCArmature::create(“Zombie_f/Zombie”, “Zombie_f/Zombie”, batchNode);

                armature->getDisplay()->setPosition(ccp(size.width/2, size.height/2));
                armature->getDisplay()->setScale( 1 );

                // step 5: play the animation
                armature->getAnimation()->playTo(“stand”);

好吧 就这么多吧 ，暂时没想起还有什么。

――――――――――――――――――――-分割线――――――――――――――――――――――――-
代码 注释 可能有点水，框架 也没仔细想过，从那边 移植过来后 ，没有实际考虑 详细计划，暂时没时间啊，大四了别人都去找工作了，我还在码代码，突然感觉时间紧急了啊，有时间一定改善。

NOTE: 如果上面的教程说得不够细致，不妨参考一下“DragonBones快速入门指南”教程（http://dragonbones.github.com/getting_started_cn.html）。

但是，即使这个教程有一些地方也与最新的版本的个别界面有些不一致，但是无大碍。

cocos2d-x 动画工具 SPArmature(Flash2Cocos2d-x) 1.4

发表于 2013 年 1 月 20 日

Flash2Cocos2d-x 1.4 版本终于出来了。。。改名为SPArmature

这个版本改动的东西挺多的额，更新：

1、alpha渐变
2、颜色渐变
3、不同batch node 图片切换
4、改变结构
5、flash编辑图片碰撞区域，导出顶点
6、使用矩阵转换计算
等。。。。。。

需要注意的是：
1、排序有两种模式，一种使用vertexz， 一种使用cocos2dx排序
使用vertexz主要用在不同骨骼可以切换不同 batchnode ，vertexz 存在精度问题，在某些机子上可能排序有点问题。

2、修改了ccnode部分代码 来支持矩阵变换， 在更新文件夹下可以看到更新的(ccnode.h, ccnode.cpp)

3、alpha渐变， 颜色渐变 在 插件中预览不到效果 （参考demo下 bird.fla）。
4、在flash中编辑碰撞区域方法 （参考demo 下 weapon.fla）：
（1）新建一层图层，命名为contour
（2）使用钢笔工具勾勒出轮廓形状
（3）右键图层-》属性-》遮罩层，不然导出的图片会有画出的轮廓

5、example基于 cocos2d-x 2.0.3
6、需要将xml 、 plist 、png信息加入ArmatureDataManager中
例：
ArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo(“Zombie_f/Zombie”, “”, “zombie.png”, “zombie.plist”, “zombie.xml”);

7、将BatchNode  与当前 CCLayer 绑定，切换场景时可以保留你的人物不被删除，
BatchNodeManager::sharedBatchNodeManager()->initWithLayer(this, “TEST_ARMATURE”);

当需要删除batchnode时，
BatchNodeManager::sharedBatchNodeManager()->removeBatchNodes(“TEST_ARMATURE”);

另外：
这个骨骼工具已经加入到了SP-II工具中 http://www.sweetpome.com/
工具目前正在努力完善中，希望大家多多关注。

使用SP-II工具中制作游戏我们选用的是js脚本来加速游戏的开发，我制作的demo都是脚本写的，由于时间限制，发布到cocos2d-x的版本的demo会少些，

github :　https://github.com/jyinkailej/Flash2Cocos2d-x

 

――――――――――――――――――――――――――――――――――――――�C对于修改了的ccnode，在新的版本中加入对应的部分应该就好了。

头文件中加入 定义 ：

void translateFormOtherNode(CCAffineTransform. &otherTransform);

CCAffineTransform. m_tOtherTransform;

cpp中加入函数：

void CCNode::translateFormOtherNode(CCAffineTransform. &otherTransform)
{
    m_tOtherTransform. = otherTransform;
    m_bIsTransformDirty = m_bIsInverseDirty = true;
}

m_tTransform. = CCAffineTransformConcat(m_tTransform, m_tOtherTransform);

加入的地方可参考git中的ccnode 代码

NOTE1：目前最新的1.4在上面文章中提到的COCOS2D－X 2.0.3下调试通过（仅WIN32，在ANDROID下还没有试）。

NOTE2：由于COCOS2D－X　1.4直接修改了COCOS2D－X系统核心类CCNode，感觉不太爽。
　　　当然，在2.0.3下使用的话，只需要使用伴随的CCNode.cpp和CCNode.h覆盖COCOS2D－X系统中的那两个文件即可。



3,Super Animation Converter

这个工具是http://www.cocos2d-x.org/中提到的（http://www.cocos2d-x.org/boards/6/topics/19621?page=2&r=19711）。

目前也还没有使用过，但是，可以看到这个工具已经吸引了相当一些开发者，不容忽视。