当前我学习把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
——————————————————————————————————————–对于修改了的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）。
目前也还没有使用过，但是，可以看到这个工具已经吸引了相当一些开发者，不容忽视。
扫一扫
1998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
