现在的位置: 首页 > 综合 > 正文

关于pc上的flash动画转移到Cocos2d-x使用

2017年10月25日 ⁄ 综合 ⁄ 共 3859字 ⁄ 字号 评论关闭

http://momowing.diandian.com/post/2012-11-22/40042074075

关于pc上的flash动画转移到Cocos2d-x使用

Jetion:

某些时候,我们可能需要把pc上面的Flash动画拿到Cocos2d-x上面使用。

解决方案:

第一:

若你的.fla源文件中不带有骨骼动画,则你可以使用TexturePacker结合AnimatePacker来解决这个问题。

a.把.fla文件导出为.swf

b.把.swf文件直接丢到TexturePacker中,它会自动帮你解析出所有的帧,并导出为.plist文件,它附带一张.png图

c.把.plist文件丢到AnimatePacker中,它也会自动帮你解析出所有的帧,然后根据需要,制作你动画,AnimatePacker不知道怎么使用的,可以看我前面的文章

这样你的Falsh动画就能转移到Cocos2d-x使用了。

这种方案在b这个步骤的时候经常会遇到一个问题,就是你丢进去的.swf文件只能帮你解析出来一帧,接下来我们来分析这种情况。

出现这种情况的原因:大部分的Flash动画都是比较复杂的,它包含了多套的动画方案,而且它们一般都不是设计在主场景中的,而是绑定在各个元件中的,主场景中只是丢了一张图片。这样就带来了问题了,因为TexturePacker只会解析你主场景中的帧动画,所以,你就只解析到了一张图片。

那这个问题我们要怎么解决呢?跟TexturePacker的作者商量一下吧。能不能把元件中的帧动画也解析了呢。或许以后可以,但是至少目前是不行的。所以,我们能做的就是如下:

a.在Flash cs6中文件->新建->ActionScript 3.0,新建一个.fla文件,假设我们命名为new.fla

b.选中原.fla文件中元件里面绑定的帧动画,右键复制帧,黏贴到new.fla的主场景中,你可以把所有元件中的动画都黏贴到new.fla中,这不会影响我们之后的读取。都完成之后,右键另存为new.swf。

c.然后把new.swf文件丢到TexturePacker中,怎么样,是不是所有帧都出来了?而且一样的帧TexturePacker还会自动帮你合并到一起,可以减少生成的.png图片大小。导出为.plist文件,附带一张.png图。

d.把.plist文件丢到AnimatePacker中,它也会自动帮你解析出所有的帧,然后根据需要,制作你动画。


这种方案或许比较繁琐,但是是目前我能实现的不带骨骼动画的.fla文件的移植到Cocos2d-x中使用的方法。接下来介绍一下带骨骼动画的.fla文件又是如何导出为Cocos2d-x可以使用的文件

第二:

第二个方案我们是要使用到的一个工具叫Flash2Cocos2d-x,至于安装方面问题,也可以看看我前面的文章

当我们的.fla文件中不带骨骼数据的时候,我们使用的上面的方案。我也尝试使用Flash2Cocos2d-x来导出,但是在Import选项上面时,第一个和第二个都没有反映,第三个提示不包含骨骼数据,或许这个工具只能用来导出骨骼动画吧!

所以,你也可以把这个方案当作Flash2Cocos2d-x的一点资料吧。

大体步骤如下:

打开.fla文件,窗口->其他面板->SkeletonSWFPanel,打开面板,点击import(默认为All library items),若你有封装了骨骼信息的.swf文件,也可以选择第三项。waiting......然后所有的骨骼信息就都出来了。

至于具体的这个工具怎么做骨骼动画,可以参考作者的文章

然后Export导出文件,

这边有4个选项,第一个会直接导出一张封装了骨骼信息的PNG图片,第二个导出带有骨骼信息的swf动画,第三个暂时不明白,第四个导出许多单张的PNG图片和XML文件。据论坛上面使用过这个工具的朋友说(这个方案本人没在Cocos2d-x中引用过),一般都是使用第四个选项,然后再使用TexturePacker工具,把所有的单张图片生成图片集.plist文件,这样需要放入到Cocos2d-x
资源文件夹中的文件就有.png   .plist    .xml 3个文件,跟第一种方案最后是一样的。但是它们在Cocos2d-x中引用需要使用不同的类库(关于类库在cocos2d-x2.0.4中报错的问题,应该改一下类的路径就可以了)。这边需要用到的类库就是在下载的工具里面的Flash2Cocos2d-X子文件夹中的类(大概有40+,是不是全部需要用到,我没实践过)。

最后在代码方面的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//
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");

这个工具对于骨骼动画的支持还是挺好的,很期待作者继续更新。

当然我们也可以使用CocosBuilder来做骨骼动画,在CocosBuilder做骨骼动画的时候,遇到了一个骨骼动画和Cocos2d-x里面的action结合出现action只运行固定时间的异常,比如我action设置的是2s,但是它只运行0.5s就停止了,至于这个问题是什么导致的,暂时还没解决,以后解决了会在我的博客上面补上。如果有哪位朋友懂的,麻烦指导一下!

总结一下:

第一:PC上面的不带骨骼动画的.fla文件我们导出为.swf文件后,结合TexturePacker和AnimatePacker来开发

第二:带骨骼动画的.fla文件或者是分装了骨骼信息的.png和.swf文件,我们可以使用Flash2Cocos2d-x结合TexturePacker来开发。

第三:制作骨骼动画可以使用Flash2Cocos2d-x,也可以使用Cocosbuilder来制作,关于使用Cocosbuilder如何制作骨骼动画,可以看我前面的博客。

CocosBuilder2.1制作骨骼动画以及Cocos2d-x Windows下使用骨骼动画

Cocos2d-x结合Cocosbuilder开发游戏大致流程

(转载)Creating a Game with CocosBuilder

特别推荐第三篇文章,真的是一篇非常好的文章,感谢作者的分享!!!

抱歉!评论已关闭.