퍼즐 게임 만들기13 - 애니메이션 추가하기

시작하기에 앞서

블록이 새로 생길 때

위에서 부터 떨어지는건 좋은데 그게 보이지는 않았으면 좋겠다

 

 

요런 식으로 말이다

 

 

 

 

puzzleTest.zip

먼저 위 파일을 다운받는다.

이번에 새로 수정한 리소스들이다.

 

CGameLyaer.h

void startGame()  {
        for (int x = 0; x < COLUMN_COUNT+1; x++) {
            for (int y = 0; y < ROW_COUNT+1; y++) {
                m_pBoard[x][y] = NULL;
            }
        }
 
        srand(time(NULL));
        for (int x = 0; x < COLUMN_COUNT; x++) {
            for (int y = 0; y < ROW_COUNT; y++) {
                if (x == COLUMN_COUNT - 1 && y % 2 != 0) continue;
 
                Sprite* pGameObjectBack = Sprite::create("blockBack.png");
                pGameObjectBack->setAnchorPoint(ccp(0.5f, 0.5f));
                pGameObjectBack->setPosition(Common::ComputeXY(x, y));
 
                addChild(pGameObjectBack, 1);
            }
        }
 
        Sprite* pTop = Sprite::create("backgroundTop.png");
        pTop->setAnchorPoint(ccp(0.0f, 0.0f));
        pTop->setPosition(ccp(0.0f, 1470.0f));
        addChild(pTop, 4);
 
        m_countFallingObject = 0;
 
        searchMacthedStreak();
        clearRemovealObject();
        ProcessFalling();
 
        // 변수 초기화
        m_EnableTouch = 0;
        m_bTouchStarted = false;
        m_countFallingObject = 0;
    }
}

 

startGame() 함수에서 GameObject를 생성하는 부분을 삭제했다.

searchMacthedStreak() /clearRemovealObject() / ProcessFalling()

함수들로 인해 게임 시작직후 위에서부터 블록이 떨어질 것이다.

 

빨간색으로 표시한 부분이 상단에 블록이 생성된는 곳을 가려주는 역할이다.

리소스 파일중 backgoundTop.png를 최상단에 출력해 가려주는 것이다.

 

 

이제 애니메이션

 블록이 떨어지는걸 보면서 뭔가 아쉬워 보였다.

블록 낙하 속도에 가속도라도 붙일까 하다가 착지 애니메이션을 추가하기로 했다.

 

애니메이션은 간단하게 위와 같이 파일을 생성했다.

포토샾에서 열심히 눌러줬다.

 

 

 

4 프레임 밖에 안되지만 자연스럽게 움직이고 있다.

 

 

애니메이션은 블록이 낙하할때 CGameObecjt::ProcessFalling()에서

Sequence::create()에 MoveBydhk callfunc_selector사이에 추가시켜

낙하->착지->콜백 순으로 실행되게 할 것이다.

 

 

CGameObject.cpp

Animation* CGameObject::setAnimDown(int type) {
    SpriteFrame* animDownFrame1;
    SpriteFrame* animDownFrame2;
    SpriteFrame* animDownFrame3;
    SpriteFrame* animDownFrame4;
    if (type == 0) {
        animDownFrame1 = SpriteFrame::create("Anim/blockBlueDown1.png", Rect(0, 0, 150, 130));
        animDownFrame2 = SpriteFrame::create("Anim/blockBlueDown2.png", Rect(0, 0, 150, 130));
        animDownFrame3 = SpriteFrame::create("Anim/blockBlueDown3.png", Rect(0, 0, 150, 130));
        animDownFrame4 = SpriteFrame::create("Anim/blockBlueDown4.png", Rect(0, 0, 150, 130));
    }
    else if (type == 1) {
        animDownFrame1 = SpriteFrame::create("Anim/blockBrownDown1.png", Rect(0, 0, 150, 130));
        animDownFrame2 = SpriteFrame::create("Anim/blockBrownDown2.png", Rect(0, 0, 150, 130));
        animDownFrame3 = SpriteFrame::create("Anim/blockBrownDown3.png", Rect(0, 0, 150, 130));
        animDownFrame4 = SpriteFrame::create("Anim/blockBrownDown4.png", Rect(0, 0, 150, 130));
    }
    else if (type == 2) {
        animDownFrame1 = SpriteFrame::create("Anim/blockGreenDown1.png", Rect(0, 0, 150, 130));
        animDownFrame2 = SpriteFrame::create("Anim/blockGreenDown2.png", Rect(0, 0, 150, 130));
        animDownFrame3 = SpriteFrame::create("Anim/blockGreenDown3.png", Rect(0, 0, 150, 130));
        animDownFrame4 = SpriteFrame::create("Anim/blockGreenDown4.png", Rect(0, 0, 150, 130));
    }
    else if (type == 3) {
        animDownFrame1 = SpriteFrame::create("Anim/blockPinkDown1.png", Rect(0, 0, 150, 130));
        animDownFrame2 = SpriteFrame::create("Anim/blockPinkDown2.png", Rect(0, 0, 150, 130));
        animDownFrame3 = SpriteFrame::create("Anim/blockPinkDown3.png", Rect(0, 0, 150, 130));
        animDownFrame4 = SpriteFrame::create("Anim/blockPinkDown4.png", Rect(0, 0, 150, 130));
    }
    else if (type == 4) {
        animDownFrame1 = SpriteFrame::create("Anim/blockWhiteDown1.png", Rect(0, 0, 150, 130));
        animDownFrame2 = SpriteFrame::create("Anim/blockWhiteDown2.png", Rect(0, 0, 150, 130));
        animDownFrame3 = SpriteFrame::create("Anim/blockWhiteDown3.png", Rect(0, 0, 150, 130));
        animDownFrame4 = SpriteFrame::create("Anim/blockWhiteDown4.png", Rect(0, 0, 150, 130));
    }
    else if (type == 5) {
        animDownFrame1 = SpriteFrame::create("Anim/blockYellowDown1.png", Rect(0, 0, 150, 130));
        animDownFrame2 = SpriteFrame::create("Anim/blockYellowDown2.png", Rect(0, 0, 150, 130));
        animDownFrame3 = SpriteFrame::create("Anim/blockYellowDown3.png", Rect(0, 0, 150, 130));
        animDownFrame4 = SpriteFrame::create("Anim/blockYellowDown4.png", Rect(0, 0, 150, 130));
    }
 
    Animation* anim = Animation::create();
    anim->setDelayPerUnit(0.06f);
    anim->addSpriteFrame(animDownFrame1);
    anim->addSpriteFrame(animDownFrame2);
    anim->addSpriteFrame(animDownFrame3);
    anim->addSpriteFrame(animDownFrame4);
    anim->addSpriteFrame(animDownFrame3);
    anim->addSpriteFrame(animDownFrame2);
    anim->addSpriteFrame(animDownFrame1);
    anim->addSpriteFrame(animDownFrame2);
    anim->addSpriteFrame(animDownFrame3);
    anim->addSpriteFrame(animDownFrame2);
    anim->addSpriteFrame(animDownFrame1);
 
    return anim;
}

애니메이션을 출력하는데 다양한 방법이 있지만

여기선 가장 간단하게 이미지 여러장에 딜레이를 주어 출력하게 할 것이다.

 

기본적인 구조는 SpriteFrame형으로 이미지를 불러오고

Animation 타입을 생성하여 SpriteFrame을 애니메이션에 추가시킨다.

 

44행~55행 - Frame추가 순서를 1-2-3-4-3-2-1-2-3-2-1로 하여

한번 튕긴 후 작게 한번 더 튕기게 하였다.

 

CGameObject.cpp

void CGameObject::ProcessFalling(int speed) {
    setVisible(true);
 
    Point position = getPosition();
 
    m_prevBoardX = Common::ComputeBoardX(position);
    m_prevBoardY = Common::ComputeBoardY(position);
    Point targetPosition = Common::ComputeXY(m_targetBoardX, m_targetBoardY);
 
    MoveBy* pMoveBy = MoveBy::create(0.08f*(1+speed),
        ccp(targetPosition.x - position.x, targetPosition.y - position.y));
 
 
 
    Animation* anim = setAnimDown(m_type);
 
    FiniteTimeAction* pAction = Sequence::create(pMoveBy,
        Animate::create(anim),
        CallFunc::create(this, callfunc_selector(CGameObject::FallingCompleteEvent)), NULL);
    runAction(pAction);
}

이렇게 만들어진 애니메이션 생성 함수를 위와 같이 활용하였다.

Sequence에 의해

pMoveby가 실행된 후 착지 애니메이션이 실행될 것이다.

 

 

 

GIF를 잘못 만들어서 너무 빨리 움직이는데 원래 저렇진 않다

 

 

 

이제 어려운건 끝난것 같다

 남은건 콤보처리, 점수계산 및 출력 등이 남았다.

스테이지 등등은 손이 많이갈 뿐 어렵진 않을 것이다.