CocoStuido sample----SampleFrameAnimation源代码地址
https://github.com/chukong/CocoStudioSamples
大家可以预先下载这个源代码, 等下要用到里面的图片资源哦
动画是游戏中的重要组成部分. 序列帧动画是在时间轴上逐帧绘制不同的内容, 使其连续播放形成动画. 由于是逐帧显示, 所以具有极大的灵活性, 几乎可以表现任何想表现的内容. 序列帧动画以其灵活性, 简单性在游戏动画中占有重要的地位.
一 目标
在本教程里, 我们将学习在CocoStudio中快速制作序列帧动画, 并在cocos2d-x中运行.
我们使用的cocos2d-x的版本是2.2.2, CocoStudio的版本是1.2.0.1. 不同的版本, 功能上会有差异, 大家学习时, 最好采用对应的版本.
二 创建项目并导入资源
在上面的图中, 可以看到我们已经做了几条活灵活现的等待捕捞的各种鱼… 以及几只憨头憨脑的小海龟。 让我们就用这几只小海龟做例子来学习下序列帧动画的制作吧！
你可以在下载到的源代码的SampleFrameAnimation/Resources目录中找到fish040.plist, fish040.png, 这两个文件就是小海龟的资源文件啦.
用CocoStudio创建动画项目以及导入资源的步骤咱们这里不再赘述, 请参见本系列前面几篇教程.导入后的资源面板如下.
从上图我们可以看到CocoStudio对打包后的图片文件支持非常好, 可以直接预览plist中的小图, 当然未打包的图更支持啦.
三 第一张图片
在动画编辑器的形体模式下, 我们将小海龟的第一张图片, "actor_fish_haigui_normal_001.png"拖拽到渲染区去.
注意哦, 动画编辑器是有形体模式和动画模式两种, 我们只能在形体模式下拖拽图片到渲染区. 点击一下, 形体模式和动画模式可以互相切换.
四 动起来
现在让我们切换到动画模式, 可以看到动画帧面板有一个Layer1的节点, 这个就是小海龟的节点了. 在资源面板中选择小海龟plist中的002-015的资源, 并拖拽到Layer1节点.
之后可以看到, 编辑器自动帮我们生成了一系列的关键帧.
好, 现在可以点击下动画帧面板中的播放按钮了. 怎么样? 是不是看到憨头憨脑的小海龟快活地游动了起来了.
这个游戏中还带了其他, 比如fish010, fish020等小鱼的图片资源, 你可以如法炮制, 分别创建动画编辑器工程, 快如让他么也游动起来.
五 导出资源
现在我们要为程序内调用这些可爱的小鱼做准备了. 从菜单中选取"文件" => “导出项目”(或者用快捷键 Ctrl + E), 选择下导出位置, 其他使用默认值即可.
我导出到了桌面, 打开导出后的文件夹, 可以看到有 fish04.ExportJson, fish04.plist, fish04.png等几个文件. 我们稍后会用到这几个文件.
六 在cocos2d-x工程中添加导出后的资源
想必各位看官都已经熟练掌握了cocos2d-x工程的创建, 我这里就不再啰嗦了.
创建完工程之后, 需要将我们上面用CocoStudio导出的几个文件拷贝到cocos2d-x工程的Resources文件夹下.
七 代码实现
本教程的Demo包含了7种形态各异的小鱼, 所以我们要创建一个鱼的分类, 然后每种小鱼用一个子类来实现.
打开SampleFrameAnimation/Classes目录下的Fishes.h和Fishes.cpp, 可以看到Fishes类的声明和实现.
声明:
class Fishes : public cocos2d:: CCLayer //从CCLayer派生{public : virtual void onExit(); virtual void onEnter();
cocos2d:: CCSize size;//保存屏幕大小用};实现:
void Fishes ::onEnter(){ CCLayer ::onEnter();
size = CCDirector ::sharedDirector()->getVisibleSize(); //2048*1536 this ->setScaleX(size.width/2048); this ->setScaleY(size.height/1536); size.height = 1536; size.width = 2048;}
void Fishes ::onExit(){ removeAllChildren();}
我们还是用小海龟做例子, 其他鱼类读取都是一样的. 小海龟要从屏幕的上方游入屏幕, 然后从下方游出屏幕. 我们来看下其代码实现.
声明:
class Fish04 : public Fishes //从上面提到的Fishes类派生{public : virtual void onEnter(); //覆盖父类的onEnter方法private : void callback(); //游出屏幕下方后回调 cocos2d::extension:: CCArmature * armature; //保存小海龟的对象};
实现:
void Fish04 ::onEnter(){ Fishes ::onEnter();//调用父类方法
//创建一个10秒内游到屏幕下方的Action CCActionInterval * actionToUp = CCMoveTo ::create(10.0, ccp(0.3 size.width,size.height * -0.5)); //创建一个seq序列, 完成actionToUp后调用callback方法让小海龟回到起始位置 CCSequence * seq = CCSequence ::create(actionToUp,CCCallFunc ::create( this, callfunc_selector( Fish04 ::callback)),NULL );
//加载小海龟导出的三个文件 CCArmatureDataManager ::sharedArmatureDataManager()->addArmatureFileInfo( “fish040.png”, “fish040.plist” ,“fish04.ExportJson” ); //创建小海龟对象 armature = CCArmature ::create(“fish04” ); armature->setRotation(-90); //调用小海龟的动画 armature->getAnimation()->playWithIndex(0); //将小海龟对象设置到初始位置 armature->setPosition( ccp (0.3 * size.width,1.5size.height)); armature->runAction( CCRepeatForever ::create(seq)); //添加到父节点 addChild(armature);}
void Fish04 ::callback(){ //将小海龟对象设置到初始位置 armature->setPosition( ccp (0.3 * size.width,1.5*size.height));}
这样我们就完成了, 小海龟的类以及其父类. 其他小鱼的类, 大家可以参见Fishes.h和Fishes.cpp. 如果有问题, 欢迎大家来留言讨论.
八 代码调用的核心
看到这里想必大家对如何在cocos2d-x中调用CocoStudio生成的动画文件了然于胸了吧, 是的, 其实其主要代码就下面几行, 也可以看出序列帧动画的调用也是非常方便, 快捷的, 非常便于理解的.
//加载导出的文件CCArmatureDataManager ::sharedArmatureDataManager()->addArmatureFileInfo( “fish040.png” , “fish040.plist” , “fish04.ExportJson” ); //创建对象armature = CCArmature::create( “fish04” );//调用动画armature->getAnimation()->playWithIndex(0);//添加到父节点addChild(armature);
好了, 大家的代码都写好了吧, 赶快运行一下, 让小鱼们快乐地游起来吧!
居然更新三个啦
新版主大人，可惜我只是美术，动画我懂，代码天书