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

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

関連記事

ゲーム制作 Prain プレイン Cocos2d-x

ゲーム制作 Cocos2d-x関連 第17回 「タイトル画面の作成と画面遷移」

  この回ではタイトル画面と画面遷移を実装していきます。画面遷移が実装できれば、リッチなゲームを作りやすくなると思います。       仕様の検討 追加する画面 …

cocos2dx

Cocos2d-x クライアント側の処理とデータ送信(Httpリクエスト)

この記事は「Cocos2d-x セーブデータをサーバに送信して保存する」の続きになります。   ・第1回 : サーバにデータを保存したい理由と全体の流れ ・第2回 : クライアント側の処理と …

状態遷移

ゲーム制作 Cocos2d-x関連 第13回 「ゲームの状態(プレイヤーのターン 敵のターン、etc・・・)の実装」

ゲームの操作感がわかってきたところで、ゲーム全体の流れの大枠を作っていきましょう。     今回のゲームはターン制を想定しています。つまり、プレイヤーのターンと敵のターンです。 な …

マップイメージ

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

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

cocos2dx

Cocos2d-x サーバ側の処理とデータ送信(Httpレスポンス)

この記事は「Cocos2d-x セーブデータをサーバに送信して保存する」の続きになります。 ・第1回 : サーバにデータを保存したい理由と全体の流れ ・第2回 : クライアント側の処理とデータ送信(H …