CocoStudio sample讲解 SampleFrameAnimation序列帧动画

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的节点, 这个就是�*****９甑慕诘懔�. 在资源面板中选择�*****９阷list中的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.5*size.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);

 
 
 
好了, 大家的代码都写好了吧, 赶快运行一下, 让小鱼们快乐地游起来吧!