【Cocos2d-x】ただの平面画像で魔法陣的なアレをやる

8032 ワード
C++ Android iOS cocos2d-x C++ テキストリンク

ただの平面画像を擬似立体で魅せる

今回紹介するテクニックの結果はこんな感じ。

使ったのはこの画像。


http://f.hatena.ne.jp/naoki1202/20071127012246

やり方

  1. 魔法陣の画像でSpriteを生成する。
  2. Y方向を潰して立体感を出す為にNodeクラスのフレームを生成してsetScaleY(0.5f)しておく。
  3. フレームに魔法陣をaddChild()する。
  4. 後は回すなりスケール変えるなりご自由に。

ソースコード

cocos newしたHelloWorldScene::init()に書いた感じ。

// 潰して奥行きを表現する為の枠
Node *frame = Node::create();
frame->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
frame->setPosition(Director::getInstance()->getVisibleSize()/2);
frame->setScaleY(0.5);
this->addChild(frame);

// 魔法陣
Sprite *magic_circle = Sprite::create("magic_circle.jpg");
magic_circle->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
magic_circle->setPosition(frame->getContentSize()/2);
magic_circle->setScale(0.0f);
frame->addChild(magic_circle);

// アニメーション
FiniteTimeAction *action1 = Spawn::create(RotateBy::create(0.2f, 90.0f),
                                          ScaleTo::create(0.2f, 2.0f), NULL);
FiniteTimeAction *action2 = RotateBy::create(1.5f, 300.0f);
FiniteTimeAction *action3 = Spawn::create(RotateBy::create(0.2f, 90.0f),
                                          ScaleTo::create(0.2f, 3.0f),
                                          FadeOut::create(0.2f), NULL);
CallFunc *reset = CallFunc::create([magic_circle]() {
    // リピートの為にリセット
    magic_circle->setScale(0.0f);
    magic_circle->setOpacity(255);
});

magic_circle->runAction(RepeatForever::create(Sequence::create(action1,
                                                               action2,
                                                               action3,
                                                               reset,
                                                               DelayTime::create(1.0f), NULL)));

おまけ

魔法使いを上にのせてみた。
ガチャとか引いて出てくるときこんな感じ？

ただ、魔法陣の発光を上方向に表現するのは、ただの平面画像じゃ無理。