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

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

関連記事

cocos2dx

Cocos2d-x セーブデータをサーバに送信して保存する

こんにちは、akiです。 この記事ではクライアントからサーバにセーブデータを送信して、サーバ側にデータを保存しておく方法を説明します。   ■環境 XCode:8.2.1 Cocos2d-x …

シミュレータ

ゲーム制作 Cocos2d-x関連 第3回 「画像の表示処理 解説」

今回はCocos2d-xにおける画像表示コードの解説です。   画像表示処理の解説 前回 第2回 「Cocos2d-xで作ろう!!~画像の表示処理」 の続きです。   先ほどの画像 …

新作iOSアプリ 「フェリクスマギアの魔女」公開中です!

新作iOSアプリ 「フェリクスマギアの魔女」公開しました 下の「AppStoreからダウンロード」アイコンからダウンロード画面に行けます フェリマギ ダウンロード無料(アプリ内アイテム課金あり)です。 …

新しいファイル

ゲーム制作 Cocos2d-x関連 第8回 「より保守性のあるプログラムを目指して」

  何だこのタイトルは・・・ゲーム制作はどこに行ったの?   結論からいうと、この回ではゲームとしての進展はありません。ただ、後々のプログラムの可読性を上げるために、プログラムを少 …

パワーゲージ

ゲーム制作 Cocos2d-x関連 第10回 「パワーゲージによるボール移動距離の強弱付け」

コレは、・・・アレです。動くゲージをどこで止めるかによって、ボールの移動距離が変わるやつです。     パワーゲージの実装方法検討 パワーゲージの実装方法ですが、   パ …