CocoStudio sample讲解 SampleKeyFrameAnimation关键帧动画

CocoStuido sample----SampleKeyFrameAnimation源代码地址  
https://github.com/chukong/CocoStudioSamples  
大家可以预先下载这个源代码, 等下要用到里面的图片资源哦  
 
在上一篇教程中我们学习了序列帧动画, 今天我们来学习下关键帧动画在CocoStudio中的制作方法.  
所谓关键帧动画, 就是给需要动画效果的属性, 准备一组和时间相关的值, 这些值都是在动画序列中比较关键的帧中提取出来的, 而其他时间帧中的值, 可以用关键值采用特定方法计算出来, 以达到流畅的动画效果.  
 
尽管所有动画都可以采用序列帧的方式制作, 但序列帧动画会保存每帧的全部画面, 所以会占用较多的存储空间. 对于手机游戏来讲, 更希望有较小的安装包,  而使用关键帧动画, 可以有效地减少游戏安装包大小.  
 
一 目标  
在本教程里, 我们将学习下如何用CocoStudio制作关键帧动画, 并在cocos2d-x运行. 我们今天会用一个耍酷的牛仔来做示例, 他可是会几套动作哦.  
我们使用的cocos2d-x的版本是2.2.2, CocoStudio的版本是1.2.0.1. 不同的版本, 功能上会有差异, 大家学习时, 最好采用对应的版本.  

  
 
 
二 创建项目并导入资源  
大家可以在下载到的源代码的SampleKeyFrameAnimation\SampleKeyFrameAnimation_Editor\KeyFrameAnimation\KeyFrameAnimation\Resources 目录下找到我们需要的图片资源  
 
打开CocoStudio的动画编辑器, 并创建一个新的项目.  
然后大家可以在资源面板点击导入文件的按钮, 导入这些资源文件. 导入后的资源面板如下.  

  
 
三 图片的属性  
我们需要先学习下图片的各项属性, 在形体模式下, 我们把帽子"hat.png"从资源面板拖入渲染区, 并选中, 可以看到属性面板以及资源管理面板如下图所示.  
(如果不小心关掉了窗口, 可以从菜单栏中, "视图"=>"属性", "视图"=>"资源编辑窗口", 打开这两个面板. 还可以把这两个面板调整到合适的大�*****臀恢�, 以方便查看)  

  
 
我们可以看到一个图片有数项常规属性, 比如名字坐标等.  
 
坐标, 在渲染区的位置.  
旋转, 旋转的角度  
缩放, 缩放的比例, X方向与Y方向可以不同.  
 
说到这里, 我们必须得介绍下资源管理面板中锚点的概念.  
大家也可能注意到了, 上图红圈中有一个红色的十字, 是的, 这个就是我们所说的锚点.  
锚点可以理解为当前图片的中心点, 比如旋转, 缩放都是以锚点为中心点旋转和缩放的.  
在资源管理面板可以拖动红色十字来改变锚点的位置.  
 
其他的属性, 以后我们需要时, 我们再讲.  
 
属性框中的值都可以直接修改其值, 但这样并不直观.  

  
当我们选中了帽子之后, 直接拖动可以改变其位置.  
大家或许已经注意到帽子的周围出现了边框和5个操作提示圈. 其中1,2,3,4,把鼠标放上去, 光标变成缩放提示, 拉动该圈可以缩放图片. 鼠标放到5上, 光标变成旋转提示, 拉动该圈可以旋转图片.  
 
四 构建形体  
大家把牛仔的身体部位的图片都拖入渲染区, 然后可以通过拖动, 旋转, 缩放来构建出形体模型.  

  
经过一番拖动, 旋转, 酷酷的牛仔就成型了吧. 太棒了!!!  
啊...... 等等... 帽子怎么被斗篷给压住了?????  
 
恩, 不要慌张, 我们再调整下帽子和斗篷的前后关系就好了.  
打开对象结构面板, 大家是不是看到一堆Layer1, Layer2...  
我们点击下对象面板的比如Layer1, 就能看到渲染区该图片已经被选中了.  
这样我们依次点击就可以找到帽子和斗篷.  
是不是觉得这样太繁琐了, 比如下次我们需要修改了, 又得再次找对应的图片.  
CocoStudio早就给大家想到了, 双击Layer1, 我们可以给他改个容易记忆的名字.  

  
我们找到帽子和斗篷的节点, 并且重命名为hat, cloak. 选中hat, 点击上图中数字1下的按钮, 将hat上移一位到cloak的上面(也可以用鼠标直接拖动).重新看下渲染区, 是不是大功告成啦!!!  
 
五 构建动画  
现在让我们切换到动画模式, 可以看到动作列表面板以及动作帧面板如下图所示.  

  
 
我们今天要学习的是关键帧动画, 所以我们先来看下如何插入第一个关键帧. 我们先来制作牛仔的左臂向前挥出的这一帧.  
在上图中, 红圈内带一个倒箭头的黄色线是时间轴的游标, 游标可以在时间轴上方便地拖动, 或者点击时间轴, 游标将跳到点击处.  
我们将游标拖动到第10帧, 选中"left arm"这个节点, 并点击"添加帧"按钮. 这时, "left arm"就在第10帧多了一个新的关键帧.  
并且我们在渲染区中将"left arm"进行拖动, 旋转等操作到合适的状态.  
这个时候, 我们拖动黄色的游标, 就可以看到牛仔的左臂已经流畅地向前挥出了.  
  
  
这个就是关键帧的威力所在, 中间这些帧, 手臂的位置等, 编辑器已经自动帮我们计算好了.  
 
接下来, 我们可以将其他节点在不同的时间帧上插入关键帧. 最终完成这个动画的制作.  
 
这里我们再说一个自动关键帧的概念, 我们将游标放到一个新的位置后, 在渲染区直接改变一个节点的属性(位置, 旋转, 缩放, 透明度等等) 会自动在当前位置插入新的关键帧.  
希望这个自动关键帧能帮助大家快速做出关键帧动画来.  
 
六 动作列表  
在游戏制作的过程中, 我们经常会遇到一个动画有多种状态的情况. 比如, 我们今天要制作的牛仔, 就会好几套动作.  
我们在动作列表面板点击右键, 打开动作管理菜单. 通过这个菜单我们可以重命名, 新建, 复制, 删除动作.  

  
 
下面让我们添加一个新的动画.  
大家会发现渲染区变空了, 这时需要大家为各个节点重新指定下渲染需要的资源.  

  
接下来大家按上面的步骤, 就可以给牛仔制作新的动画了.  
 
我们可以为动画重命名一个有意义的名字, 这样既方便制作, 也便于以后程序调用动画.  
 
我们在这里无法将每帧的制作都讲述一遍, 大家可以对照着源代码中的Demo, 然后对照着练习一遍.  
有什么问题, 可以随时到咱们的CocoaChina论坛的CocoStudio专区提出来哈.  
 
七 导出资源  
用快捷键Ctrl+E打开导出对话框, 将图片最大宽度修改为2048, 选择导出的路径,  其他按默认配置我们得到了10.ExportJson 100.plist100.png 这些文件. 我们稍后会用到这些文件.  
 
八 在cocos2d-x工程中添加导出后的资源  
想必各位看官都已经熟练掌握了cocos2d-x工程的创建, 我这里就不再啰嗦了.  
创建完工程之后, 需要将我们上面用CocoStudio导出的几个文件拷贝到cocos2d-x工程的Resources文件夹下.  
 
九 代码实现  
我们要在cocos2d-x工程中实现点击屏幕, 切换牛仔的不同的动作. 我们直接在默认的cocos2d-x的HelloWorld上做修改.  
 
打开HelloWorld.h, 添加"cocos-ext.h"的引用.   
 
#include"cocos-ext.h"  
 
并且为HelloWorld在init函数后, 添加两个虚函数ccTouchBegan 和 registerWithTouchDispatcher.  
 
 
 

virtual bool init(); 

virtual bool ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d:: CCEvent *pEvent);

virtual void registerWithTouchDispatcher();

 
 
添加两个私有变量.  

private:

                cocos2d::extension:: CCArmature* armature;//保存牛仔对象

 int count;//当前播放的动画序号

 
 
然后打开HelloWorld.cpp, 在init函数的return前增加下面的内容.  

//启用触摸

                setTouchEnabled( true);

                count = 0; //默认播放第一个动画

 

 //加载导出的数据

 CCArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("100.png", "100.plist","10.ExportJson" );

 

 //创建牛仔对象

                armature = CCArmature::create("10" );

                armature->setPosition( ccp(visibleSize.width * 0.8,visibleSize.height * 0.5));

                armature->getAnimation()->playByIndex(0); //播放第一个动画

                armature->setScale(0.25);

 this->addChild(armature);

 // 增加一句点击切换动画的提示

 CCLabelTTF* pLabel = CCLabelTTF::create("Touch Screen to Change Animation" , "Arial", 30);

    pLabel->setPosition( ccp(origin.x + visibleSize.width*0.5,

                            origin.y + visibleSize.height * 0.2));

 this->addChild(pLabel,0);

 

 return true;

 
 
然后再添加函数ccTouchBegan 和 registerWithTouchDispatcher的实现.  
 

bool HelloWorld ::ccTouchBegan(cocos2d::CCTouch * pTouch, cocos2d::CCEvent *pEvent)

{

 //点击后播放动画列表中的下一个动画

                count++;

                count = count% armature->getAnimation()->getMovementCount();

                armature->getAnimation()->playWithIndex(count);

 return false ;

}

 

void HelloWorld ::registerWithTouchDispatcher()

{

 CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, INT_MIN+1, true);

}

 
 
好了, 赶快运行一下吧, 你的牛仔开始耍酷了吗?