Bezier Action

베지어 곡선에 대한 공식은 모르더라도 어떻게 생겨 먹었는지는 안다고 가정하고 강의를 진행한다.

코코스2D-x 베지어 곡선은 4개의 포인터가 필요하다. 자료형은 다음과 같다.

ccBezierConfig
typedef struct _ccBezierConfig {
    CCPoint endPosition;
    CCPoint controlPoint_1;
    CCPoint controlPoint_2;
} ccBezierConfig;

4개라고 했는데 3개밖에 없다. 나머지 한 개는 현재 스프라이트의 위치이다. 실행화면을 먼저 보자.

1. 베지어, 2베지어 리버스 3, 기본위치로 리셋, 4, 점프로 메뉴를 만든다.

메뉴 생성
bool HelloWorld::init()
{
    bool bRet = false;

    if( !CCLayerColor::initWithColor(ccc4(255, 255, 255, 255)))
    {
        return true;
    }

    bRet = true;

    m_debugDraw = DebugDraw::create();
    this->addChild(m_debugDraw);

    CCMenuItemFont::setFontSize(50);
    CCMenuItemFont::setFontName("fonts/Nanum Brush Script.ttf");

    CCMenuItemFont *pMenuItem1 = CCMenuItemFont::create(
        "Bezier",
        this,
        menu_selector(HelloWorld::DoClickTag));
    
    CCMenuItemFont *pMenuItem2 = CCMenuItemFont::create(
        "Reverse",
        this,
        menu_selector(HelloWorld::DoClickTag));

    CCMenuItemFont *pMenuItem3 = CCMenuItemFont::create(
        "Reset",
        this,
        menu_selector(HelloWorld::DoClickTag));

    CCMenuItemFont *pMenuItem4 = CCMenuItemFont::create(
        "Jump",
        this,
        menu_selector(HelloWorld::DoClickTag));

    CCMenu *pMenu = CCMenu::create(pMenuItem1, pMenuItem2, pMenuItem3, pMenuItem4, NULL);

    pMenu->alignItemsHorizontally();
    pMenu->setPosition(ccp(240, 300));

    pMenuItem1->setColor( ccc3( 255, 0, 0 ));
    pMenuItem2->setColor( ccc3( 0, 255, 0 ));
    pMenuItem3->setColor( ccc3( 0, 0, 255 ));
    pMenuItem4->setColor( ccc3( 0, 0, 0 ));

    pMenuItem1->setTag(1);
    pMenuItem2->setTag(2);
    pMenuItem3->setTag(3);
    pMenuItem4->setTag(4);
    this->addChild(pMenu);

    CCSprite* pWoman = CCSprite::create("Images/grossinis_sister1.png");
    pWoman->setPosition( ccp(30, 200));
    this->addChild( pWoman);

    mWoman = pWoman;
    return bRet;
}

베지어 포인터를 지정후 CCBezierBy로 액션을 생성 후 액션을 실행한다.

베지어 실행
void HelloWorld::DoClickTag(CCObject* pSender)
{
    CCMenuItem *item = (CCMenuItem*)pSender;
    int n = item->getTag();

    if(n == 1)  //Bezier1
    {
        ccBezierConfig bezier;
        bezier.controlPoint_1 = ccp(150, 100);
        bezier.controlPoint_2 = ccp(250, -100);
        bezier.endPosition = ccp(350, 0);

        CCActionInterval *action = CCBezierBy::create(3, bezier);
        mWoman->runAction(action);
    }

    if(n == 2)  //Reverse
    {
        ccBezierConfig bezier;
        bezier.controlPoint_1 = ccp(150, 100);
        bezier.controlPoint_2 = ccp(250, -100);
        bezier.endPosition = ccp(350, 0);

        CCActionInterval *action = CCBezierBy::create(3, bezier);
        action = action->reverse();
        mWoman->runAction(action);
    }

    if(n == 3)  //Reset
    {
        //Reset
        mWoman->stopAllActions();
        mWoman->setPosition( ccp( 30, 200));
        mWoman->setRotation( 0.0f);
        mWoman->setScale( 1.0f);        
    }

    if(n == 4)  //Jump
    {
        CCActionInterval *action = CCJumpBy::create(2, ccp(400, 2), 50, 3);
        mWoman->runAction(action);
    }
}

베지어 곡선 경로로 움직일때 점을 계속 찍어보자.
CCLayer 또는 CCLayerColor를 상속한 HelloWorld에 가상함수 draw를 추가한다.

m_debugDraw로 mWoman의 위치를 계속 찍는다.

이런 디버깅 코드는 배포시에는 반드시 제거 되어야 한다.

Action 디버깅
void HelloWorld::draw()
{
    __super::draw();

    //디버깅을 위해서 이런 코드를 사용중이다.
    //아래 코드로 인해서 계속 점을 추가한다. 배포시에는 제거해야 한다.
    glPointSize(5);
    m_debugDraw->appendPoint( mWoman->getPosition(), 1, 0, 0);
    m_debugDraw->appendPoint( ccp(30, 200), 0, 0, 0);
    m_debugDraw->appendPoint( ccp(30 + 150, 200 + 100), 0, 0, 0);
    m_debugDraw->appendPoint( ccp(30 + 250, 200 - 100), 0, 0, 0);
    m_debugDraw->appendPoint( ccp(30 + 350, 200), 0, 0, 0);
}

DebugDraw 객체는 tutorial09.html을 참고한다.