[MammothHunting] - Cocos2D를 사용한 아이폰 게임 개발 튜토리얼 1

Cocos2D-iPhone 엔진은 원래 Python으로 작성된 2D 기반의 게임 라이브러리 인데 이 것을 아이폰 용으로 포팅한 것이 바로 Cocos2D-iPhone이다. 아이폰 게임 개발에 관심을 갖게 된다면 가장 먼저 접합게 되는 게임 엔진일 것이다. Cocos2D는 모바일 환경에서 그래픽 출력을 위한 OpenGL ES 및 사운드 출력을 위한 OpenAL 라이브러리를 손쉽게 게임 개발에 사용할 수 있도록 래핑한 것이다. 물론 다양한 기능을 지원한다. 이에 대한 내용은 사이트에서 확인 바란다.

단 0.8.X  버전에서 0.99.0(cocos2d for iPhone v0.99.0 Release Notes) 버전으로 업그레이드 되면서 CC라는 네임스페이스를 사용하기 시작했다는 점에 주의해야 한다. 0.99.0 이전의 인터넷 자료를 참고한다면 샘플 소스에서 차이가 날 것이다.

이와 관련된 내용과 기본적인 사용법(Hello World, Hello Actions, Hello Events 등등) 등을 공부하고 나면 바로 다음 단계가 궁굼해 진다. "그럼, 어떻게 게임을 만들지?", 물론 사이트에 샘플 게임 소스가 공개되어 있긴 하지만 이제 막 게임 개발에 입문한 개발자에게는 그리 녹녹치 않다.

부분적으로 API를 훓어 본다고 해결될 문제도 아니다. 이에 대한 가장 좋은 해결책은 최대한 단순한 게임 형태를 살펴보는 것이 전체적인 사용법과 이해도를 높이는데 훨씬 많은 도움이 될 것이다. 

본 포스트는 "How To Make A Simple iPhone Game with Cocos2D Tutorial"의 내용을 한글로 재구성 한 것이며, 좋은 글을 공개해준 저자에게 감사 드린다. 이외에도 게임 개발과 관련된 유용한 정보가 상당히 많다. 기회가 된다면 다른 내용도 이와 유사한 형태로 포스팅해 볼 계획이다.

* 부분적으로 설명이 생략된 부분은 마지막 포스트 하단에 첨부한 샘플 프로젝트로 설명을 갈음한다.

우선 사전 준비부터 시작하자.

1. Cocos2D 다운로드 및 설치(현재 안정 버전: 0.99.1)

2. Cocos2D 템플릿 설치

프로젝트 생성

MammothHunting이라는 이름으로 신규 프로젝트 생성. 물론 Cocos2D 템플릿을 이용한다.

이 상태에서 빌드앤런 하면 다음 화면을 볼 수 있을 것이다. 이미 알고 있는 것처럼 Hello World 예제이다.

이제 게임 개발에 관심을 갖는 단계라면 Xcode의 사용법은 익숙할 것이다. 자세한 설명은 생략한다.

Sprite 추가

* Director, Scene, Layer, Sprite 네 개의 클래스는 Cocos2D에서 게임 화면의 구성을 위한 가장 중요한 것 들이다. 이와 관련된 기본 내용은 숙지하자. 다행히도 미리 고생해 준 분이 계시다.

• 만들어봐요 iPhone 게임 만들기 8 – Cocos2D for iPhone 위키 번역(프로그래밍 가이드)

스프라이트를 추가하기 전에 다음 세 단계를 먼저 진행한다. 물론 기존 템플릿 코드로 진행해도 되지만 생애 최초의 게임을 만드는 마당에 네이밍도 중요하지 않은가? 

첫째, 다음 세개의 그림을 Resources에 추가한다.

둘째, MammothHuntingAppDelegate.m 파일을 열어 applicationDidFinishLaunching: 메소드에서 템플릿이 생성해준 맨 아래의 [[CCDirector sharedDirector] runWithScene: [HelloWorld scene]]; 코드를 다음과 같이 수정한다.

CCScene *scene = [CCScene node];

CCLayer *layer = [MammothHuntingScene node];

[scene addChild:layer];

[[CCDirector sharedDirector] runWithScene: scene];

세째, HelloScene.h와 HelloScene.m 클래스 파일을 삭제한다. 그리고 NSObject의 서브 클래스로 MammothHuntingScene.h와 MammothHuntingScene.m 클래스를 생성한다. 다음은 MammothHuntingScene.h 클래스에서 "cocos2d.h"를 임포트 하고 CCLayer를 상속하도록 수정한다. MammothHuntingScene.m에 다음 init 메소드를 추가하고, 다시 빌드앤런!

-(id) init {

if( (self=[super init] )) {

CGSize winSize = [[CCDirector sharedDirector] winSize];

CCSprite *player = [CCSprite spriteWithFile:@"player.png" rect:CGRectMake(0, 0, 50, 55)];

player.position = ccp(player.contentSize.width/2, winSize.height/2);

[self addChild:player];

}

return self;

}

아마도 문제가 없다면, 다음 화면을 접할 수 있을 것이다.

잘 보이지 않겠지만, 고릴라이다. 인터넷에서 무료로 구할 수 있는 아이콘을 활용했다. 원하는 그림으로 변경해도 튜토리얼을 진행하는 데는 전혀 지장이 없다. 단 그림 사이즈와 rect 사이즈는 동일해야 한다.

여기서 잠깐, 좌표계에 대해서 공부하고 다음 단계로 넘어가자. 화면의 위치를 이동하거나 지정할 때 Cocos2D에서는 좌표계에 주의해야 한다. UIView를 사용하는 일반적인 아이폰 앱은 UIView 좌표계를 사용하며 UIView에서는 좌측 상단(0, 0)이 원점이다. 즉, 오른쪽으로 가면서 x 값이 증가하고 아래로 갈 수록 y 값이 증가한다. 이와는 달리 Cocos2D는 OpenGL을 사용하므로 좌표계의 원첨이 좌측 하단 위로 갈수록 y 값이 증가한다.

위 내용을 그림으로 표현하면 다음과 같다. 나중에 좌표계를 변환해야 하므로 기억해 두어야 한다.

좌표계를 기준으로 플레이어(고릴라)의 위치는 init 메소드에 다음과 같이 설정했다.

player.position = ccp(player.contentSize.width/2, winSize.height/2);

여기서 플레이어(고릴라)의 스프라이트의 앵커포인트(anchorPoint: 고정점)의 x, y 좌표를 위와 같이 설정했다. 앵커 포인트는 모든 변환 및 위치 조작의 중심점인데, 상위 레이어에 부착한 레이어 상의 핀으로 생각하면 된다. 

레이어 관련하여 프레임(frame), 바운드(bounds), 위치(position), 고정점(anchorPoint), 모서리 반경(cornerRadius), 레이어 높낮이(zPosition) 등의 기하 관련 속성에 대한 이해가 전제되어야 하는데, 이는 Core Animation의  Layer Geometry and Transforms 부분을 참고하라.

다음 작업은 배경화면 변경이다. 검정색 배경을 흰색으로 변경할 것이다.

프로젝트에서 MammothHuntingScene.h 클래스 파일을 열어 다음과 같이 CCColorLayer를 상속 받도록 수정한다.

#import "cocos2d.h"

@interface MammothHuntingScene : CCColorLayer {

}

@end

그리고 MammothHuntingScene.m 클래스의 init 메소드의 if 조건을 다음과 같이 수정한다.

if ((self=[super initWithColor:ccc4(255,255,255,255)])) {

이제 다시 빌드앤런 하면 다음 그림과 같이 흰색 배경화면을 볼 수 있을 것이다.

"Cocos2D를 사용한 아이폰 게임 개발 튜토리얼 1"은 이것으로 마무리 하고 "Cocos2D를 사용한 아이폰 게임 개발 튜토리얼 2"에서는 타켓과 총알 발사에 관해서 살표 보겠다. 하나의 포스트로 진행하기에는 내용이 너무 많은 것 같아 4 단계 정도로 나누어서 포스팅할 계획이다.

---

출처 : http://lambert.tistory.com/290