今天學了一下cocos2d-x的幀動畫，在這里記錄一下，如果有什么錯誤的地方還請大家指出，我及時改正。在這里我創建了一個SpriterLayer的類，他是繼承自CClayer的，在這里我先把頭文件的定義貼出來：

1 #ifndef SPRITER_LAYER_H 2 #define SPRITER_LAYER_H 3 4 #include "cocos2d.h" 5 6 USING_NS_CC; 7 8 class SpriterLayer : public CCLayer 9 { 10 public: 11 virtual ~SpriterLayer(); 12 virtual bool init(); 13 CREATE_FUNC(SpriterLayer); 14 15 static CCScene *createScene(); 16 17 CCSize size; 18 19 void initSpriteOne(); 20 void initSpriteTwo(); 21 void initSpriteThree(); 22 void initSpriteFourth(); 23 24 void animationEnd(); 25 26 void ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent); 27 void update(float delta); 28 29 CCPoint location; 30 }; 31 32 #endif

在這里我們提供了一個靜態函數用來創建一個場景，然后定義了四個精靈幀動畫，順便也學習一下android的動畫，之后還定義了一個動畫結束之后的回調函數，接著我們重新實現了它的ccTouchesBegan函數以此來接收觸摸事件，接著我們實現了update函數用來更新精靈的位置，從而實現行走動作，最后定義了一個CCPoint的對象，用來實現觸目位置的記錄。

接著我把其實現文件貼出來，代碼如下：

1 #include "SpriterLayer.h" 2 3 SpriterLayer::~SpriterLayer() 4 { 5 6 } 7 8 bool SpriterLayer::init() 9 { 10 if(!CCLayer::init()) 11 return false; 12 13 location.x = 30; 14 location.y = 100; 15 size = CCDirector::sharedDirector()->getWinSize(); 16 17 CCLayerColor *colorLayer = CCLayerColor::create(ccc4(150, 150, 150, 230),size.width,size.height); 18 addChild(colorLayer); 19 20 CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("role.plist"); 21 22 initSpriteOne(); 23 24 initSpriteTwo(); 25 26 initSpriteThree(); 27 28 initSpriteFourth(); 29 30 31 setTouchEnabled(true); 32 33 scheduleUpdate(); 34 35 36 return true; 37 } 38 39 CCScene *SpriterLayer::createScene() 40 { 41 CCScene *scene = NULL; 42 43 scene = CCScene::create(); 44 45 SpriterLayer *layer= SpriterLayer::create(); 46 47 scene->addChild(layer); 48 49 50 return scene; 51 } 52 53 void SpriterLayer::initSpriteOne() 54 { 55 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_ZRun1.png"); 56 addChild(sprite); 57 sprite->setPosition(ccp(100,size.height/2)); 58 59 CCArray *frameArray = CCArray::create(); 60 frameArray->retain(); 61 62 for (int i=1;i<7;i++) 63 { 64 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_ZRun%d.png",i)->getCString()); 65 frameArray->addObject(frame); 66 } 67 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f); 68 69 CCAnimate *animate = CCAnimate::create(animation); 70 CCAction *action = CCRepeatForever::create(animate); 71 72 sprite->runAction(action); 73 } 74 75 void SpriterLayer::initSpriteTwo() 76 { 77 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zhici1.png"); 78 addChild(sprite); 79 sprite->setPosition(ccp(300,size.height/2)); 80 81 CCArray *frameArray = CCArray::create(); 82 frameArray->retain(); 83 84 for (int i=1;i<9;i++) 85 { 86 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zhici%d.png",i)->getCString()); 87 frameArray->addObject(frame); 88 } 89 90 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f); 91 CCAnimate *animate = CCAnimate::create(animation); 92 93 //CCAction *action = CCSequence::create(CCSpawn::create(animate,CCMoveTo::create(2.0f,ccp(700,100)),NULL),NULL); 94 95 CCAction *action = CCSequence::create(animate,CCCallFunc::create(this,callfunc_selector(SpriterLayer::animationEnd)),NULL); 96 97 sprite->runAction(action); 98 99 } 100 101 void SpriterLayer::initSpriteThree() 102 { 103 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zhn1.png"); 104 addChild(sprite); 105 sprite->setPosition(ccp(500,size.height/2)); 106 107 CCArray *frameArray = CCArray::create(); 108 frameArray->retain(); 109 110 for (int i=1;i<17;i++) 111 { 112 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zhn%d.png",i)->getCString()); 113 frameArray->addObject(frame); 114 } 115 116 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f); 117 CCAnimate *animate = CCAnimate::create(animation); 118 119 CCAction *action = CCRepeatForever::create(animate); 120 121 sprite->runAction(action); 122 123 } 124 125 126 void SpriterLayer::initSpriteFourth() 127 { 128 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zwlak1.png"); 129 addChild(sprite,0,1); 130 131 sprite->setPosition(ccp(30,100)); 132 133 CCArray *frameArray = CCArray::create(); 134 frameArray->retain(); 135 136 for (int i=1;i<7;i++) 137 { 138 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zwlak%d.png",i)->getCString()); 139 frameArray->addObject(frame); 140 } 141 142 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f); 143 animation->setRestoreOriginalFrame(true); //動畫完成之后還原為第一幀 144 CCAnimate *animate = CCAnimate::create(animation); 145 146 CCAction *action = CCRepeatForever::create(animate); 147 148 sprite->runAction(action); 149 } 150 151 void SpriterLayer::animationEnd() 152 { 153 CCLog("animation finish"); 154 } 155 156 void SpriterLayer::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent) 157 { 158 CCTouch *touch = (CCTouch *)( pTouches->anyObject()); 159 160 #ifdef DEBUG 161 CCPoint point = touch->getLocation(); 162 CCLog("location x=%2.2f\t y=%2.2f\n",point.x,point.y); 163 164 CCPoint viewPoint = touch->getLocationInView(); 165 CCLog("viewLocation x=%2.2f\t y=%2.2f\n",viewPoint.x,viewPoint.y); 166 #endif 167 168 location = touch->getLocationInView(); 169 170 } 171 172 void SpriterLayer::update(float delta) 173 { 174 CCSprite *sprite = (CCSprite *)this->getChildByTag(1); 175 176 if (sprite!=NULL) 177 { 178 if(sprite->getPositionX()>location.x) 179 { 180 sprite->setScaleX(-1); 181 } 182 else 183 { 184 sprite->setScaleX(1); 185 } 186 187 sprite->setPosition(ccp(location.x,100)); 188 } 189 }

接下來從init函數一步一步往下看：

實現我們調用了父對象的init方法，接著我們在添加了一個CCLayerColor層，這個主要是一個背景色，不然背景是黑色的不太好看。接著我們調用

1 CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("role.plist");

這行代碼是把我們所需要的資源添加到緩沖池里，這個plist文件是用TexturPackerGUI生成的，具體的大家google一下吧。

接著我們初始化調用initSpriteOne函數初始化我們的第一個精靈，代碼如下：

1 void SpriterLayer::initSpriteOne() 2 { 3 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_ZRun1.png"); 4 addChild(sprite); 5 sprite->setPosition(ccp(100,size.height/2)); 6 7 CCArray *frameArray = CCArray::create(); 8 frameArray->retain(); 9 10 for (int i=1;i<7;i++) 11 { 12 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_ZRun%d.png",i)->getCString()); 13 frameArray->addObject(frame); 14 } 15 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f); 16 17 CCAnimate *animate = CCAnimate::create(animation); 18 CCAction *action = CCRepeatForever::create(animate); 19 20 sprite->runAction(action); 21 }

我們首先創建出一個精靈對象，這個地方的圖像資源是從我們剛剛加入的緩沖池里取出的。接著我們創建了一個CCArray的數組用來存放我們的frame對象。接著我們通過一個循環把fram對象從緩沖池取出來加入到我們剛剛創建的數組，取出我們所需的frame之后我們就可以開始創建我們的動畫了:

1 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);

根據我們取出的序列幀創建一個動畫，動畫的間隔時間設置為0.1f,接著我們創建CCAnimate對象，創建完成之后調用下面的代碼創建action

1 CCAction *action = CCRepeatForever::create(animate);

在這里我們創建了一個重復動畫，看這個方法的名字我們就知道這個動畫是一只在循環的，接著我們就可以為精靈執行我們的動畫了

1 sprite->runAction(action);

不知道在window下怎么生成gif，效果大家自己編譯出來看吧?

接著我們看看第二個精靈動畫,代碼如下：

1 void SpriterLayer::initSpriteTwo() 2 { 3 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zhici1.png"); 4 addChild(sprite); 5 sprite->setPosition(ccp(300,size.height/2)); 6 7 CCArray *frameArray = CCArray::create(); 8 frameArray->retain(); 9 10 for (int i=1;i<9;i++) 11 { 12 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zhici%d.png",i)->getCString()); 13 frameArray->addObject(frame); 14 } 15 16 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f); 17 CCAnimate *animate = CCAnimate::create(animation); 18 19 CCAction *action = CCSequence::create(animate,CCCallFunc::create(this,callfunc_selector(SpriterLayer::animationEnd)),NULL); 20 21 sprite->runAction(action); 22 23 }

這個精靈的大部分代碼和第一個精靈的是相同的，唯一不同的是這個幀動畫只會執行一次，執行完成動畫之后會調用animationEnd函數。

第三個精靈和第一個是一樣的就不看了，我們看看碟四個精靈，看看我們如何實現行走：

1 void SpriterLayer::initSpriteFourth() 2 { 3 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zwlak1.png"); 4 addChild(sprite,0,1); 5 6 sprite->setPosition(ccp(30,100)); 7 8 CCArray *frameArray = CCArray::create(); 9 frameArray->retain(); 10 11 for (int i=1;i<7;i++) 12 { 13 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zwlak%d.png",i)->getCString()); 14 frameArray->addObject(frame); 15 } 16 17 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f); 18 animation->setRestoreOriginalFrame(true); //動畫完成之后還原為第一幀 19 CCAnimate *animate = CCAnimate::create(animation); 20 21 CCAction *action = CCRepeatForever::create(animate); 22 23 sprite->runAction(action); 24 }

這個動畫其實和第一個是一樣的，我們要重寫CCLayer的ccTouchesBegan函數獲取當前觸摸的坐標，接著我們看看ccTouchesBegan函數的實現：

1 void SpriterLayer::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent) 2 { 3 CCTouch *touch = (CCTouch *)( pTouches->anyObject()); 4 5 #ifdef DEBUG 6 CCPoint point = touch->getLocation(); 7 CCLog("location x=%2.2f\t y=%2.2f\n",point.x,point.y); 8 9 CCPoint viewPoint = touch->getLocationInView(); 10 CCLog("viewLocation x=%2.2f\t y=%2.2f\n",viewPoint.x,viewPoint.y); 11 #endif 12 13 location = touch->getLocationInView(); 14 15 }

在這里我們看到有個debug信息，我們看到有兩個函數：getLocation和getLocationInView，這兩個函數是用來轉換我們所取坐標的，一個取得的是opengl的坐標，另外一個則是cocos2d的坐標，在這里我們要使用的是cocos2d的坐標，所以把該坐標值賦值給location。

接著我們在update函數中實現對第四個精靈對象的移動，updae函數如下：

1 void SpriterLayer::update(float delta) 2 { 3 CCSprite *sprite = (CCSprite *)this->getChildByTag(1); 4 5 if (sprite!=NULL) 6 { 7 if(sprite->getPositionX()>location.x) 8 { 9 sprite->setScaleX(-1); 10 } 11 else 12 { 13 sprite->setScaleX(1); 14 } 15 16 sprite->setPosition(ccp(location.x,100)); 17 } 18 }

這樣我們就實現了對精靈位置的移動，看上去就是行走狀態了。

聲明：該代碼所使用的圖片來源于網絡

?

?

?

轉載于:https://www.cnblogs.com/jjxxjnzy/p/3673121.html

總結

以上是生活随笔為你收集整理的cocos2d-x 帧动画学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。