CocoStudio sample讲解 SampleKeyFrameAnimation关键帧动画
2014-03-06 18:06
309 查看
CocoStuido sample----SampleKeyFrameAnimation源代码地址
https://github.com/chukong/CocoStudioSamples
大家可以预先下载这个源代码, 等下要用到里面的图片资源哦
在上一篇教程中我们学习了序列帧动画, 今天我们来学习下关键帧动画在CocoStudio中的制作方法.
所谓关键帧动画, 就是给需要动画效果的属性, 准备一组和时间相关的值, 这些值都是在动画序列中比较关键的帧中提取出来的, 而其他时间帧中的值, 可以用关键值采用特定方法计算出来, 以达到流畅的动画效果.
尽管所有动画都可以采用序列帧的方式制作, 但序列帧动画会保存每帧的全部画面, 所以会占用较多的存储空间. 对于手机游戏来讲, 更希望有较小的安装包, 而使用关键帧动画, 可以有效地减少游戏安装包大小.
一 目标
在本教程里, 我们将学习下如何用CocoStudio制作关键帧动画, 并在cocos2d-x运行. 我们今天会用一个耍酷的牛仔来做示例, 他可是会几套动作哦.
我们使用的cocos2d-x的版本是2.2.2, CocoStudio的版本是1.2.0.1. 不同的版本, 功能上会有差异, 大家学习时, 最好采用对应的版本.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_7764380464ecbe9.gif)
二 创建项目并导入资源
大家可以在下载到的源代码的SampleKeyFrameAnimation\SampleKeyFrameAnimation_Editor\KeyFrameAnimation\KeyFrameAnimation\Resources
目录下找到我们需要的图片资源
打开CocoStudio的动画编辑器, 并创建一个新的项目.
然后大家可以在资源面板点击导入文件的按钮, 导入这些资源文件. 导入后的资源面板如下.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_20211f0bda4e499.png)
三 图片的属性
我们需要先学习下图片的各项属性, 在形体模式下, 我们把帽子"hat.png"从资源面板拖入渲染区, 并选中, 可以看到属性面板以及资源管理面板如下图所示.
(如果不小心关掉了窗口, 可以从菜单栏中, "视图"=>"属性", "视图"=>"资源编辑窗口", 打开这两个面板. 还可以把这两个面板调整到合适的大�*****臀恢�, 以方便查看)
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_bf39da20f60c83a.png)
我们可以看到一个图片有数项常规属性, 比如名字坐标等.
坐标, 在渲染区的位置.
旋转, 旋转的角度
缩放, 缩放的比例, X方向与Y方向可以不同.
说到这里, 我们必须得介绍下资源管理面板中锚点的概念.
大家也可能注意到了, 上图红圈中有一个红色的十字, 是的, 这个就是我们所说的锚点.
锚点可以理解为当前图片的中心点, 比如旋转, 缩放都是以锚点为中心点旋转和缩放的.
在资源管理面板可以拖动红色十字来改变锚点的位置.
其他的属性, 以后我们需要时, 我们再讲.
属性框中的值都可以直接修改其值, 但这样并不直观.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_dc989c6ded5bc82.png)
当我们选中了帽子之后, 直接拖动可以改变其位置.
大家或许已经注意到帽子的周围出现了边框和5个操作提示圈. 其中1,2,3,4,把鼠标放上去, 光标变成缩放提示, 拉动该圈可以缩放图片. 鼠标放到5上, 光标变成旋转提示, 拉动该圈可以旋转图片.
四 构建形体
大家把牛仔的身体部位的图片都拖入渲染区, 然后可以通过拖动, 旋转, 缩放来构建出形体模型.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_b73a1a8991d151e.png)
经过一番拖动, 旋转, 酷酷的牛仔就成型了吧. 太棒了!!!
啊...... 等等... 帽子怎么被斗篷给压住了?????
恩, 不要慌张, 我们再调整下帽子和斗篷的前后关系就好了.
打开对象结构面板, 大家是不是看到一堆Layer1, Layer2...
我们点击下对象面板的比如Layer1, 就能看到渲染区该图片已经被选中了.
这样我们依次点击就可以找到帽子和斗篷.
是不是觉得这样太繁琐了, 比如下次我们需要修改了, 又得再次找对应的图片.
CocoStudio早就给大家想到了, 双击Layer1, 我们可以给他改个容易记忆的名字.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_5147d5ca442f31e.png)
我们找到帽子和斗篷的节点, 并且重命名为hat, cloak. 选中hat, 点击上图中数字1下的按钮, 将hat上移一位到cloak的上面(也可以用鼠标直接拖动).重新看下渲染区, 是不是大功告成啦!!!
五 构建动画
现在让我们切换到动画模式, 可以看到动作列表面板以及动作帧面板如下图所示.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_99b53a28ae06959.png)
我们今天要学习的是关键帧动画, 所以我们先来看下如何插入第一个关键帧. 我们先来制作牛仔的左臂向前挥出的这一帧.
在上图中, 红圈内带一个倒箭头的黄色线是时间轴的游标, 游标可以在时间轴上方便地拖动, 或者点击时间轴, 游标将跳到点击处.
我们将游标拖动到第10帧, 选中"left arm"这个节点, 并点击"添加帧"按钮. 这时, "left arm"就在第10帧多了一个新的关键帧.
并且我们在渲染区中将"left arm"进行拖动, 旋转等操作到合适的状态.
这个时候, 我们拖动黄色的游标, 就可以看到牛仔的左臂已经流畅地向前挥出了.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_818db97b98f635c.gif)
这个就是关键帧的威力所在, 中间这些帧, 手臂的位置等, 编辑器已经自动帮我们计算好了.
接下来, 我们可以将其他节点在不同的时间帧上插入关键帧. 最终完成这个动画的制作.
这里我们再说一个自动关键帧的概念, 我们将游标放到一个新的位置后, 在渲染区直接改变一个节点的属性(位置, 旋转, 缩放, 透明度等等) 会自动在当前位置插入新的关键帧.
希望这个自动关键帧能帮助大家快速做出关键帧动画来.
六 动作列表
在游戏制作的过程中, 我们经常会遇到一个动画有多种状态的情况. 比如, 我们今天要制作的牛仔, 就会好几套动作.
我们在动作列表面板点击右键, 打开动作管理菜单. 通过这个菜单我们可以重命名, 新建, 复制, 删除动作.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_3f941b86f87d617.png)
下面让我们添加一个新的动画.
大家会发现渲染区变空了, 这时需要大家为各个节点重新指定下渲染需要的资源.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_0c2a66954e01bf1.png)
接下来大家按上面的步骤, 就可以给牛仔制作新的动画了.
我们可以为动画重命名一个有意义的名字, 这样既方便制作, 也便于以后程序调用动画.
我们在这里无法将每帧的制作都讲述一遍, 大家可以对照着源代码中的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);
}
好了, 赶快运行一下吧, 你的牛仔开始耍酷了吗?
https://github.com/chukong/CocoStudioSamples
大家可以预先下载这个源代码, 等下要用到里面的图片资源哦
在上一篇教程中我们学习了序列帧动画, 今天我们来学习下关键帧动画在CocoStudio中的制作方法.
所谓关键帧动画, 就是给需要动画效果的属性, 准备一组和时间相关的值, 这些值都是在动画序列中比较关键的帧中提取出来的, 而其他时间帧中的值, 可以用关键值采用特定方法计算出来, 以达到流畅的动画效果.
尽管所有动画都可以采用序列帧的方式制作, 但序列帧动画会保存每帧的全部画面, 所以会占用较多的存储空间. 对于手机游戏来讲, 更希望有较小的安装包, 而使用关键帧动画, 可以有效地减少游戏安装包大小.
一 目标
在本教程里, 我们将学习下如何用CocoStudio制作关键帧动画, 并在cocos2d-x运行. 我们今天会用一个耍酷的牛仔来做示例, 他可是会几套动作哦.
我们使用的cocos2d-x的版本是2.2.2, CocoStudio的版本是1.2.0.1. 不同的版本, 功能上会有差异, 大家学习时, 最好采用对应的版本.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_7764380464ecbe9.gif)
二 创建项目并导入资源
大家可以在下载到的源代码的SampleKeyFrameAnimation\SampleKeyFrameAnimation_Editor\KeyFrameAnimation\KeyFrameAnimation\Resources
目录下找到我们需要的图片资源
打开CocoStudio的动画编辑器, 并创建一个新的项目.
然后大家可以在资源面板点击导入文件的按钮, 导入这些资源文件. 导入后的资源面板如下.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_20211f0bda4e499.png)
三 图片的属性
我们需要先学习下图片的各项属性, 在形体模式下, 我们把帽子"hat.png"从资源面板拖入渲染区, 并选中, 可以看到属性面板以及资源管理面板如下图所示.
(如果不小心关掉了窗口, 可以从菜单栏中, "视图"=>"属性", "视图"=>"资源编辑窗口", 打开这两个面板. 还可以把这两个面板调整到合适的大�*****臀恢�, 以方便查看)
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_bf39da20f60c83a.png)
我们可以看到一个图片有数项常规属性, 比如名字坐标等.
坐标, 在渲染区的位置.
旋转, 旋转的角度
缩放, 缩放的比例, X方向与Y方向可以不同.
说到这里, 我们必须得介绍下资源管理面板中锚点的概念.
大家也可能注意到了, 上图红圈中有一个红色的十字, 是的, 这个就是我们所说的锚点.
锚点可以理解为当前图片的中心点, 比如旋转, 缩放都是以锚点为中心点旋转和缩放的.
在资源管理面板可以拖动红色十字来改变锚点的位置.
其他的属性, 以后我们需要时, 我们再讲.
属性框中的值都可以直接修改其值, 但这样并不直观.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_dc989c6ded5bc82.png)
当我们选中了帽子之后, 直接拖动可以改变其位置.
大家或许已经注意到帽子的周围出现了边框和5个操作提示圈. 其中1,2,3,4,把鼠标放上去, 光标变成缩放提示, 拉动该圈可以缩放图片. 鼠标放到5上, 光标变成旋转提示, 拉动该圈可以旋转图片.
四 构建形体
大家把牛仔的身体部位的图片都拖入渲染区, 然后可以通过拖动, 旋转, 缩放来构建出形体模型.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_b73a1a8991d151e.png)
经过一番拖动, 旋转, 酷酷的牛仔就成型了吧. 太棒了!!!
啊...... 等等... 帽子怎么被斗篷给压住了?????
恩, 不要慌张, 我们再调整下帽子和斗篷的前后关系就好了.
打开对象结构面板, 大家是不是看到一堆Layer1, Layer2...
我们点击下对象面板的比如Layer1, 就能看到渲染区该图片已经被选中了.
这样我们依次点击就可以找到帽子和斗篷.
是不是觉得这样太繁琐了, 比如下次我们需要修改了, 又得再次找对应的图片.
CocoStudio早就给大家想到了, 双击Layer1, 我们可以给他改个容易记忆的名字.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_5147d5ca442f31e.png)
我们找到帽子和斗篷的节点, 并且重命名为hat, cloak. 选中hat, 点击上图中数字1下的按钮, 将hat上移一位到cloak的上面(也可以用鼠标直接拖动).重新看下渲染区, 是不是大功告成啦!!!
五 构建动画
现在让我们切换到动画模式, 可以看到动作列表面板以及动作帧面板如下图所示.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_99b53a28ae06959.png)
我们今天要学习的是关键帧动画, 所以我们先来看下如何插入第一个关键帧. 我们先来制作牛仔的左臂向前挥出的这一帧.
在上图中, 红圈内带一个倒箭头的黄色线是时间轴的游标, 游标可以在时间轴上方便地拖动, 或者点击时间轴, 游标将跳到点击处.
我们将游标拖动到第10帧, 选中"left arm"这个节点, 并点击"添加帧"按钮. 这时, "left arm"就在第10帧多了一个新的关键帧.
并且我们在渲染区中将"left arm"进行拖动, 旋转等操作到合适的状态.
这个时候, 我们拖动黄色的游标, 就可以看到牛仔的左臂已经流畅地向前挥出了.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_818db97b98f635c.gif)
这个就是关键帧的威力所在, 中间这些帧, 手臂的位置等, 编辑器已经自动帮我们计算好了.
接下来, 我们可以将其他节点在不同的时间帧上插入关键帧. 最终完成这个动画的制作.
这里我们再说一个自动关键帧的概念, 我们将游标放到一个新的位置后, 在渲染区直接改变一个节点的属性(位置, 旋转, 缩放, 透明度等等) 会自动在当前位置插入新的关键帧.
希望这个自动关键帧能帮助大家快速做出关键帧动画来.
六 动作列表
在游戏制作的过程中, 我们经常会遇到一个动画有多种状态的情况. 比如, 我们今天要制作的牛仔, 就会好几套动作.
我们在动作列表面板点击右键, 打开动作管理菜单. 通过这个菜单我们可以重命名, 新建, 复制, 删除动作.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_3f941b86f87d617.png)
下面让我们添加一个新的动画.
大家会发现渲染区变空了, 这时需要大家为各个节点重新指定下渲染需要的资源.
![](http://www.cocoachina.com/bbs/attachment/Fid_48/48_105121_0c2a66954e01bf1.png)
接下来大家按上面的步骤, 就可以给牛仔制作新的动画了.
我们可以为动画重命名一个有意义的名字, 这样既方便制作, 也便于以后程序调用动画.
我们在这里无法将每帧的制作都讲述一遍, 大家可以对照着源代码中的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);
}
好了, 赶快运行一下吧, 你的牛仔开始耍酷了吗?
相关文章推荐
- CocoStudio sample讲解 SampleFrameAnimation序列帧动画
- COCOS2D-X 换肤
- cocos2d-x源码分析-----触摸事件的实现
- iOS和android游戏纹理优化和内存优化(cocos2d-x)
- Cocos2dx中tolua++如何使用自定义类
- cocos2d-x box2d 开发环境
- FNT制作工具 cocos2d-x 使用位图工具BMFont自定义字体FNT
- 一、新的开始 cocos2dx 2.2.2 创建项目
- cocos2d-x JsonBox 读写
- cocos2dx多线程以及线程同步 与 cocos2dx内存管理与多线程问题
- cocos2d-x-3.0beta2环境配置
- vs2012+cocos2d-x 3.0beta2 android 开发环境搭建
- cocos2d-html5学习记录
- Cocosbuilder的一些tips
- cocos2dx-jsb 跨语言调用
- Cocos2dx事件处理机制之按键事件
- libpomelo+cocos2d-x开发环境筹建(windows版)
- cocos2d-x 遇到的错误与解决方法。make: *** No rule to make target `/cygdrive/d/android/cocos2d-x-master/T12/proj.android/../../cocos2dx/xxxxx.cpp'
- 做一个懒COCOS2D-X程序猿(一)停止手打所有cpp文件到android.mk
- SpriteKit学习笔记(六)关于SpriteKit与cocos2d