이번에는 Cocos2d가 어떻게 구성이 되어 있는지를 알아보려한다. 그런데 이번 강좌에서는 설명이 많아서 그림이 별로 없어서 지루해 하지 않을까 걱정이 앞선다. 

(글을 쓰면서 느낀건데 처음에는 경어체로 쓰다가 나중에 가서는 점점 구어체를 쓰게 되어서 그냥 내가 쓰기 편하게 구어체로 통일을 하기로 했다. 나중에 편집을 하면서 경어로 변경하는 작업을 하기가 귀찮아 져서다. ^^;;;;, 싸가지 없는 놈이라고 해도 겸허하게 받아들이겠다. )


1. Cocos2d의 특징


1.1 cocos2d는 기본적으로 cocoa frame의 UIView 기반위에서 작동하는 거라서 하나의  UIView와 UIViewController를 AppDelegate에 연결하고 사용하면 된다. 이는 다른 app과는 다른 구조를 가지고 있어서 약간 혼란스러울 수도 있다. 하지만 하나의 UIView만 사용한다는 것만 기억하고 개발을 한다면 문제없을 것이다. 

1.2 cocos2d는 OpenGL을 사용하므로 UIView와 다른 좌표계를 가지고 있다. UIView는 좌측 상단이 (0,0)이어서 오른쪽으로 가면서 x값이 증가하고 아래로 가면서 y값이 증가한다. 하지만 cocos2d는 좌측 하단이 (0,0)이므로 위로 갈수록 y값이 증가한다.

1.3 화면의 개체를 표시하거나 이동시킬 때 position이 일반적인 경우와 같은 왼쪽위가 아니라 중심이기 때문에 주의를 기울여서 계산을 해야한다.


2. Cocos2d의 구조

cocos2d는 CocosNode를 기준으로 Director, Scene, Layer, Sprite의 계층적인 포함관계를 가지고 Action 클래스를 이용해서 애니메이션을 구현한다. 


Director > Scene > Layer > Sprite 

2.1 CocosNode

cocos2d의 모든 클래스는 CocosNode를 최상위 클래스로하고 상속한다. cocos의 NSObject와 같이 클래스간의 최상위 부모로 사용되는 것이다. 이 클래스는 position, scale, visible과 같은 속성들을 가지고 각 오브젝트간의 계층을 구성할 수 있는 add, remove, reorder를 가지고 있다. 또한 하나의 오브젝트가 각기 자체의 schedule을 가지고 있어 개별적으로 작동시킬 수 있다. 

2.2 Director

Cocos2d 에서 신과 같은 존재로 Cocos2d의 세계를 관리하고 관장하는 클래스가 Director이다. 신과 같은 역활을 하지만 Cocos2d가 하나의 영상물을 만드는 것과 비슷하므로 Director라고 이름을 붙였을 것 같다. 여하튼 Director는 말 그대로 영화감독처럼 게임의 흐름을 Scene을 통해서 관리한다. 그리고 Singleton Pattern으로 오로지 하나의 유일한 Director객체를 [Director sharedDirector]로 호출해서 실행할 수 있다.

2.3 Scene

Scene 은 Director의 명령을 받아서 하나의 화면을 구성하게 한다. 게임에서 하나의 배경을 맡는다고 생각하면 될 듯 싶다. 각각의 다른 배경이 필요하다면 서로 다른 Scene을 구성해서 장면을 전환하면 된다. 처음 장면의 시작은 [[Director sharedDirector] runWithScene:scene]; 을 호출해서 실행하고 다음 장면으로 변환은 [[Director sharedDirector] pushScene:nextScene]; 으로 화면을 전환시킬 수 있다. 그런데 메소드명을 자세히 보면 알 수 있듯이 각 Scene의 오브젝트들은 queue로 관리되어 진다. 이전 Scene으로 다시 이동을 하고 싶으면 현재의 Scene을 정리하고 popScene을 호출하면 된다.

2.4 Layer

Layer는 Scene에 포함되는 세부 소품이나 세트라고 볼 수 있다. 두 클래스의 역활을 비슷하지만 Layer와 Scene의 차이점은 사용자의 이벤트를 입력받을 수 있느냐 없느냐의 차이라고 볼 수 있다. Scene은 터치 이벤트를 수신할 수 없지만 Layer는 TouchEventsDelegate 프로토콜을 구현함으로써 터치 이벤트를 수신할 수 있다. 

2.5 Sprite

Sprite 는 영화의 최하위 단에서 실제로 움직이고 작동하는 배우나 물체의 단위이다. 대부분의 화면에서 움직이는 것은 Sprite라고 보면 이해하기 쉬울 것이다. Sprite는 보통 이미지이기 때문에 이미지로 생성되는 부분에서 특화되어 있다. 가장쉽게 생성하는 방법도 initWithFile로 이미지 파일을 resource에서 직접 로드하게 하는 방법이다. 보통 png 이미지를 사용한다. 또한 PowerVR 3D 가속칩에 최적화된 PVRTC 이미지 파일도 사용할 수 있다. 

2.6 Action

Action 은 보통 CocosNode에 움직임을 주게하는 클래스이지만 주로 Sprite를 움직이게 하는데 사용한다. Action은 한번만 실행되는 InstanceAction, 지속적으로 일정시간동안 반복되는 IntervalAction, 그리고 일정시간동안 일정한 패턴을 반복하는 RepeatAction으로 구성된다. 다음은 각각 Action의 종류들이다. 차차 이것들이 어떻게 작동하는지를 배워볼 것이다. 

  • Trasformation Actions : Move, Rotate, Scale, Jump, etc.
  • Composable Actions : Sequence, Spawn, Repeat, Revers.
  • Ease Actions : Exp, Sin, Cubic, etc.
  • Mics Actions : CallFunc, OrbitCamera


3. Hello World!

지금까지 Cocos2d의 기본을 클래스들을 알아보았다. 그러면 이것들을 가지고 프로그래밍의 입문인 "Hello World of Cocos2d."를 화면에 출력해 보자.


첫 강의에서 만든 cocos2d 를 선택해서 HelloCocos2d 프로젝트를 생성해 보자.


Cocos2dAppDelegate.m에서 다음의 내용을 추가해 보자.


----------------------------------------------------------------


#import "Cocos2dAppDelegate.h"
#import "cocos2d.h"

@implementation Cocos2dAppDelegate

@synthesize window;


- (void)applicationDidFinishLaunching:(UIApplication *)application { 
    // UIWidow 개체를 생성
    window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    // Director에서 사용할 View등록
    [[Director sharedDirector] attachInView:window];
    
    // HelloScene 생성
    Scene *helloScene = [Scene node];
    Label *helloLabel = [Label labelWithString:@"Hello World of Cocos2d."
                                      fontName:@"Helvetica" fontSize:20.0f];
    helloLabel.position = ccp(150, 200);    // 위치 지정(가운데를 글자의 가운데 부분을 위치시켜야함)
    [helloScene addChild:helloLabel];
    
    // HelloScene을 실행
    [[Director sharedDirector] runWithScene:helloScene];
    
    // Override point for customization after application launch
    [window makeKeyAndVisible];
}


- (void)dealloc {
    [window release];
    [super dealloc];
}


@end

----------------------------------------------------------------

(Zeroboard에서 소스답게 보이는 법을 모르겠어요.ㅜㅜ)

bold체로 굵게 한 부분이 추가된 부분이다.



이제 build and Go를 실행해 보자.
화면에 다음과 같이 실행되면 제대로 된 것이다. 잘 실행이 안된다면 warning 경고를 무시하지 말고 잘 풀어본다. Objective-C는 동적인 객체 언어라서 warning 이라도 컴파일은 되지만 실행시에 문제가 발생할 수 도 있기 때문이다.


그림 2.png 

(이번강좌에서 처음으로 사용된 이미지이네요. ㅋㅋ)


cocos2d-iphone API는 여기서 찾아보자. 

다음은 메뉴를 생성하는 법을 알아보도록 하자. 기대하시라. ^^


참고 : 이 글을 마이크로소프트웨어 2009년 4월호의 이창신님의 글을 인용했습니다.