Cocos2d-x iOS アプリ

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

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

sc_effect2_00

アニメーションを利用してエフェクト表示するときに、以下のようなエフェクト素材を目にすることはよくあると思います。背景が透過処理されているものではなく、黒く塗りつぶされているものです。

black

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

ぴぽや倉庫 様

 

 

これをそのままCocos2d-x上でアニメーションとしてみます。アニメーションのやり方は過去記事「Cocos2d-x アニメーションを利用した回復エフェクトの表示方法」を参照してください。

effect_movie_black

 

当然、黒い背景をそのまま含めたアニメーションが表示されます。このままではゲーム中には使えませんよね。この問題は「加算合成」を利用することで解決できます。

 

【前回まで】

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

 

 

加算合成を利用する

加算合成の仕組み

スプライトを重ねる際に、すでに存在しているスプライトのRGB値を加算します。黒色のRGBは(0,0,0)なので、加算後のRGB値はすでに存在しているスプライトのRGBと変わらないことになります。

 

sc_effect2_01

 

それでは次に、Cocos2d-xのゲーム中で加算合成するやり方を見てきます。

 

 

BlendFuncを使う

BlendFuncを利用します。

    BlendFunc func;
    func.src = GL_SRC_ALPHA;
    func.dst = GL_ONE;
    sprite->setBlendFunc(func);

 

ポイントは、元となるスプライトにBlendFuncを適用してからアクションを設定し、スプライトをRunActionさせると、アクションに紐付けられたアニメーションも加算合成されるところです。私はこれがわからずに大苦戦してました。

 

ではプログラムを見ていきます。

 

プログラムの実装

    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    cocos2d::SpriteFrameCache::getInstance()->addSpriteFramesWithFile("sprites.plist");
    
    Sprite* sprite = Sprite::createWithSpriteFrameName("effect_cure02_0000.png");
    sprite->setPosition(Vec2(visibleSize.width/10 * 5 + origin.x, visibleSize.height/2 + origin.y));
    sprite->setScale(1.5);
    this->addChild(sprite);
    
    // 加算合成
    BlendFunc func;
    func.src = GL_SRC_ALPHA;
    func.dst = GL_ONE;
    sprite->setBlendFunc(func);

    // アニメーションの作成
    Animation* animation = Animation::create();

    SpriteFrame* sprite0 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0000.png");
    animation->addSpriteFrame(sprite0);
    SpriteFrame* sprite1 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0001.png");
    animation->addSpriteFrame(sprite1);
    SpriteFrame* sprite2 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0002.png");
    animation->addSpriteFrame(sprite2);
    SpriteFrame* sprite3 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0003.png");
    animation->addSpriteFrame(sprite3);
    SpriteFrame* sprite4 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0004.png");
    animation->addSpriteFrame(sprite4);
    SpriteFrame* sprite5 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0005.png");
    animation->addSpriteFrame(sprite5);
    SpriteFrame* sprite6 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0006.png");
    animation->addSpriteFrame(sprite6);
    SpriteFrame* sprite7 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0007.png");
    animation->addSpriteFrame(sprite7);
    SpriteFrame* sprite8 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0008.png");
    animation->addSpriteFrame(sprite8);
    SpriteFrame* sprite9 = SpriteFrameCache::getInstance()->getSpriteFrameByName("effect_cure02_0009.png");
    animation->addSpriteFrame(sprite9);

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

 

 

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

シミュレータを起動して黒い背景が見えなくなっていることを確認します。はあああ、やっとできたー!!(当時の心の声)

effect_movie_clear

 

やった!これでゲームのエフェクト表現をかなりリッチにできるぞ!!!!

 

PrainGoogleAdSense

PrainGoogleAdSense

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

執筆者:


comment

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

関連記事

シミュレータ

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

画面を眺めててもゲームにはならないよ。画面タッチしたいんだけど!   前回までで画像を表示できるようになりましたが、コレではまだゲームとは言えませんね。 今回と次回で、ボールをタップしたら好 …

状態遷移

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

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

スプライトシート作成

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

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

cocos2dx

Cocos2d-x クライアント側のHttpレスポンス処理

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

エフェクトサムネ

ゲーム制作 Cocos2d-x関連 第12回 「ボールヒットエフェクトの表示」

派手なヒットエフェクトが欲しい!   この回では、派手では無いですが、ボールがドロップにヒットしたタイミングでヒットエフェクトを表示していきたいと思います。 一口にエフェクトと言っても色々な …