cocos2d-x for android：CCSprite 精靈動畫

記得以前學習XNA游戲開發的時候，操作精靈角色的攻擊或者行走動作都是給出特定的幾張序列圖或者一張長序列圖然后通過切割來作一幀一幀的切片動畫播放。 

開始 

關於精靈sprite我從網上摘錄了一段話如下

說白一點，精靈就是將圖形資源加載到內存中，並根據游戲需要將其顯示到屏幕中的工具，游戲中大到背景、UI，小到NPC、道具，只要是用圖片展示的，都是精靈或它的子類。從技術上講，精靈是一個可以不斷變化的圖片，這些變化包括：位置移動、旋轉、縮放、換幀（就是像動畫片一樣播放幾張連續的圖片，每幀換一張，形成一個動畫效果）

 在cocos2d-x 中精靈的關系如下圖

 

該圖來源於：http://www.xuanyusong.com/archives/1370 更多的相關知識可以來這里參考。

 

精靈多張序列圖動畫示例

精靈序列圖來源自：http://www.cnblogs.com/nowpaper/archive/2012/10/22/2733389.html ，使用他的三國兵種素材。用到的素材如下

 

圖片命名也是根據nowpaper的示例命名，動畫示例代碼如下：

CCSize s = CCDirector::sharedDirector()->getWinSize();  //獲取界面大小
    CCArray *aniframe=CCArray::createWithCapacity( 4);   //創建長度為4的集合
    CCSprite *sprite;//精靈
     char str[ 20];
     for( int i= 0;i< 4;i++){
        
        sprintf(str, " attack/A1_%d.png ",i);  //通過下標動態創建精靈
        CCSpriteFrame *frame =CCSpriteFrame::create(str,CCRectMake( 0, 0, 64, 64));
         if(i== 0){//默認添加第一幀圖到界面上
            sprite =CCSprite::createWithSpriteFrame(frame);
            sprite->setPosition(ccp(sprite->getContentSize().width,s.height/ 2));
            addChild(sprite);
        }
        aniframe->addObject(frame);//將每一幀精靈動畫添加到集合里面
    }
    CCAnimation *animation=CCAnimation::createWithSpriteFrames(aniframe, 0.2f);//通過集合創建動畫
        CCAnimate *animate=CCAnimate::create(animation);
        CCActionInterval* seq=(CCActionInterval*)(CCSequence::create(animate,
            CCFlipX::create( true),
            animate->copy()->autorelease(),
            CCFlipX::create( false),
            NULL
        ));

        sprite->runAction(CCRepeatForever::create(seq));//執行動畫

 

精靈單張序列圖動畫示例

圖片如下

 

上圖序列圖是一張序列圖，可以看出分為橫、豎各4個精靈動畫幀，依次分割可以這么分

0-0,0-1,0-2,0-3 

1-0,1-1,1-2,1-3

2-0,2-1,2-2,2-3

3-0,3-1,3-2,3-3

分割分部代碼為

CCTexture2D *texture=CCTextureCache::sharedTextureCache()->addImage( " split.png ");
    CCArray *splitAniframe=CCArray::createWithCapacity( 16);
    CCSprite *splitSprite ;
     for( int i= 0;i< 4;i++){
         for( int j= 0;j< 4;j++)
            {
                 CCSpriteFrame *frame =CCSpriteFrame::createWithTexture(texture,CCRectMake( 32*j, 48*i, 32, 48));
                  if(i== 0){
                     splitSprite= CCSprite::createWithSpriteFrame(frame);
                     splitSprite->setPosition(ccp(s.width/ 2,s.height/ 2));
                     addChild(splitSprite);
                 }
                 splitAniframe->addObject(frame);
            }
    }
    CCAnimation *splitAnimation=CCAnimation::createWithSpriteFrames(splitAniframe, 1.0f);
        CCAnimate *splitAnimate=CCAnimate::create(splitAnimation);
        splitSprite->runAction(CCRepeatForever::create(splitAnimate));

 

使用plist的單張序列圖的動畫 

以上兩種稍微復雜，cocos2d-x還可以使用一個叫TexturePackerGUI的工具，可以將多張序列圖生成一個png的集合圖和一個*.plist的文件，工具下載地址：TexturePackGUI

這個工具的使用，網上有很多教的，使用也方便多摸索下就可以了，使用該工具生成后的文件如下：

 

之后你就可以將它放入內存中操縱了，可能你會發現生成后的圖片比之前的幾張序列圖要小好多，所以為了更快的游戲程序建議多使用該工具，動畫代碼如下：

CCSpriteFrameCache* cache =CCSpriteFrameCache::sharedSpriteFrameCache();
    cache->addSpriteFramesWithFile( " attack.plist ");
    CCSprite *plistSprite=CCSprite::createWithSpriteFrameName( " A1_0.png ");
    plistSprite->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width-plistSprite->getContentSize().width,CCDirector::sharedDirector()->getWinSize().height/ 2));
    CCSpriteBatchNode* spritebatch =CCSpriteBatchNode::create( " attack.png ");
    spritebatch->addChild(plistSprite);
    addChild(spritebatch);

    CCArray* plistArray=CCArray::createWithCapacity( 4);
     char name[ 20];
     for( int i= 0;i< 4;i++){
        sprintf(name, " A1_%d.png ",i);
        CCSpriteFrame* frame =cache->spriteFrameByName(name);
        plistArray->addObject(frame);
    }
    
    CCAnimation *plitAnimation=CCAnimation::createWithSpriteFrames(plistArray, 0.2f);
        CCAnimate *plitAnimate=CCAnimate::create(plitAnimation);
        CCActionInterval* plitSeq=(CCActionInterval*)(CCSequence::create(plitAnimate,
            CCFlipX::create( true),
            plitAnimate->copy()->autorelease(),
            CCFlipX::create( false),
            NULL
        ));

        plistSprite->runAction(CCRepeatForever::create(plitSeq));

 

好啦，來看看最后的效果圖

 

 

源碼下載：https://github.com/terryyhl/SpriteAnimation.git 

好運。