CocoStuido sample----SampleFrameAnimation源代码地址
https://github.com/chukong/CocoStudioSamples
大家可以预先下载这个源代码, 等下要用到里面的图片资源哦
动画是游戏中的重要组成部分. 序列帧动画是在时间轴上逐帧绘制不同的内容, 使其连续播放形成动画. 由于是逐帧显示, 所以具有极大的灵活性, 几乎可以表现任何想表现的内容. 序列帧动画以其灵活性, 简单性在游戏动画中占有重要的地位.
一 目标
在本教程里, 我们将学习在CocoStudio中快速制作序列帧动画, 并在cocos2d-x中运行.
我们使用的cocos2d-x的版本是2.2.2, CocoStudio的版本是1.2.0.1. 不同的版本, 功能上会有差异, 大家学习时, 最好采用对应的版本.
二 创建项目并导入资源
在上面的图中, 可以看到我们已经做了几条活灵活现的等待捕捞的各种鱼... 以及几只憨头憨脑的�*****9辍� 让我们就用这几只�*****9曜隼永囱跋滦蛄兄《闹谱靼桑�
你可以在下载到的源代码的SampleFrameAnimation/Resources目录中找到fish040.plist, fish040.png, 这两个文件就是�*****9甑淖试次募�.
用CocoStudio创建动画项目以及导入资源的步骤咱们这里不再赘述, 请参见本系列前面几篇教程.导入后的资源面板如下.
从上图我们可以看到CocoStudio对打包后的图片文件支持非常好, 可以直接预览plist中的小图, 当然未打包的图更支持啦.
三 第一张图片
在动画编辑器的形体模式下, 我们将�*****9甑牡谝徽磐计�, "actor_fish_haigui_normal_001.png"拖拽到渲染区去.
注意哦, 动画编辑器是有形体模式和动画模式两种, 我们只能在形体模式下拖拽图片到渲染区. 点击一下, 形体模式和动画模式可以互相切换.
四 动起来
现在让我们切换到动画模式, 可以看到动画帧面板有一个Layer1的节点, 这个就是�*****9甑慕诘懔�. 在资源面板中选择�*****9阷list中的002-015的资源, 并拖拽到Layer1节点.
之后可以看到, 编辑器自动帮我们生成了一系列的关键帧.
好, 现在可以点击下动画帧面板中的播放按钮了. 怎么样? 是不是看到憨头憨脑的�*****9昕旎畹赜味似鹄戳�.
这个游戏中还带了其他, 比如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类的声明和实现.
声明:
我们还是用�*****9曜隼�, 其他鱼类读取都是一样的. �*****9暌悠聊坏纳戏接稳肫聊�, 然后从下方游出屏幕. 我们来看下其代码实现.
声明:
实现:
这样我们就完成了, �*****9甑睦嘁约捌涓咐�. 其他小鱼的类, 大家可以参见Fishes.h和Fishes.cpp. 如果有问题, 欢迎大家来留言讨论.
八 代码调用的核心
看到这里想必大家对如何在cocos2d-x中调用CocoStudio生成的动画文件了然于胸了吧, 是的, 其实其主要代码就下面几行, 也可以看出序列帧动画的调用也是非常方便, 快捷的, 非常便于理解的.
好了, 大家的代码都写好了吧, 赶快运行一下, 让小鱼们快乐地游起来吧!
https://github.com/chukong/CocoStudioSamples
大家可以预先下载这个源代码, 等下要用到里面的图片资源哦
动画是游戏中的重要组成部分. 序列帧动画是在时间轴上逐帧绘制不同的内容, 使其连续播放形成动画. 由于是逐帧显示, 所以具有极大的灵活性, 几乎可以表现任何想表现的内容. 序列帧动画以其灵活性, 简单性在游戏动画中占有重要的地位.
一 目标
在本教程里, 我们将学习在CocoStudio中快速制作序列帧动画, 并在cocos2d-x中运行.
我们使用的cocos2d-x的版本是2.2.2, CocoStudio的版本是1.2.0.1. 不同的版本, 功能上会有差异, 大家学习时, 最好采用对应的版本.
二 创建项目并导入资源
在上面的图中, 可以看到我们已经做了几条活灵活现的等待捕捞的各种鱼... 以及几只憨头憨脑的�*****9辍� 让我们就用这几只�*****9曜隼永囱跋滦蛄兄《闹谱靼桑�
你可以在下载到的源代码的SampleFrameAnimation/Resources目录中找到fish040.plist, fish040.png, 这两个文件就是�*****9甑淖试次募�.
用CocoStudio创建动画项目以及导入资源的步骤咱们这里不再赘述, 请参见本系列前面几篇教程.导入后的资源面板如下.
从上图我们可以看到CocoStudio对打包后的图片文件支持非常好, 可以直接预览plist中的小图, 当然未打包的图更支持啦.
三 第一张图片
在动画编辑器的形体模式下, 我们将�*****9甑牡谝徽磐计�, "actor_fish_haigui_normal_001.png"拖拽到渲染区去.
注意哦, 动画编辑器是有形体模式和动画模式两种, 我们只能在形体模式下拖拽图片到渲染区. 点击一下, 形体模式和动画模式可以互相切换.
四 动起来
现在让我们切换到动画模式, 可以看到动画帧面板有一个Layer1的节点, 这个就是�*****9甑慕诘懔�. 在资源面板中选择�*****9阷list中的002-015的资源, 并拖拽到Layer1节点.
之后可以看到, 编辑器自动帮我们生成了一系列的关键帧.
好, 现在可以点击下动画帧面板中的播放按钮了. 怎么样? 是不是看到憨头憨脑的�*****9昕旎畹赜味似鹄戳�.
这个游戏中还带了其他, 比如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();
}
我们还是用�*****9曜隼�, 其他鱼类读取都是一样的. �*****9暌悠聊坏纳戏接稳肫聊�, 然后从下方游出屏幕. 我们来看下其代码实现.
声明:
class Fish04 : public Fishes //从上面提到的Fishes类派生
{
public :
virtual void onEnter(); //覆盖父类的onEnter方法
private :
void callback(); //游出屏幕下方后回调
cocos2d::extension:: CCArmature * armature; //保存�*****9甑亩韵�
};
实现:
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方法让�*****9昊氐狡鹗嘉恢�
CCSequence * seq = CCSequence ::create(actionToUp,CCCallFunc ::create( this, callfunc_selector( Fish04 ::callback)),NULL );
//加载�*****9甑汲龅娜鑫募�
CCArmatureDataManager ::sharedArmatureDataManager()->addArmatureFileInfo( "fish040.png", "fish040.plist" ,"fish04.ExportJson" );
//创建�*****9甓韵�
armature = CCArmature ::create("fish04" );
armature->setRotation(-90);
//调用�*****9甑亩�
armature->getAnimation()->playWithIndex(0);
//将�*****9甓韵笊柚玫匠跏嘉恢�
armature->setPosition( ccp (0.3 * size.width,1.5*size.height));
armature->runAction( CCRepeatForever ::create(seq));
//添加到父节点
addChild(armature);
}
void Fish04 ::callback()
{ //将�*****9甓韵笊柚玫匠跏嘉恢�
armature->setPosition( ccp (0.3 * size.width,1.5*size.height));
}
这样我们就完成了, �*****9甑睦嘁约捌涓咐�. 其他小鱼的类, 大家可以参见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);
好了, 大家的代码都写好了吧, 赶快运行一下, 让小鱼们快乐地游起来吧!