Cocos2d-x-->CCSprite 动画

帧动画是我们见得最多的,

电视、

电影等,

如果印象深刻的话,

小时候的那种老款照相机的

胶卷

...

大小相同的一张一张的底片

....

哈哈!其实如果对游戏要求不高,游戏的图片也不多,

咋们就可以采用这种方式来制作动画,不过好游戏一般都不是这样做的

....

那是什么呢?

...

动作编辑器,先讲讲最基础的制作动画方式(其实利用动作编辑器,其实也是切割图片

,

果还没有接触过动作编辑器的,可以学着用下

SpriteX

...

好了,就此开始吧!

 

1

、先用

texturePacker

制作我们的素材

 

找一组动画图片,我直接

test

里面那个大叔的一组图片

... 

由于用直接用

test

里面的图片有点问题,所以我直接把组图,用

ps

切出每帧然后导出,然

后用

texturePacker

打包,导出

role.plist

role.png 

2

、上传代码:

...

老样子(我没有新建工程,直接用的原来的工程)

 

红色框出来的就是我基于上讲工程新添加的文件:

(因为我特别怕乱,所以单独创建和场景

和层)

 

ActionScene.h

 

#pragma once 

#include "cocos2d.h" 

using namespace cocos2d; 

class ActionScene :public CCScene 

public: 

 

 

 

 

ActionScene(void); 

 

 

 

 

~ActionScene(void); 

 

 

 

 

static CCScene* scene(); 

}; 

 

ActionScen.cpp 

#include "ActionScene.h" 

#include "ActionLayer.h" 

 

ActionScene::ActionScene(void)

 

ActionScene::~ActionScene(void) 

 

CCScene* ActionScene::scene() 

 

CCScene* scene=CCScene::create();  

CCLayer* layer=ActionLayer::layer(0); 

scene->addChild(layer); 

scene->scheduleUpdate(); 

return scene; 


ActionLayer.h 

#pragma once 

#include "cocos2d.h" 

using namespace cocos2d; 

enum 


ACTION_ANIMA

TION_LAYER=0 

}; 

class ActionLayer :public CCLayer

 

public:  

ActionLayer(void); 

~ActionLayer(void); 

  

static CCLayer* layer(int id); 

protected: 

  

CCSprite* grossini; 

}; 

ActionLayer.cpp 

#include "ActionLayer.h" 

#include "ActionAnimationLayer.h" 

ActionLayer::ActionLayer(void)

 

 

ActionLayer::~ActionLayer(void)

 

CCLayer* ActionLayer::layer(int id)

 

 

CCLayer* pLayer=NULL;  

switch(id)  

 

case ACTION_ANIMA

TION_LAYER: 

 pLayer=new ActionAnimationLayer();  

break; 

 

 return pLayer; 

ActionAnimationLayer.h 

#pragma once 

#include "actionlayer.h" 

class ActionAnimationLayer :public ActionLayer

 

 

public:  

ActionAnimationLayer(void); 

 ~ActionAnimationLayer(void); 

 virtual void onEnter(); 

 void frameAnimation(CCSpriteFrameCache *cache); 

 void jumpAnimation(); 

 void fadeAnimation(); 

 void sequenceAnimation(CCSize s); 

 void followAnimation(CCSize s); 

}; 

 

 

ActionAnimationLayer.cpp 

#include "ActionAnimationLayer.h" 

ActionAnimationLayer::ActionAnimationLayer(void) 

ActionAnimationLayer::~ActionAnimationLayer(void)

 

void ActionAnimationLayer::onEnter() 

 //

【注意

:

】此句话千万不要漏了,漏了是不会有动画效果的,底层包含了动画的刷新,

 

 //

我就是这个地方啊!搞得我多搞了几个小时,还好这个工程熟悉了一下底层的代码

  

CCLayer::onEnter();  

CCSize s=CCDirector::sharedDirector()->getWinSize(); 

 CCSpriteFrameCache *cache=CCSpriteFrameCache::sharedSpriteFrameCache(); 

 cache->addSpriteFramesWithFile("role.plist","role.png");

 grossini=CCSprite::spriteWithSpriteFrameName("role2.png"); 

 grossini->setPosition(ccp(s.width/2,s.height/2)); 

 this->addChild(grossini); 

 //播放帧动画

 this->frameAnimation(cache); 

//播放跳动画

 this->jumpAnimation(); 

 //浅入浅出

 this->fadeAnimation(); 

 //组动画:

move+rotate 

 //this->sequenceAnimation(s); 



//拉屏幕效果

 this->followAnimation(s); 

 

void ActionAnimationLayer::frameAnimation(CCSpriteFrameCache *cache) 

 //第一种方式:

 CCAnimation* animation = CCAnimation::create(); 

 for( int i=1;i<5;i++) 

 

 

char szName[100] = {0}; 

 

sprintf(szName, "role%1d.png", i); 

 animation->addSpriteFrameWithFileName(szName); 

animation->addSpriteFrame(cache->spriteFrameByName(szName)); 


 

// 

每针停留2.8/14f

animation->setDelayPerUnit(2.8f / 14.0f); 

//设置恢复初始针

animation->setRestoreOriginalFrame(true); 

//设置循环次数

animation->setLoops(4); 

//创建动画

CCAnimate* action = CCAnimate::create(animation);

//运行动画

grossini->runAction(CCSequence::create(action, action->reverse(), NULL)); 

//第二种方式:

/*CCArray* animFrames=CCArray::create(4); 

char str[100]={0}; 

for(int i=1;i<5;i++)  

 

sprintf(str, "role%1d.png", i);  

CCSpriteFrame* frame=cache2->spriteFrameByName(str);  

animFrames->addObject(frame);  

 

CCAnimation* animation = CCAnimation::create(animFrames,0.3f);  

grossini->runAction(CCRepeatForever::create(CCAnimate::create(animation)));*/ 

 

void ActionAnimationLayer::jumpAnimation() 

//参数说明:时间秒,移动点,高度,步数

CCActionInterval*  

actionTo = CCJumpTo::create(2, CCPointMake(300,300), 50, 4); 

CCActionInterval* 

actionBy = CCJumpBy::create(2, CCPointMake(300,0), 50, 4); 

CCActionInterval* actionByBack = actionBy->reverse();

//让动作回到actionBy之前的地方

grossini->runAction( actionTo); 

grossini->runAction( CCSequence::create(actionBy, actionByBack, NULL)); 

void ActionAnimationLayer::fadeAnimation() 

grossini->setOpacity(0);

//设置透明度0为完全透明,1不透明

CCActionInterval*  action1 = CCFadeIn::create(1.0f); 

CCActionInterval* action1Back = action1->reverse();//

同上 

grossini->runAction( CCSequence::create( action1, action1Back, NULL)); 

void ActionAnimationLayer::sequenceAnimation(CCSize s) 

 

grossini->setPosition(ccp(60, s.height/2)); 

//移动到(240,0)然后旋转540

CCFiniteTimeAction* action = CCSequence::create( 

CCMoveBy::create( 2, CCPointMake(240,0)), 

CCRotateBy::create(( 2, 540), NULL);  

grossini->runAction(action); 

 

void ActionAnimationLayer::followAnimation(CCSize s) 


//这个效果我喜欢,以后游戏中可以用到... 

grossini->setPosition(CCPointMake(-200, s.height / 2));  

CCActionInterval* move= CCMoveBy::create(2, CCPointMake(s.width * 3, 0));  

CCActionInterval* move_back = move->reverse(); 

CCFiniteTimeAction* seq = CCSequence::create(move, move_back, NULL);//来回移动


CCAction* rep = CCRepeatForever::create((CCActionInterval*)seq);//设置成永远循环

grossini->runAction(rep); 

this->runAction(CCFollow::create(grossini, CCRectMake(0, 0, s.width * 2 100, s.height)));//设定一个拉动层区域动画

 

帧动画,跳动画,组合动画,浅入浅出动画,拉屏幕动画,对于这些了解了,然后如果还有其他需求,相对就简单很多了。

 

posted on 2013-10-17 10:39  云编程的梦  阅读(295)  评论(0编辑  收藏  举报

导航