Cocos2d-x iOS アプリ

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

投稿日:2016年8月14日 更新日:

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);


 

 

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

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

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

 

 

 

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

PrainGoogleAdSense

PrainGoogleAdSense

-Cocos2d-x, iOS, アプリ
-, ,

執筆者:


comment

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

関連記事

Cocos2d-x 多言語に対応したアプリのプログラム実装方法(処理のローカライズ)

こんにちは。akiです。 この記事では、Cocos2d-xにおいてアプリを多言語対応にするやり方を説明します。とっても簡単です。   ■環境 XCode:7.3.1 Cocos2d-x:3. …

アプリ画像

iOSアプリ 実機テストからアプリリリースまでの7つの手順

この記事では、iOSアプリを作成した後、実機でテストしてAppStoreにリリースするまでの一連の手順を紹介します。   手順を検索すると色々なサイトが出てくるのですが、情報が古くなってしま …

楽ちん

Cocos2d-x アニメーションの画像追加を楽に行う方法

  この記事では、楽してアニメーション機能を利用する方法について紹介します。   【前回まで】 ・第1回 : アニメーションを利用した回復エフェクトの表示方法 ・第2回 : 加算合成を利用し …

マップイメージ

ゲーム制作 Cocos2d-x関連 第14回 「プレイヤー攻撃によるダメージ計算、ターン交代」

今回はプレイヤーのターン、敵のターンを交互に行うようにしていきます。また、それぞれのターンで相手に攻撃を行い、ダメージ計算もしていきます。       ターン交代の仕様 …

遊びを繋げ新たな地平へ プレイン Prain

ゲーム制作 Cocos2d-x関連 第9回 「移動しているボールの減速」

この辺りで大体折り返し地点です。   さて、弾いたボールはだんだんと減速していくようにしましょう。色々なやり方があるかと思いますが、今回はシンプルにupdateの中でカウンタを回して、一定回 …