【Cocos2d-x】단지의 평면 화상으로 마법진적인 아레를 한다

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



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



사용한 것은 이 이미지.


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



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



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

    좋은 웹페이지 즐겨찾기