在Cocos2d-x 3.4的发布日志上忽然发现他们有GAF这个动画库。研究了下,下面是关于Cocos Package Manager的使用,如何为项目添加GAF扩展

视频:

   

Cocos Package Manager是一个引擎扩展模块化框架,其服务于Cocos2d-x的扩展的开发和使用流程。当扩展开发出来后,可将其上传到服务器,并用于游戏开发中。使用引擎扩展的工作流非常简单明了。以GAF为例,使用步骤如下:

  1. 创建一个工程:cocos new -l cpp

  2. 下载并安装GAF扩展:cocos package install gaf

  3. 进入游戏目录

  4. 添加GAF扩展:cocos framework add gaf 

  5. 所有的步骤就都完成了,GAF已经被安装到包文件夹中,可以用于游戏工程中了。

好了,这样gaf就弄进你的项目了。

如果你这样做已经成功的将gaf加入到了项目中,那么,恭喜你,并且请跳过下面的内容。直接跳到GAF使用教程使用部分。

真的好了吗?no!

  1. 我的项目使用的是Cocos2d-x 3.3。而不是3.4。

  2. gaf官方网址是 http://gafmedia.com/ 。官方提供的转换工具的最新的版本已经是4.3了(GAF Converter Version 4.3)。可,貌似使用Cocos package install gaf弄进来的是解析3.x版本的库。

       我目前使用的GAF Converter版本是4.0。但今天既然在写博客,就顺便升级成了4.3。4.3版本最大的好处就是,界面可以选择中文的了。

2.jpg

3.jpg

4.jpg

在这里,如果哪位大神能搞个GAF Converter破解版,那我就happy了。当然,其实免费版已经完全够用了。

之前说到了github网址,现在说说分支,我使用的是gaf_4_develop分支,经过测试,master并不能在Cocos2d-x 3.3中编译通过。

首先当然是看一看Cocos2d-xGAFPlayer项目gaf_4_develop的readme.md。

支持的平台有和版本有:

  • Windows - Cocos2d-x v3.3, v3.4

  • Mac OS X - Cocos2d-x v3.3, v3.4

  • iOS - Cocos2d-x v3.3, v3.4

  • Android - Cocos2d-x v3.3, v3.4

  • Windows Phone 8 - Cocos2d-x v3.3, v3.4

  • Upcoming Linux project

至于如何将GAF加入到Cocos2d-x中,很简单:拷贝或者创建一个symlink(这个在类unix下才行,比如Mac,windows下不行的)到cocos2d-x/external/目录下。

5.jpg

在我的项目中,由于不想加入太多的无关的文件。所以只添加了以下两个文件夹(一个是C++库,一个是luabinding 库。其实不推荐这么做,里面的tests和sample还是有用的,团队中的其他人不一定下载了完整的Cocos2dxGAFPlayer,如果全部加进去,团队中的其他人就不用去其他地方找GAF怎样用了)。

6.jpg

Cocos2dxGAFPlayer里面提供了对Cocos2d-x的大力支持。提供了vs项目文件(Cocos2dxGAFPlayer\Library\GAFPlayer.vcxproj,Cocos2dxGAFPlayer\lua_bindings\proj.win32\libGAFLuaBinding.vcxproj),android.mk文件,xcode(GAFPlayer.xcodeproj,gaf_lua_bindings.xcodeproj)的工程文件,只要把这些项目文件添加到项目中去,就好了。对了,还包括GenerateProjectFiles.py,虽然我不知道怎么用,但看文件的名字的意思,应该是一个生成一个带gaf扩展的新项目的脚本。

这里只提两个地方,一个是和tolua有关的:

  1. Cocos2dxGAFPlayer\lua_bindings\conversions.yaml.diff文件是一个git补丁,用于在lua/conversions.yaml文件里加入"gaf::": "gaf."。算是C++中的命名空间和lua的一个对应。

  2. Android中添加luaBidnding要修改的地方,如下:

7.jpg

8.jpg


GAF使用教程

免费版的GAF用户是支持元件动画的,但貌似不支持从flash的元件中提取动画序列。还是给图说明下吧

9.jpg

10.jpg

上图是原件动画,但没费版的gaf用户是不支持的。

11.jpg

上图是场景动画,通过label标签,创建了seq1和seq2两个动画序列

播放效果如下,第一个gif是seq1,第二个是seq2。

1427093444780199.gif

1427093451663557.gif

好了。上面是一个logo砸下去的动画和一个“文字遮罩特效”动画。

关于“文字遮罩特效”动画。可以用【Cocos2d-x 3.2】裁剪节点(ClippingNode)总结。但偷下懒的话,就让美术实现吧。

下面是代码实现。显示创建和播放一遍动画。并设置播放结束的回调。

auto org = Director::getInstance()->getVisibleOrigin();
auto size = Director::getInstance()->getVisibleSize();

auto m_asset = gaf::GAFAsset::create("gafanim/logo_anim/logo_anim.gaf");
auto animation = m_asset->createObjectAndRun(false);
this->addChild(animation, 10);
animation->setPosition(Vec2(-size.width/2+200,org.y+size.height));

animation->setAnimationFinishedPlayDelegate(CC_CALLBACK_1(LayerLogo::onLogoAnimEnd, this));

1427093542127774.gif

在动画播放结束的回调里,去除回调,循环播放seq2动画。

void LayerLogo::onLogoAnimEnd(gaf::GAFObject* obj)
{
    obj->setAnimationFinishedPlayDelegate(nullptr);
    obj->playSequence("seq2", true);
}

1427093580681370.gif

在lua中使用,用于

// Lambda binding for lua is not supported.

。所以,setAnimationStartedNextLoopDelegate,setAnimationFinishedPlayDelegate等setXXXDelegate的函数,需要手动编写tolua文件。可以参照cocos2dx其他的(设置lua回调的函数,比如setXXEventCallback)来自己实现。

由于项目中暂时没碰到要使用gaf动画序列的情况。所以,我就没有写上面的tolua。贴一段lua版的gaf代码调用。

--玩家回合动画
local asset = gaf.GAFAsset:create("gafanim/player_round/player_round.gaf")
local animation = asset:createObject()
self:addChild(animation,10)
local origin = cc.Director:getInstance():getVisibleOrigin()
local size = cc.Director:getInstance():getVisibleSize()
animation:setPosition(cc.p(origin.x,origin.y+size.height))
self.player_round_animation_ = animation

      上面的代码创建了一个动画,但并没有播放。而是在代码的特定位置,这里的动画是切换到玩家回合的一个动画提示。

self.player_round_animation_:setLooped(false, true)
self.player_round_animation_:start()