cocos2dxでタンブラーのハートマークの動きを再現

photo by Scott Beale

タンブラーを始めまして、眺めてはリブログしたりハートを押したりしています。

眺めてはリブログ、眺めてはハート、眺めてはハートからのリブログ、などやっています。タンブラー楽しいです。

眺めているだけも楽しいのですが、ハートを押すのも楽しいなと思いまして、cocos2dxで再現できないかなと思いまして調べながらやってみました。

ハートのエフェクトはこんな感じです

ふわっと出てゆらゆらと消えて行く感じ。

こんな感じで、ついついまた押したくなってしまいます。

ハートの動きを考える

さて実装なのですが、まずはハート自体がどんな動きをしているのか考えていました。

ハートを押す

→

ハートが上に動きつつ

ハートがゆらゆらしつつ

ハートが消える

こんな感じですかね。アクションを組み合わせれば実装できそうです。

実装する

さっそく実装してみました。

「上に動かす」のはMoveTo、「ゆらゆらさせる」のはRotateTo、「消える」のはFadeOutでいいのかなと思いまして、

試行錯誤した結果、、、

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();

// ハートマークを作る
CCSprite* pSprite = CCSprite::create("heart.png");
pSprite->setPosition(ccp(visibleSize.width/2, visibleSize.height/2));
this->addChild(pSprite);

// アニメーションの設定
// 移動アニメーション
CCMoveTo* move = CCMoveTo::create(0.7f, ccp(visibleSize.width/2, visibleSize.height/2 +300));

// 回転アニメーション
CCRotateTo* rotate = CCRotateTo::create(0.2f, -20);
CCRotateTo* rotate2 = CCRotateTo::create(0.3f, 20);
CCRotateTo* rotate3 = CCRotateTo::create(0.3f, -10);
CCCallFuncN* removingNodeFunction = CCCallFuncN::create(this, callfuncN_selector(HelloWorld::removingNode));
CCSequence* seq = CCSequence::create(rotate, rotate2, rotate3, removingNodeFunction, NULL);

// フェードアウト
CCFiniteTimeAction* fadeout = CCSequence::create(CCDelayTime::create(0.4f), CCFadeOut::create(0.3f), NULL);

pSprite->runAction(seq);
pSprite->runAction(move);
pSprite->runAction(fadeout);

抜粋ですが、こんな感じになりました。

実行してみる

さっそく実行してみます

↓実行してみたキャプチャですが

いい感じです！！ゆらゆらしてふんわり消えます。

まとめ

ゆらゆらして消える感じを実装できました。

しかし、１つのspriteに対してrunactionを３つ実行するのはソースとしてどうなのかなという感じもしますが、、、どうなんでしょうかね。追って調べてみます。

タンブラーもよろしくお願いします

http://meganenoblr.tumblr.com/