CH:Windship DevDATA Center

 이번 강좌는 Ease Actions와 Misc Actions 라는 Action들을 배울 것이다. 그런데 생각보다 어렵다. 잘 이해가 되지 않는 것은 예제도 실행해보면서 다시한번 살펴봐라. 그리고 그래도 이해가 되지 않는다면 댓글을 달아주시길...

그럼 강좌를 시작하겠다. 

Cocos2d로 애니메이션 구현하기 3

3. Ease Actions

Ease Action은 애니메이션을 구현하는 속도에 관련된 Action들이다. 이제까지 알아본 것은 모두 기본 속도 1로 작동하는 것들인데 Ease Action을 통해서 애니메이션을 점점빠르게 갑자기 빠르게 등을 구현해 볼 수 있다. 

3.1 EaseIn / EaseOut

EaseIn은 이동이나 변환등의 액션을 처음에는 천천히 시작했다가 점점 빨라지는 애니메이션을 구현한다. 그러니까. 점점 빨라지는 Action 이다. Move Action을 사용하면 쉽게 이해할 수 있는데 특정 지점으로 이동하는 Action을 EaseIn에 등록하고 실행시키면 해당 지점으로 빨려들어가듯이 점점 빨리 움직이는 것을 볼 수 있다. EaseOut은 EaseIn과 반대로 처음에는 빨리 시작되었다가 점점 느려지는 애니매이션을 구현한다. Move Action에서 다시 생각해 보자면 특정 위치에서 빨리 빠져나와서 점점 지정된 위치로 이동하는 것으로 이해하면 쉽게 이해할 수 있을 것이다. 

다음 그림을 보면서 이해를 하도록 노력해 보자. x축은 시간이고 y축은 전체를 1로 봤을 때 처리한 프레임 수의 비율이다. 만약 Move라면 이동한 거리라 볼 수 있고, Rotate라면 회전한 각도 비율이라 볼 수 있다.

파란색은 EaseIn을 빨간색은 EaseOut의 Rate계산식을 나타낸 것이다. 그리고 가운데 검은 선은 기본 애니메이션 구현속도이고, 양 옆의 희미한 색의 그래프는 rate값을 좀더 크게했을 때의 속도그래프이다. 이 그래프를 보면 알 수 있듯이 EaseIn은 처음에는 느린 속도로 애니메이션하다가 점점 빠르게 애니메이션을 구현한다. EaseOut은 이와 반대로 처음에는 매우 빠른 속도로 애니메이션을 구현하다가 점점 느린 속도로 구현되도록 계산하는 것을 확인할 수 있다. 
 

사 용방법은 다음과 같이 Action을 하나 만들고 그 Action을 [EaseIn actionWithAction:rate:]에 입력되는 Action을  rate만큼의 로그 비율로 점점 빨라진다. rate의 값이 크면 클 수록 처음에는 더 느리고 중간 이동하는 속도가 더 빨라진다.

    id move = [MoveBy actionWithDuration:3 position:ccp(350,0)];
    id move_ease_in = [EaseIn actionWithAction:[[move copy] autorelease] rate:3.0f];
    [someSprite runAction:move_ease_in];

EaseOut도 동일한 방법으로 구현할 수 있다. 단, rate값이 크면 클 수 록 처음에 실행되는 애니메이션의 속도가 빨라지고 중간에 이동하는 속도는 급격히 떨어진다.

다음은 EaseIn/EaseOut이 실행되는 화면이다.

맨 위는 EaseIn을 두번째는 EaseOut을 세번째는 비교를 위해 기본 속도의 애니메이션을 출력한 것이다. 

(용량상 캡춰를 짧게 해서 잘 모를지도 모른다. 그럴 경우에는 밑에 소스를 첨부했으니 실행해 보자.)

3.2 EaseInOut

EaseInOut은 EaseIn과 EaseOut을 연속해서 실행하는 것과 동일한 결과를 얻을 수 있다. 처음에는 느리게 실행되었다가 점점 속도가 빨라졌다가 다시 점점 느려지는 애니메이션이 구현된다. 

다음은 실행되는 화면이다.

처음은 비율을 3.0f로 했을 경우이고 두번째는 5.0f로 했을 경우이다. 어떻게 차이가 있는지 비교해 볼 수 있다. 

3.3 EaseSineIn / EaseSineOut

EaseSineIn과 EaseSineOut은 EaseIn과 EaseOut의 rate를 Sine값으로 대체한 것이다. 그래서 Sine그래프처럼 처음에는 느리게 실행되다고 점점 빨라지다가 다시 느려지고, 말로 설명을 하려니까. 좀 힘이 든다. ㅜㅜ. 

다음의 이미지는 실제로 SineIn과 SineOut을 할 때 식의 그래프이다.

빨간색이 SineIn의 애니메이션의 속도 변화값이고, 파란색이 SineOut의 애니메이션의 속도 변화값이다. 그리고 검은색은 Rate가 1일 때 일반적인 속도를 나타낸 것이다. 
이 그림을 보면 대충 짐작하겠지만 SineIn은 기본 애니메이션보다 느리게 출발하지만 점점 빨라지고, SineOut은 처음에는 빨리 출발하지만 점점 느려진다.

다음에 실행되는 화면을 추가할 테니 보시면서 잘 이해하길 바란다. ^^;;;


구현하는 방법은 다음과 같이 단순히 속도 조절을 원하는 Action을 입력받는다.

    id move = [MoveBy actionWithDuration:3 position:ccp(350,0)];
    id move_ease_in = [EaseSineIn actionWithAction:[[move copy] autorelease]];
    [someSprite runAction:move_ease_in];

다음은 실행되는 화면이다.

위의 것이 EaseSineIn이고 중간의 것이 EaseSineOut이고 마지막의 것이 기본 속도로 움직이는 것이다. 

3.4 EaseSineInOut

EaseSineInOut은 EaseSineIn과 EaseSineOut을 합쳐놓은 것과 같은 속도로 애니메이션을 구현하고 이를 계산하는 식의 그래프는 다음과 같다. 

구현하는 방법은 EaseSineIn이나 EaseSineOut과 동일하다.

다음은 실행되는 화면이다. 

3.5 EaseExponential

EaseExponential은 영어를 해석하자면 지수적인이란 접미어가 붙었는데 말그대로 지수로 애니메이션의 속도가 변한다. 그러므로 급격히 빨라지거나 급격히 느려지는 것을 구현할 때 사용하면 된다. 
다음은 EaseExponentialIn과 EaseExponentialOut의 속도 계산식을 그래프로 그린 것이다. 

빨간색이 EaseExponentialOut을 파란색이 EaseExponentialIn의 속도 변화를 그린 것이다. 그래프를 봐서 쉽게 이해되지 않는다면 다음 애니메이션을 참고해보자.

구현하는 방법은 EaseSine과 동일하게 속도를 변화하려는 Action만을 다음과 같이 입력하면 된다. 

    id move = [MoveBy actionWithDuration:3 position:ccp(350,0)];
    id move_ease_in = [EaseExponentialIn actionWithAction:[[move copy] autorelease]];
    [someSprite runAction:move_ease_in];

다음은 실행하는 화면이다.

 맨위가 EaseExponentialIn이고 두번째가 EaseExponentialOut이고 세번째에 비교를 위해서 기본 속도의 애니를 추가했다.

3.6 EaseExponentialInOut

EaseExponentialInOut 은 EaseExponentialIn과 EaseExponentialOut을 연속해서 실행시킨 것과 동일한 기능을 한다. 먼저 처음에는 느리게 시작되다가 갑자기 빨라지다가 목적지에 거의 도달해서 갑자기 느려진다. 초기위치에 도달위치를 알려주고 순간이동과 같은 경우를 구현하고자 할 때 사용하면 좋을 것 같다. 

실행하는 방법은 EaseExponentialIn이나 EaseExponentialOut과 같다. 

3.7 Speed

Speed는 Action의 속도를 중간 중간에 변경할 때 유용하게 사용할 수 있다. 초기에 생성시에 [Speed actionWithAction:speed:]로 해당 Action을 speed파라미터로 입력된 속도로 일정하게 애니메이션을 동작시키다가 [speedAction setSpeed:]로 해당 애니메이션 동작 속도를 변경할 수 있다. API에 보면 슬로모션이나 빠른 건너뛰기를 할 때 유용하게 사용할 수 있다고 합니다. 

다음은 점프하면서 회전하는 이미지를 1초마다 Scheduler를 통해서 속도를 변경시키는 예제이다. 매 초마다 변경할 속도는 랜덤한 값으로 설정하도록 설정한 예제이다.

- (void)onEnter
{
    [super onEnter];

    // rotate and jump
    IntervalAction *jump1 = [JumpBy actionWithDuration:4 position:ccp(-400,0) height:100 jumps:4];
    IntervalAction *jump2 = [jump1 reverse];
    IntervalAction *rot1 = [RotateBy actionWithDuration:4 angle:360*2];
    IntervalAction *rot2 = [rot1 reverse];

    id seq3_1 = [Sequence actions:jump2, jump1, nil];
    id seq3_2 = [Sequence actions: rot1, rot2, nil];
    id spawn = [Spawn actions:seq3_1, seq3_2, nil];
    id action = [Speed actionWithAction: [RepeatForever actionWithAction:spawn] speed:1.0f];
    [action setTag: kTagAction1];

    [someSprite runAction:action];

    [self schedule:@selector(altertime:) interval:1.0f];    // schedule을 등록한다.
}

- (void)altertime:(ccTime)dt
{
    id action = [someSprite getActionByTag:kTagAction1];

    [action setSpeed: CCRANDOM_0_1() * 2];
}

4. Mics Actions

4.1 CallFunc

CallFunc는 callback 메소드를 호출해서 실행시킨다. Sequence로 애니메이션을 다 구현한 후에 메소드를 실행시키려도 할 때 유용하게 사용할 수 있다. 
CallFunc는 [CallFunc actionWithTarget:selector:]를 사용해서 callback메소드를 입력하는 Action을 만들 수 있다. 

다음은 가로로 200이동한 후에 Callback을 호출하는 예제이다. 

-(void) onEnter
{
    [super onEnter];
    
    id action = [Sequence actions:
                 [MoveBy actionWithDuration:2 position:ccp(200,0)],
                 [CallFunc actionWithTarget:self selector:@selector(callback)],
                nil];
    [someSprite runAction:action];
}

-(void) callback
{
    [tamara setVisible:YES];
}

4.2 Orbit(궤도)

Orbit는 화면의 가운데를 중심으로 하는 구형의 좌표계에서 해당 Sprite를 궤도를 따라 움직이게 하는 Action이다. Orbit의 구현은 다음의 메소드를 사용한다. 
    [OrbitCamera actionWithDuration:        // 애니메이션 구현 시간
                        radius:deltaRadius:        // 시작지 및 목적지의 거리(반경) - 원근을 표시할 때 사용하면 좋음
                        angleZ:deltaAngleZ:        // Z축의 시작지 및 목적지 각도
                        angleX:deltaAngleX:        // X축의 시작지 및 목적지 각도

Orbit 구현은 구형 좌표계가 익숙하지 않으니까 이해하기가 쉽지가 않다. 다음의 예제를 가지고 값을 바꿔가면서 실행해보면 어느 정도는 이해가 될 것이다. 

    id orbit = [OrbitCamera actionWithDuration: 2 radius:0.5f deltaRadius:1 angleZ:0 deltaAngleZ:180 angleX:0 deltaAngleX:0];
    id action = [Sequence actions:orbit, [orbit reverse], nil];
    [someSprite runAction:action];

이제 Cocos2d로 구현할 수 있는 대부분 애니메이션의 Action을 알아봤다. 어떤 것이든 지금까지 배운 것을 다 조합하면 다 구현할 수 있을 것이다. 마지막으로 3번째 애니메이션 구현의 예제를 추가하겠다. SpriteTest3.zip 이것은 Cocos2d Test의 sample예제를 강좌를 위해서 편집한 것이다. 그럼 열심히 공부하시길... 

다음에는 터치이벤트를 받아서 처리하는 법을 배우겠다. 머 다들 알겠지만 간단히 훌른다는 기분으로 준비하려고 한다. 

그럼 다음 강좌를 기대하시라... ^^

 역시 글을 쓴다는 것은 어려운 것 같다. 이번에도 시간이 자료를 준비하는데 꽤 많은 시간이 소요됬다. 그래도 재미있는 기능들이 많이 있으니까. 기대하시라. 그런데 강좌를 쓰다보니까. 상당히 길어서 2,3으로 끊어서 여기에 연재하기로 결정했다. 그래서 이번에는 유래없이 연이어 두개의 강좌글이 올라갈 것이다. ㅋㅋ

이번에는 그리 어렵지않게 이해할 수 있을지 모르겠지만 다음 장은 좀 어려우니까. 잘 보고 이해하길 바란다. 그럼 강좌를 시작하겠다. 

Cocos2d로 애니메이션 구현하기 2

2. Composable Actions

Composable Actions는 전 시간에 배웠던 Transformation Actions를 여러개를 순차적으로 또는 동시에 같이 애니메이션을 실행시키는 것을 말한다. 예를 들자면 빙빙 돌면서 특정 위치로 이동을 한다던가.. 점점 커지면서 사라진다던가 또는 커지고나서 다른 위치로 이동한다음 다시 원래의 상태로 돌아가는 순차적인 애니메이션 등을 구현할 수 있다. 
실행시키는 방법은 Transformation Action을 만든 방식과 동일하다. 단 만들 때 여러 Action들을 조합하므로 Array를 생성하는 방식으로 만들어야 한다. 다음과 같이 말이다.

    id action = [Sequence actions:
                 [MoveBy actionWithDuration: 2 position:ccp(240,0)],
                 [RotateBy actionWithDuration: 2 angle: 540],
                 nil];
                
이제 Composable Actions의 종류별로 하나씩 알아보도록 하자.

2.1 Sequence

이는 순차적으로 등록된 Action들을 실행시키게 하는 것이다. Action인 A, B, C를 차레로 등록했다면 A Action이 끝난 뒤에 B Action이 실행되고, B Action이 끝난 뒤에 C Action이 실행되는 식이다. 그리고 눈치가 빠르신 분은 알겠지만 A, B등 입력되는 Action이 역시 Composable Actions이어도 된다. 그래서 다음과 같은 것도 가능하다. (다음은 설명을 위해서 로직을 간단히 한거다.)

    id seq = [A, B, C, nil] : A -> B -> C 실행

    id subSeq = [B, D, E, nil];
    id seq = [A, subSeq, C, nil]; // 이는 A를 실행한 후에 subSeq에 등록된 B -> D -> E를 실행하고 나서 다시 E를 실행시킨다.

이제 실제로 코딩된 예제를 보자. 다음은 현재 위치에서 가로로 240만큼 이동한 후에 제자리에서 540를 돌는 예제이다.

    id action = [Sequence actions:
                 [MoveBy actionWithDuration: 2 position:ccp(240,0)],
                 [RotateBy actionWithDuration: 2 angle: 540],
                 nil];

    [someSprite runAction:action];

그리고, 주의 해야할 것이 NSArray를 사용해 봤으면 알겠지만 Composable Actions는 내부에서 NSArray로 관리되기 때문에 배열의 끝을 nil로 꼭 알려줘야 한다. 그렇지 않으면 실행 시에 에러난다.

2.2 Spawn

Spawn 은 등록된 모든 Action들을 동시에 실행시키는 Action이다. 즉, 점점 커지는 액션과 이동 액션을 등록했을 경우, 점점 커지면서 해당 위치로 이동을 한다. 그런데 여기서 주의해야할 것은 시작 시간이 같은 것이지 애니메이션이 끝나는 시간은 각각의 Action에서 지정한 시간에 따라 천차 만별이 될 수 있다. 개발을 할 때 동시에 애니의 끝까지 완료되게 하고 싶다면 각각의 Action들의 애니메이션 시간을 동일하게 해줘야 한다. 만약, 끝나는 시간이 다른 Spawn Action을 Sequence Action의 element로 등록을 했다면 가장 애니메이션이 긴 액션을 완료한 후에 다음에 등록된 Action이 실행된다.

다음은 Spawn을 사용한 예제이다. Sequence와 동일한 방식으로 사용할 수 있다.

    id action = [Spawn actions:
                 [JumpBy actionWithDuration:2 position:ccp(300,0) height:50 jumps:4],
                 [RotateBy actionWithDuration: 2 angle: 720],
                 nil];

    [someSprite runAction:action];

2.3 Reverse

처 음엔 이 Action은 왜 있을까라는 생각도 했지만, 아주 유용하게 쓸모있는 Action이다. Action을 반대로 실행하게 한다. 그러니까. 만약, A에서 B로 이동하는 Action을 다음과 같이 reverse를 호출하면 B에서 A로 이동하게 된다. 

    id action = [MoveTo actionWithDuration:1 position:ccp(250, 250)];
    id reverseAction = [action reverse];

만약, Sequence와 다음에 배우게 될 Repeat이나 RepeatForever를 사용한다면 스타크래프트의 순찰지정과 같이 무한반복도 가능한다.

다음은 Sequece를 활용해서 가로로 250 이동하고 나서 세로로 50 이동한다음 다시 처음위치로 원위치되는 애니메이션을 구현한 예제이다. 간단하게  [seq reverse]로 원래 위치로 이동시킬 수 있다.

    id move1 = [MoveBy actionWithDuration:1 position:ccp(250,0)];
    id move2 = [MoveBy actionWithDuration:1 position:ccp(0,50)];
    id seq = [Sequence actions: move1, move2, [move1 reverse], nil];
    id action = [Sequence actions: seq, [seq reverse], nil];

    [someSprite runAction:action];

2.4 DelayTime

DelayTime은 지정된 시간동안 대기시키는 Action이다. Sequence로 각 Action들을 등록할 때 일정시간 동안 지연효과를 줄 때 아주 유용하게 사용할 수 있다. 다음과 같이 초단위 시간으로 지연시킬 수 있다.

    [DelayTime actionWithDuration:초단위 시간]; 

다음은 DelayTime을 사용해서 가로로 150이동했다가 2초동안 지연후 다시 가로로 150이동하는 애니메이션을 구현한 예제이다.

    id move = [MoveBy actionWithDuration:1 position:ccp(150,0)];
    id action = [Sequence actions: move, [DelayTime actionWithDuration:2], move, nil];

    [someSprite runAction:action];

2.5 Repeat, RepeatForever

Repeat과 RepeatForever는 단어에서도 볼 수 있듯이 Repeat은 지정한 횟수만큼 반복하는 것이다. RepeatForever는 영원히 등록된 Action들을 반복시키는 Action이다.
Repeat는 횟수를 지정하기 위해서 다음과 같이 times 파라미터가 추가되지만 RepaetForever는 반복할 Ation들을 등록하는 파라미터만 입력하면 된다.

    [Repeat actionWithAction:times:]
    [RepeatForever actionWithAction:]

다음은 Reverse시에 사용한 것을 Repeat을 사용해서 3번 반복 시키는 예제이다.

    id move1 = [MoveBy actionWithDuration:1 position:ccp(250,0)];
    id move2 = [MoveBy actionWithDuration:1 position:ccp(0,50)];
    id seq = [Sequence actions: move1, move2, [move1 reverse], nil];
    id action = [Repeat actionWithAction:[Sequence actions: seq, [seq reverse], nil]
                                   times:3];

이를 무한 반복 시키려면 다음 같이 사용하면 된다.

    id action = [RepeatForever actionWithAction:[Sequence actions: seq, [seq reverse], nil]];

여기까지 간단하게 Cocos2d의 Composable Actions에 대해서 알아봤다. 예제를 SpriteTest2.zip  보면서 실행해보면 쉽게 이해할 수 있을 것이다. 

 저번 주에 한주 강좌를 올리지 않았더니 이번주에 만드는 데 좀 힘들었습니다. ^^; 한주 쉬었더니 역쉬 다시 시작하기 힘들더군요.

그래도 강좌를 기다리신다는 쪽지를 보내신 분도 있고 제 글을 읽어주신다니 뿌듯할 뿐입니다. 

이번에는 기본적인 애니메이션을 구현하는 방법에 대해서 알아보겠습니다. 원래 움직이는 것이라 이미지를 많이 넣어야 하는데 이미지를 화나하나 캡춰하는 것이 좀 힘들더군요. 그래도 소스를 첨부했으니 해당 소스를 보시고 하나씩 따라하시면 쉽게 이해하실 수 있을 겁니다. 

자 그럼 본격적으로 강좌를 시작하겠습니다. 

Cocos2d로 애니메이션 구현하기 1

Cocos2d에서 애니메이션은 Sprite와 Action을 사용해서 구현할 수 있다. 내가 Cocos2d로 제작을 결정하게 했던 가장 큰 이유가 애니메이션을 쉽게 구현할 수 있다는 것이었다. Cocoa로 애니메이션을 구현하려면 여러가지 설정을 많이 해줘야 한다. 물론 랩핑을 해서 간단하게 만들 수 있지만 필요할 때마다 매번 만들어 줘야 한다는 것은 여간 불편한 것이 아니다. 그런데 Cocos2d는 이러한 것들을 단순히 Action을 상속한 클래스들을 사용해서 해당 애니메니션의 모션을 정의해 준 다음에 runAction을 호출해주면 애니메이션이 간단하게 구현된다. 뭔가 짜릿함을 느끼는 순간이다. (나만 그런가, 해킨토시에서 처음으로 Hello의 동영상을 음성과 함께 볼 때의 그 희열과 짜릿함과 같은 느낌이었다. ㅋㅋㅋ)

Cocos2d에서는 애니메이션을 편의상 다음과 같이 4개의 Action군으로 분류를 했다. 

1. Transformation Actions
2. Composable Actions
3. Ease Actions
4. Mics Actions

어짜피 편의상 분류를 했기 때문에 이해할 때만 이런식으로 구분했구나를 이해하고 사용할 때는 아무렇게나 마구 써도 상관없다. 어짜피 모두다 Action 클래스를 상속했기 때문에 모두다 결합해서 사용할 수 있기 때문이다.

애니메이션 구현은 위에서도 말했듯이 정말 간단한데 먼저 action 인스턴스를 생성한다. 

    id actionTo = [MoveTo actionWithDuration:2.0f position:ccp(s.width - 40, s.height - 40)];

여 기서는 MoveTo를 예시로 했는데 다른 것들도 비슷하게 생성할 수 있다. actionWithDuration은 애니메이션을 동작 시간을 초단위로 입력한다. 위 예제는 해당 위치까지 2초 동안 ccp(s.width - 40, s.height - 40)로 이동하라고 정의하는 것이다. 

그런다음에 이런 action 인스턴스를 실행시키려면 움직이려고 하는 Sprite의 runAction을 호출해준다.

    [someSprite runAction:actionTo];

이렇게 입력되는 순간부터 someSprite는 움직이기 시작해서 2초의 시간을 두고 해당 위치로 이동을 한다. 
전 에 내가 Java로 모바일 게임을 제작할 때 애니메이션을 구현할 때에는 매 프레임시간마다 해당 위치를 계산해서 매번 그려줬어야 하는데 Cocos2d는 그럴 필요없이 간단히 위와 같이 해주면 중간 계산도 알아서 해서 화면에 출력해 준다. 정말 대단하지 않은가...... ㅋㅋ

그리고 애니메이션은 Sprite에 줄 수 있기 때문에 여러개의 Sprite가 동시간에 각각 다른 움직임을 처리할 수 있다. 
이렇게 구현할 수 있는 애니메이션의 종류가 이동시키기, 회전하기 등등 여러개가 있는데 그것들을 몽땅 하나씩 살펴보도록 하자.

1. Transformation Action

Transformation Action은 Sprite의 이동, 회전 등 일회성의 움직임이나 효과를 분류해 놓은 것들이다. 

1.1 Move

1.2 Rotate

1.3 Scale

1.4 Jump

1.5 Bezier(곡선)

위의 그림에서와 같이 파란색으로 된 부분을 point로 start, controlPoint_1, controlPoint_2, end의 네군데를 point로 설정하면 빨간색으로 된 곡선을 이동 경로로 Sprite가 이동하게 된다. 
그 런데 여기서 Sprite가 위치한 현재 위치에서 설정한 상대적인 위치로 이동한다, 즉 다시 말해서 0,0에서 시작한다면 위의 그림의 빨간색 경로로 이동을 하지만 100,100에서 시작을 한다면 다음과 같이 중간의 경로는 변경없이 시작위치만 변경된 경로로 이동을 하게된다.

1.6 Blink

1.7 Fade

1.8 Tint

1.9 Animate

지금까지 아주 기본적인 애니메이션을 구현하는 법을 공부해 봤다. 
이것만 가지고도 같단한 애니메이션을 구현할 수 있는데 좀 더 복잡한 Sprite가 커지면서 이동하는 등의 애니메이션을 구현을 하려면 몇가지만 더 알면 된다. 이것은 다음에 알아보려고 한다. 

위에서 설명한 내용들을 Cocos2d의 SpriateTest를 가지고 강좌에 맞도록 수정한 소스를 첨부합니다. 

공부하시면서 보면 쉽게 이해하실 수 있으실 것입니다. SpriteTest.zip 

 ㅎㅎ 다시 Cocos2d의 강좌가 시작되었습니다. 

열심히 쓰기는 했는데 다들 어떻게 받아들이고 있는지 모르겠네요. 흠흠.. 피드백이 없으니 별 도움이 안되었는지 아님 글만 보고 만 것인지.. 암튼 이번주에는 Cocos2d를 사용해서 메뉴를 만드는 법을 배워보도록 합시다.

이번에도 설명글이 좀 많으니까 주의깊게 읽어야 할 것입니다. offline모임에 나오면 실제로 어떻게 구현하는지 볼 수 있을 것입니다. 

1 메뉴 만들기 

1.1 기본 메뉴

Cocos2d에서 메뉴 관련 클래스는 Menu, MenuItem, MenuItemFont, MenuItemAtlasFont, MenuItemFont, MenuItemImage, MenuItemToggle이 있다. 이 중에서 기본적으로 사용하는 것은 Menu, MenuItem, MenuItemFont 정도이고, 다음에 설명할 이미지를 사용한 메뉴를 만들 때에는  MenuItemImage 클래스를 사용한다.

기본 메뉴는 일반적인 글씨를 사용해서 메뉴를 생성하는 것이다. 글씨를 사용하기 때문에 어떤 폰트의 어떤 크기를 사용할지를 미리 설정해야 한다. 그러기 위해서 다음과 같이 MenuItemFont를 설정해 둔다. 

    [MenuItemFont setFontSize:30];
    [MenuItemFont setFontName: @"Courier New"];

여기서 setFontSize와 setFontName은 static변수이기 때문에 한번 설정해 놓으면 다시 변경하기 전까지 계속 같은 값을 참조할 수 있다. 
이제 이 폰트를 사용하는 메뉴는 다음과 같이 생성한다.

    MenuItem *item1 = [MenuItemFont itemFromString: @"Start" target:self selector:@selector(menuCallback:)];

itemFromString 에 표시할 메뉴의 내용을 target에는 메뉴가 click되었을 경우에 호출된 메소드를 가지고 있는 클래스의 인스턴스를, selector에는 메뉴가 click되었을 경우에 호출된 메소드의 주소를 입력해 준다. 메소드의 주소는 @selector를 통해서 가져온다.

이렇게 만들어진 MenuItem *item1을 Menu에 추가하고 다시 이 Menu를 화면에 표시할  Layer에 추가해야 메뉴를 화면에 출력할 수 있다. 

    Menu *menu = [Menu menuWithItems: item1, nil];

    [someLayer addChild: menu];

메뉴는 위와 같이 menuWithItems를 사용해서 각각 생성된 MenuItem의 하나 하나 넣어주고 마지막을 nil로 채워주면 해당 값들이 Array형태로 차례로 입력되어져서 화면 출력에 사용된다. 간단하지 않은가? 그런데 여기서 끝나는 것이 아니라 이제 Start라는 메뉴를 만들었는데 이 메뉴가 click 되었을 경우에 호출될 메소드를 구현해 주어야 한다. 위에서 menuCallback 을 호출하도록 했으니까. 다음과 같이 menuCallback 메소드를 만들어 준다.

-(void) menuCallback: (id) sender
{
    NSLog(@"called start menu");
}

1.2 이미지 메뉴 만들기

이미지 메뉴는 MenuItemImage를 사용해서 정의할 수 있다. 이미지 메뉴를 사용하기 위해서는 일반 이미지와 메뉴가 선택되어져서 눌려졌을 경우의 이미지가 있으면 된다. 추가적으로 비활성화 되었을 경우에 보여질 이미지도 추가할 수 있다. 

    MenuItemImage *item1 = [MenuItemImage itemFromNormalImage:@"normalImage.png" selectedImage:@"selectedImage.png" target:self selector:@selector(menuCallbackBack:)];

normalImage.png는 일반적으로 보여질 이미지를 selectedImage.png는 click되었을 경우에 보여질 이미지를 입력해 준다. target은 기본 메뉴에서와 동일하게 click되었을 경우에 호출될 메소드가 있는 클래스의 인스턴스를 selector를 호출될 메소드명을 입력한다. 이 메뉴도 일반 메뉴와 동일하게 [Menu menuWithItems:]를 통해서 입력한다.

1.3. 토글 메뉴

토 글 메뉴는 MenuItemToggle 클래스를 사용한다. MenuItemToggle클래스는 하나의 컨테이너로 기본 MenuItem 를 배열로 입력받아서 매번 click시마다 순서대로 다음 메뉴를 표시하게 해준다. 예를 들어서  "ON", "OFF"를 각각 표시하는 메뉴일 때 다음과 같이 사용하면 된다. 

    [MenuItemToggle itemWithTarget:self selector:@selector(menuCallback:) items:
        [MenuItemFont itemFromString:@"ON"],
        [MenuItemFont itemFromString:@"OFF"], nil];

그 리고 여기서 callback으로 호출되는 -(void)menuCallback:(id)sender 에서 sender는 현재 연결된 MenuItemToggle이 입력된다. 그리고 [sender selectedItem]를 호출하면 현재 click을 통해서 변경된 MenuItemFont가 반환된다. 그러니까 다시 말을 하자면, ON일 때 click을 하면 OFF로 변경이 되는데 이 때 [sender selectedItem]으로는 [MenuItemFont itemFromString:@"OFF"] 로 생성된 클래스가 반환된다. ^^ 설명이 잘되었는지 모르겠다.

2. 설정하기

등록된 MenuItem들은 위지를 조절할 수 있고, 수직, 수평정렬을 할 수 있고 메뉴의 행과 열의 개수도 다음과 같은 메소드들을 사용해서 설정할 수 있다.

2.1 출력 위치 조절

메뉴는 기본적으로 스크린의 가운데를 기점으로 상하 또는 좌우로 동일한 간격으로 메뉴들이 위치하게 된다. 그러므로 메뉴를 특정한 위치에 시키고 싶다면 Menu의 setPosition의 메소드를 사용하거나 position을 직접 제어해서 Menu의 중앙의 값을 설정하면 된다. 
만약 각각의 MenuItem들을 각기 다른 위치에 위치시키고 싶다면 Menu에 MenuItem을 하나만 입력하고 각각의 위치를 설정하면 된다. 

다음 이미지는 메뉴를 구성할 때 간격과 위치에 대한 설명이미지이다.

2.2 수직 정렬

수직 정렬은 alignItemsVertically으로 postion값을 중심으로 KDefaultPadding(5) 간격으로 나열된다. 
각각의 간격을 다른 값으로 하려면 alignItemsVerticallyWithPadding:(float) padding 메소드로 간격값을 실수로 입력하면 된다.

2.3 수평 정렬

수평 정렬은 alignItemsHorizontally 메소드로 수직정렬과 마찬가지로 position을 중심으로 kDefaultPadding간격으로 나열된다. 
이 역시 각 간격은 alignItemsHorizontallyWithPadding: (float) padding 메소드로 간격값을 변경시킬 수 있다.

2.4 Column 개수 설정

만약에 다음 그림과 같이 일률적으로 정렬만 되는 메뉴를 행마다 다른 수로 정렬시키고 싶다면 alignItemsInColumns: (NSNumber *) columns, ... 메소드를 사용해서 각 행마다 개수를 다음과 같이 입력한다.

    [menu alignItemsInColumns:
     [NSNumber numberWithUnsignedInt:2],  // Sound, Music
     [NSNumber numberWithUnsignedInt:2],  // On, On
     [NSNumber numberWithUnsignedInt:2],  // Quality, Volume
     [NSNumber numberWithUnsignedInt:2],  // High, 66%
     [NSNumber numberWithUnsignedInt:1],  // Go Back
     nil
    ]; // 2 + 2 + 2 + 2 + 1 = total count of 9

2.5 Row 개수 설정

Row도 Column과 동일한 방법으로 설정할 수 있다. 이 부분은 각자 연구해 보기 바란다.

3. 응용하기

3.1 이미지 메뉴 크기 변경

이미지 메뉴의 크기는 CocosNode에 정의된 속성인 scaleX와 scaleY를 이용하면 된다. 각 값은 실수값으로 1.0f는 실제 배율의 크기이고 이 값보다 작을 경우에는 작게 클 경우에는 큰 이미지로 변경된다. 

     MenuItemImage *item1 = ...;
    item1.scaleX = 1.5f
    item1.scaleY = 0.5f

 기본이미지

 scaleX = 0.5f

 scaleY = 0.5f

 scaleX = 1.5f

 scaleY = 1.5f

3.2 메뉴 비활성화 시키기

메뉴를 비활성화 시키기 위해서는 isEnabled를 NO로 설정하면된다. 

    MenuItem *item1 == ...;
    item1.isEnabled = NO;

메뉴를 비활성화 시키면 다음 그림과 같이 선택도 안되지만 Opacity값이 줄어든채 색으로 설정된다.

 (비활성화 된 경우)

 (활성화 된 경우)

3.3 종료 메뉴 만들기

메뉴가 선택되었을 때 다음을 호출하면 어플이 종료된다. 그런데 이 명령은 iPhone 2.2.1이하에서만 동작한다. 3.0에서는 동작하지 않는데 아는 분은 답글 부탁한다.

    [[Director sharedDirector] end];
    if( [[UIApplication sharedApplication] respondsToSelector:@selector(terminate)] )
        [[UIApplication sharedApplication] performSelector:@selector(terminate)];

Cocos2d에서 제공하는 테스트용 소스를 좀 편집해서 강좌에서 설명한 내용을 다음과 같이 만들어봤다. 소스(MenuTest.zip)를 보면 좀더 이해하기 쉬울 것이다. 

<메인 메뉴>

<MenuItemImage 클래스로 구현>

<MenuItemToggle 클래스로 구현>

다음에는 Sprite의 사용법에 대해서 알아보겠습니다. 애니메이션 구현이 주를 이룰 것 같은데 두번의 강좌를 통해서 Cocos2d의 애니메이션 구현 방법을 알아보겠습니다. 다음 강좌도 기대하시라...^^a