cocos2d-x与FLASH动画之Flash2Cocos2d-x

  1. 云栖社区>
  2. 博客>
  3. 正文

cocos2d-x与FLASH动画之Flash2Cocos2d-x

技术小甜 2017-11-15 18:20:00 浏览811
展开阅读全文

当前我学习把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)。

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













本文转自朱先忠老师51CTO博客,原文链接:http://blog.51cto.com/zhuxianzhong/1531767 ,如需转载请自行联系原作者


网友评论

登录后评论
0/500
评论
技术小甜
+ 关注