cocos2d-x帧动画 -- 角色跑动

 

    首先，我们需要准备几张png图，带透明通道的，另外，再准备一张背景图，方便我们做出更带感的游戏动画。我从天天酷跑取下它的角色资源，贴出来供大家下载使用。

上面的12张图就是我们要跑动的角色，我将他们命名为，run01.png~run12.png接下来就看代码实现了。

第一步，我们会想到，需要加载这些图，然后一张张循环显示，并且两张图之间的显示需要有一定的时间间隔。既然是帧动画，那么我们就是用CCSpriteFrame的对象来加载每一帧。

代码看起来是下面这个样子：

[cpp] view plain copy print ?

1. char szFile[64] = ""; 
2. for (int i = 1; i <= 12; i++) 
3. { 
4.     sprintf_s(szFile, "run%02d.png", i); 
5.     CCSpriteFrame* pFrame = CCSpriteFrame::create(szFile, CCRectMake(0, 0, 128, 128)); 
6. } 

char szFile[64] = "";
for (int i = 1; i <= 12; i++)
{
    sprintf_s(szFile, "run%02d.png", i);
    CCSpriteFrame* pFrame = CCSpriteFrame::create(szFile, CCRectMake(0, 0, 128, 128));
}

第二步，想要顺序显示这些帧图，就需要CCAnimation对象来实现，这个类可以使CCSpriteFrame组成的array对象当成序列，由精灵顺序切换这些帧对象，形成动画。那么我们就用一个CCArray来存储这些帧对象。

代码看起来是下面这个样子：

[cpp] view plain copy print ?

1. CCArray *pAniFrame = CCArray::createWithCapacity(12);   // 体积为12的array 
2. char szFile[20] = ""; 
3. for (int i = 1; i <= 12; i++) 
4. { 
5.     sprintf_s(szFile, "run%02d.png", i); 
6.     CCSpriteFrame* pFrame = CCSpriteFrame::create(szFile, CCRectMake(0, 0, 128, 128)); 
7.     pAniFrame->addObject(pFrame);    // 将每一帧放入array 
8. } 
9.  
10. CCAnimation *pAnimation = CCAnimation::createWithSpriteFrames(pAniFrame, 0.05f);   // 0.05f是指经过50毫秒就要切换下一张png图 

CCArray *pAniFrame = CCArray::createWithCapacity(12);    // 体积为12的array
char szFile[20] = "";
for (int i = 1; i <= 12; i++)
{
    sprintf_s(szFile, "run%02d.png", i);
    CCSpriteFrame* pFrame = CCSpriteFrame::create(szFile, CCRectMake(0, 0, 128, 128));
    pAniFrame->addObject(pFrame);    // 将每一帧放入array
}

CCAnimation *pAnimation = CCAnimation::createWithSpriteFrames(pAniFrame, 0.05f);    // 0.05f是指经过50毫秒就要切换下一张png图

上面提到，需要由精灵来切换这些帧对象，因此，我们还需要一个精灵，当然，从显示的角度来讲，我们也同样需要一个精灵。

代码看起来是下面这个样子：

[cpp] view plain copy print ?

1. CCArray *pAniFrame = CCArray::createWithCapacity(12);   // 体积为12的array 
2. char szFile[20] = ""; 
3.  
4. CCSize size = CCDirector::sharedDirector()->getWinSize(); 
5. for (int i = 1; i <= 12; i++) 
6. { 
7.     sprintf_s(szFile, "run%02d.png", i); 
8.     CCSpriteFrame* pFrame = CCSpriteFrame::create(szFile, CCRectMake(0, 0, 128, 128)); 
9.     if (i == 1)    // 添加第一张图到精灵就可以了 
10.     { 
11.         pSprite = CCSprite::createWithSpriteFrame(pFrame); 
12.         pSprite->setPosition(ccp(pSprite->getContentSize().width, size.height / 2)); 
13.         this->addChild(pSprite, 1); 
14.     } 
15.     pAniFrame->addObject(pFrame);    // 将每一帧放入array 
16. } 
17. CCAnimation *pAnimation = CCAnimation::createWithSpriteFrames(pAniFrame, 0.05f);   // 0.05f是指经过50毫秒就要切换下一张png图 

CCArray *pAniFrame = CCArray::createWithCapacity(12);    // 体积为12的array
char szFile[20] = "";

CCSize size = CCDirector::sharedDirector()->getWinSize();
for (int i = 1; i <= 12; i++)
{
    sprintf_s(szFile, "run%02d.png", i);
    CCSpriteFrame* pFrame = CCSpriteFrame::create(szFile, CCRectMake(0, 0, 128, 128));
    if (i == 1)    // 添加第一张图到精灵就可以了
    {
        pSprite = CCSprite::createWithSpriteFrame(pFrame);
        pSprite->setPosition(ccp(pSprite->getContentSize().width, size.height / 2));
        this->addChild(pSprite, 1);
    }
    pAniFrame->addObject(pFrame);    // 将每一帧放入array
}
CCAnimation *pAnimation = CCAnimation::createWithSpriteFrames(pAniFrame, 0.05f);    // 0.05f是指经过50毫秒就要切换下一张png图

第三步，我们需要播放这个动画，这里我们要让这个角色永远的跑下去，所以我们使用CCRepeatForever，这个类需要CCActionInterval的对象作为参数来执行，也就是延迟动画对象。有哪些CCActionInterval类可以在这里使用呢？我们并没有多余的花俏动作，我们直接选取CCSequence。

代码看起来是下面这个样子：

[cpp] view plain copy print ?

1. CCArray *pAniFrame = CCArray::createWithCapacity(12);   // 体积为12的array 
2. CCSprite *pSprite = NULL; 
3. char szFile[20] = ""; 
4. CCSize size = CCDirector::sharedDirector()->getWinSize(); 
5. for (int i = 1; i <= 12; i++) 
6. { 
7.     sprintf_s(szFile, "run%02d.png", i); 
8.     CCSpriteFrame* pFrame = CCSpriteFrame::create(szFile, CCRectMake(0, 0, 128, 128)); 
9.     if (i == 1)    // 添加第一张图到精灵就可以了 
10.     { 
11.         pSprite = CCSprite::createWithSpriteFrame(pFrame); 
12.         pSprite->setPosition(ccp(pSprite->getContentSize().width, size.height / 2)); 
13.         this->addChild(pSprite, 1); 
14.     } 
15.     pAniFrame->addObject(pFrame);    // 将每一帧放入array 
16. } 
17. CCAnimation *pAnimation = CCAnimation::createWithSpriteFrames(pAniFrame, 0.05f);   // 0.05f是指经过50毫秒就要切换下一张png图 
18. CCAnimate* pAnimate = CCAnimate::create(pAnimation); 
19. CCActionInterval* seq = (CCActionInterval *)(CCSequence::create(pAnimate, NULL));   // 创建顺序执行action 
20. pSprite->runAction(CCRepeatForever::create(seq)); 

CCArray *pAniFrame = CCArray::createWithCapacity(12);    // 体积为12的array
CCSprite *pSprite = NULL;
char szFile[20] = "";
CCSize size = CCDirector::sharedDirector()->getWinSize();
for (int i = 1; i <= 12; i++)
{
    sprintf_s(szFile, "run%02d.png", i);
    CCSpriteFrame* pFrame = CCSpriteFrame::create(szFile, CCRectMake(0, 0, 128, 128));
    if (i == 1)    // 添加第一张图到精灵就可以了
    {
        pSprite = CCSprite::createWithSpriteFrame(pFrame);
        pSprite->setPosition(ccp(pSprite->getContentSize().width, size.height / 2));
        this->addChild(pSprite, 1);
    }
    pAniFrame->addObject(pFrame);    // 将每一帧放入array
}
CCAnimation *pAnimation = CCAnimation::createWithSpriteFrames(pAniFrame, 0.05f);    // 0.05f是指经过50毫秒就要切换下一张png图
CCAnimate* pAnimate = CCAnimate::create(pAnimation);
CCActionInterval* seq = (CCActionInterval *)(CCSequence::create(pAnimate, NULL));    // 创建顺序执行action
pSprite->runAction(CCRepeatForever::create(seq));

好了，就这样我们就完成角色的跑动了，自己加一张漂亮的背景图，就可以看到一个很漂亮的游戏角色在疯狂的奔跑了。就像我下面这个一样