드래곤 플라이트 따라 만들기 - 7. 날갯짓 애니메이션

기본적인 게임 기능은 다 구현되었지만 밋밋한 화면을 역동적으로 하기 위해서 애니메이션을 추가하도록 하겠다. 이번 장에서는 플레이어와 적의 날갯짓 애니메이션을 구현하겠다. 

날갯짓 애니메이션

적의 날갯짓을 하기 위해서는 기본적인 날개 스프라이트를 왼쪽 날개는 오른쪽에 오른쪽 날개는 왼쪽에 축을 두고 위아래로 살짝씩만 회전을 하면 된다. 

우선 enemy.h 로 이동을 해서 아래 코드를 변수로 추가한다.

    BOOL wingDown;

날개가 내려갔는지 올라갔는지를 체크하기 위한 변수이다. 

그리고 본격적으로 애니메이션을 구현하기 위해 enemy.m 파일로 이동한다. 

특정 시간마다 반복적으로 메소드를 호출해야 하기때문에 스케쥴러를 위한 메소드 -(void)updateWings:(ccTime)dt 를 하나 만들어 아래와 같이 코드를 추가한다.

-(void)updateWings:(ccTime)dt {

    //왼쪽 오른쪽 날개짓을 위환 회전

    CCRotateTo *leftWingDown = [CCRotateTo actionWithDuration:0.2 angle:-80];

    CCRotateTo *leftWingUp = [CCRotateTo actionWithDuration:0.2 angle:0];

    CCRotateTo *rightWingDown = [CCRotateTo actionWithDuration:0.2 angle:80];

    CCRotateTo *rightWingUp = [CCRotateTo actionWithDuration:0.2 angle:0];

    //번갈아 가면서 날개짓을 한다.

    if ( (wingDown = !wingDown) ){

        [_leftWing runAction:leftWingDown];

        [_rightWing runAction:rightWingDown];

    }else{

        [_leftWing runAction:leftWingUp];

        [_rightWing runAction:rightWingUp];

    }

}

회전을 위한 액션인 CCRotateTo을 날개가 내려갔을 때, 올라갔을 때 그리고 왼쪽, 오른쪽 날개 4개의 액션을 생성한다. 시간은 0.2초, 회전 각도는 80도로 한다. 그리고 내려갔을 경우는 올라가는 애니메이션을 실행하고, 올라갔을 경우는 내려가는 애니메이션을 실행한다. 

그리고 실행하면 바로 애니메이션을 호출하기 위해서 onEnter 메소드에 아래와 같이 스케줄러 코드를 추가한다.

-(void)onEnter{

...

    //날개짓을 위한 0.2초 마다 메소드 호출

    [self schedule:@selector(updateWings:) interval:0.2];

}

Cmd(⌘) + R을 눌러서 실행을 해보자. 

적의 날개를 추가하는 방법과 같은 방법으로 플레이어 캐릭터에도 적용을 하도록 하자. 

Player.h 파일로 이동해서 날갯짓을 위한 변수를 하나 만든다.

    BOOL wingDown;

구현을 위해 Player.m 파일로 이동한다. 

Enemy.m 과 똑같은 방법으로 특정 시간마다 반복적으로 메소드를 호출해야 하므로 스케쥴러를 위한 -(void)updateWings:(ccTime)dt 메소드를 만들어 아래와 같이 코드를 추가한다.

-(void)updateWings:(ccTime)dt{

    //왼쪽 날개 에니메이션을 위한 날개 내렸다 올리기

    CCRotateTo *leftWingDown = [CCRotateTo actionWithDuration:0.2 angleX:-30 angleY:60];

    CCRotateTo *leftWingUp = [CCRotateTo actionWithDuration:0.2 angleX:0 angleY:0];

    //오른쪽 날개 에니메이션을 위한 날개 내렸다 올리기

    CCRotateTo *rightWingDown = [CCRotateTo actionWithDuration:0.2 angleX:30 angleY:-60];

    CCRotateTo *rightWingUp = [CCRotateTo actionWithDuration:0.2 angleX:0 angleY:0];

    //날개짓을 번갈아 가기 위해

    if ( (wingDown = !wingDown) ){

        [_leftWing runAction:leftWingDown];

        [_rightWing runAction:rightWingDown];

    }else{

        [_leftWing runAction:leftWingUp];

        [_rightWing runAction:rightWingUp];

    }

}

적의 날갯짓 애니메이션과 다른 점이 보일 것이다. 적은 단순히 고정축인 Z축으로 으로 회전을 했다면, 플레이어 캐릭터의 날개는 X축과 Y축으로 회전을 해서 약간 비트는 느낌이 들게 한다. 회전을 위한 액션인 CCRotateTo을 내려갔을 때, 올라갔을 때 그리고 왼쪽, 오른쪽 날개 4개의 액션을 생성한다. 시간은 0.2초, x축 회전 각도는 30도, y축 회전 각도는 60도로 한다. 그리고 내려갔을 경우는 올라가는 애니메이션을 실행하고, 올라갔을 경우는 내려가는 애니메이션을 실행한다. 

그리고 실행하면 바로 애니메이션을 호출하기 위해서 onEnter 메소드에 아래와 같이 스캐쥴러 코드를 추가한다.

-(void)onEnter{

...

    //0.2초에 한번씩 날개짓을 한다.

    [self schedule:@selector(updateWings:) interval:0.2];

}

0.2초에 한번씩 날갯짓을 한다.

Cmd(⌘) + R을 눌러서 실행을 해보자. 

정적인 느낌의 게임이 날갯짓 애니메이션 하나를 추가하니, 좀더 생동감이 넘치게 되었다. :-)

다음은 화면에 점수를 표시하는 레이어인 HUD를 추가하도록 할 예정이다.