Prainブログ

ゲーム開発とかIT小話とかその他雑記のブログ

*

Cocos2d-x アニメーションを利用した回復エフェクトの表示方法

      2016/09/13

effect_movie00

この記事では、Cocos2d-xのアニメーションを利用したエフェクトの表示方法について紹介します。

 

 

また、少し実践的なアニメーションの利用方法をシリーズ記事として全5回で予定しています。

 

・第1回 : アニメーションを利用した回復エフェクトの表示方法(ここ)

・第2回 : 加算合成を利用して、背景が黒い画像をアニメーションで使えるようにする方法

・第3回 : エフェクトアニメーションの終了と同時にエフェクトを消す方法

・第4回 : アニメーションをバッファリングして、高速で安定した処理を行う方法

・第5回 : アニメーションの画像追加を楽に行う方法

 

 

スポンサーリンク

 

 

アニメーション機能について

Cocos2d-xにおけるアニメーションとは、アニメーションクラスを利用して、予め用意しておいた画像を順次表示していくものです。要はパラパラ漫画のようなアニメーションです。

paraparaparapara

出典 – shikakusankaku

それでは、次からエフェクト表示の手順の説明を行います。

 

 

スプライトシートの準備

アニメーションには大量の画像を使用するため、スプライトシートを利用します。スプライトシートは複数の画像を一つにまとめた画像のことです。

スプライトシートの作成方法については過去記事「Cocos2d-x スプライトシートを作成して画像を楽に管理したい」を参照してください。

Cocos2d-x スプライトシートを作成して画像を楽に管理したいこの記事では、スプライトシートの作成方法と、スプライトシートを利用することのメリットについて紹介します。  スプライトシート(テクスチャアトラス)とはスプライトシートとは、いくつかの...

 

 

今回使用するスプライトシートはエフェクト画像をまとめたものになります。これをアニメーション表示してエフェクトとして表現します。sprites

元になる素材は「ぴぽや」様から頂いております。

ぴぽや倉庫 様

 

 

プログラムの実装


    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

    // スプライトシートの準備
    cocos2d::SpriteFrameCache::getInstance()->addSpriteFramesWithFile("sprites.plist");
    
    // 最初の画像の表示
    Sprite* sprite = Sprite::createWithSpriteFrameName("effect_cure01_0000.png");
    sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
    sprite->setScale(1.5);
    this->addChild(sprite);
    
    // アニメーションに画像を追加
    Animation* animation = Animation::create();
    
    SpriteFrame* sprite0 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure01_0000.png");
    animation->addSpriteFrame(sprite0);
    SpriteFrame* sprite1 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure01_0001.png");
    animation->addSpriteFrame(sprite1);
    SpriteFrame* sprite2 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure01_0002.png");
    animation->addSpriteFrame(sprite2);
    SpriteFrame* sprite3 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure01_0003.png");
    animation->addSpriteFrame(sprite3);
    SpriteFrame* sprite4 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure01_0004.png");
    animation->addSpriteFrame(sprite4);
    SpriteFrame* sprite5 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure01_0005.png");
    animation->addSpriteFrame(sprite5);
    SpriteFrame* sprite6 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure01_0006.png");
    animation->addSpriteFrame(sprite6);
    SpriteFrame* sprite7 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure01_0007.png");
    animation->addSpriteFrame(sprite7);

    // アニメーションの間隔
    animation->setDelayPerUnit(0.1);
    
    // アニメーション終了後に最初に戻すかどうか
    animation->setRestoreOriginalFrame(true);
    
    // アクションの設定
    FiniteTimeAction* repeat = RepeatForever::create(Animate::create(animation));
    
    // アクションの実行
    sprite->runAction(repeat);


 

 

エフェクトアニメーションの表示

シミュレータを起動してエフェクトアニメーションが表示されることを確認します。画像を差し替えれば攻撃エフェクト、ダメージエフェクトなど様々なエフェクトを表現できます。

また、拡大倍率やアニメーションの間隔などを調整して、好みのアニメーションとなるよう調整してみてください。

 

 

 

以上です。ここまでご覧頂きありがとうございました。

 - , ,

        

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

SDKBoxを使ってアプリ内課金をするやり方 インストール編

この記事では、アプリ課金のためのSDKBoxインストールのやり方を説明します。 …

Cocos2d-x iOS アプリ名(アプリのアイコン名)のローカライズ方法

こんにちは。akiです。 この記事ではCocos2d-xでのアプリ名(アプリのア …

遊びを繋げ新たな地平へ プレイン Prain
ゲーム制作 Cocos2d-x関連 第9回 「移動しているボールの減速」

この辺りで大体折り返し地点です。   さて、弾いたボールはだんだんと減 …

スプライトシート作成
Cocos2d-x スプライトシートを作成して画像を楽に管理したい

Cocos2d-x スプライトシートを作成して画像を楽に管理したい この記事では …

シミュレータ
ゲーム制作 Cocos2d-x関連 第4回 「画面タッチに反応して画像を出そう」

画面を眺めててもゲームにはならないよ。画面タッチしたいんだけど!   …