단순한 평면 이미지를 의사 입체로 매료시킨다

이번 소개하는 테크닉의 결과는 이런 느낌.



사용한 것은 이 이미지.


htp : // f. 하테나. 네. jp/나오키 1202/20071127012246

방법

마법진의 이미지로 Sprite를 생성합니다.

Y 방향을 잡아 입체감을 내기 위해 Node 클래스의 프레임을 생성해 setScaleY(0.5f) 해 둔다.

프레임에 마법진을 addChild() 한다.

나중에 돌리면 스케일이 바뀌어 자유롭게.

소스 코드

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)));

덤

마법사를 위로 올려 보았다.
뽑기라든가 당겨 나올 때 이런 느낌?



단지, 마법진의 발광을 위 방향으로 표현하는 것은, 단지의 평면 화상이라면 무리.