今回は、画像をアニメーションさせる方法を紹介します。
ゲームでオブジェクトが動くかどうかでは見映えも変わってきますので、ぜひ覚えておいてください。

準備

アニメーションで利用する画像を先に準備をします。
今回は、アニメーション用の画像をプロパティリストにまとめています。これを一つずつ取り出して利用します。

今回用意した画像

アニメーションの画像を配列に入れる

まずはプロパティリストから、アニメーションで利用する画像を配列に入れていきます。
これを後で順番に呼び出します。

//cocos2dx3.x
auto cache = CCSpriteFrameCache::getInstance();
cache->addSpriteFramesWithFile("anime.plist");

//CCAnimationの初期化
auto _animation = Animation::create();

//画像を配列に代入
for (int i = 0; i < 4; i++){

        auto str = __String::createWithFormat("anime00%i.png",i);
        SpriteFrame *sprite = cache->getSpriteFrameByName(str->getCString());
        _animation->addSpriteFrame(sprite);
        
 }
    
 _animation->setDelayPerUnit(0.5f); //アニメの動く時間を設定
 _animation->setRestoreOriginalFrame(true);


//cocos2dx2.x
//CCAnimationの初期化
CCAnimation *animation = CCAnimation::create();

//画像を配列に代入
for (int i = 0; i < 4; i++){
               char szImageFileName[128] = {0};
               sprintf(szImageFileName, "anime00%d.png", i);
               animation->addSpriteFrameWithFileName(szImageFileName);
        
            }


    

今回は、以下の様な画像を用意しています。
これをfor文で取り出せるように名前も工夫してつけてください。

• anime000.png
• anime001.png
• anime002.png
• anime003.png

CCAnimateクラスを使い、オブジェクトを動かす

先ほど取り出した配列を利用して、オブジェクトにアクションを取らせます。

//cocos2dx3.x
auto action = Animate::create(_animation);
auto anime  = RepeatForever::create(action);
sprite->runAction(anime);

//cocos2dx2.x
CCAnimate *action = CCAnimate::create(animation);
CCRepeatForever *anime = CCRepeatForever::create(action);
sprite->runAction(anime); 

これで完成です。

今回の全体コード

【cocos2dx3.x】

auto sprite = Sprite::createWithSpriteFrameName("anime000.png");
sprite->setPosition(Point(winSize.width/2,winSize.height/3));
this->addChild(sprite);

auto cache = CCSpriteFrameCache::getInstance();
cache->addSpriteFramesWithFile("anime.plist");
auto _animation = Animation::create();
for (int i=0; i<4; i++) {
        
    auto str = __String::createWithFormat("anime00%i.png",i);
    SpriteFrame *sprite = cache->getSpriteFrameByName(str->getCString());
    _animation->addSpriteFrame(sprite);
        
    }
    
    
_animation->setDelayPerUnit(0.5f);
_animation->setRestoreOriginalFrame(true);
    
auto action = Animate::create(_animation);
auto anime  = RepeatForever::create(action);
sprite->runAction(anime);

【cocos2dx2.x】

 
    CCSpriteFrameCache* cache = CCSpriteFrameCache::sharedSpriteFrameCache();
    cache->addSpriteFramesWithFile("testanime.plist");
    
    
    CCSprite*sprite = CCSprite::createWithSpriteFrameName("anime000.png");
    sprite->setPosition(ccp(200,60));
    this->addChild(sprite);
    
    
    
//ここからアニメーション
    CCAnimation *animation = CCAnimation::create();

    for (int i = 0; i < 4; i++){
               char szImageFileName[128] = {0};
               sprintf(szImageFileName, "anime00%d.png", i);
               animation->addSpriteFrameWithFileName(szImageFileName);
        
            }
    
    animation->setDelayPerUnit(0.5f / 4.0f); //アニメーションのスピード
    animation->setRestoreOriginalFrame(true); // 画像が元に戻るかどうか
    
    CCAnimate *action = CCAnimate::create(animation);
    
    CCRepeatForever *actionreq = CCRepeatForever::create(action);
    sprite->runAction(actionreq); 

　　　　　　　　　　　　

経営育成ゲーム「わたしの動物園」をリリースしました！

cocos2dxを使って作成したアプリを作成しました。
無料で遊べますので、ぜひゲーム作りの参考にしてみて下さい！