Cocos2D 기초 - 출처 : 맥부기 카페

퍼온곳 : http://devdata.tistory.com/71 

일부 미 번역된 곳을 번역하여서 다시 올립니다.

 

 Cocos2D는 아이폰 게임을 만들 때 많은 시간을 절약할 수 있게 해 주는 파워풀한 라이브러리이다. 스프라이트 지원, 멋진 그래픽펙트, 애니메이션, 물리 충돌, 사운드 엔진, 기타 등등 다양한 기능들을 지원한다.

 필자도 Cocos2D를 배우기 시작한 지 얼마 되지 않았기 때문에, 쓸만한 튜터리얼을 찾기 위해 많이 헤매고 다녔다. 하지만 정말 내가 원하는 그런 튜터리얼 - 간단하지만 애니메이션, 충돌, 오디오 등의 기능에 대한 명료한 설명이 있는 - 을 찾기가 무척 어려웠다. 마침내 스스로 간단한 게임을 만들어냈을 때, 나는 내 경험을 바탕으로 하여 다른 초보자들에게 도움이 될 만한 튜터리얼 문서를 쓰기로 마음먹었다.

 이 튜터리얼에서는 Cocos2D로 간단한 아이폰 게임을 만드는 과정을 처음부터 끝까지 훑어볼 것이다. 여러분은 튜터리얼을 그대로 따라올 수도 있고, 아니면 글 마지막에 있는 샘플 프로젝트를 바로 시험해봐도 된다. 보시다시피, 닌자 게임이 될 것이다.

Cocos2D 다운로드와 설치

 구글의 Cocos2D 코드 페이지에서 Cocos2D를 다운받을 수 있다. 이 글이 쓰여질 당시의 최신 버전은 0.99.0-final이다. 이 튜터리얼에서도 이 버전을 사용할 것이다.

 Cocos2D를 다운받았으면 템플릿을 설치해야 한다. 터미널 창을 열고 Cocos2D를 다운로드한 디렉토리로 간 뒤, 다음 명령을 입력한다.

./install_template.sh

 만약 여러분이 맥에 SDK 버전을 여러 개 설치했다든가 해서, XCode가 기본 위치가 아닌 다른 곳에 설치되었다면 명령 뒤쪽에 뭔가 파라미터를 더 붙여줘야 할 수도 있다. 

Hello, Cocos2D!

 그러면 간단한 Hello World 프로젝트로 방금 설치한 Cocos2D 템플릿을 실행해 보자. XCode를 실행하고 cocos2d-0.99.0 Application 템플릿을 골라, 새 Cocos2D 프로젝트를 만든다. 프로젝트 이름은 “Cocos2DSimpleGame” 으로 하겠다.

 프로젝트가 열렸으면 Build and run 을 눌러 빌드하고 실행시키자. 모두 잘 되었다면 다음처럼 시뮬레이터에 실행되는 화면이 나타날 것이다.

 Cocos2D는 게임의 레벨이나 스크린 등을 "씬"(장면)이라는 개념으로 만들어놓고 있다. 예를 들어, 하나의 게임은 크게 보아 첫 메뉴가 나오는 부분, 게임의 주된 플레이가 이루어지는 부분, 그리고 게임오버 되었을 때의 부분 등으로 나눌 수 있을 것이다. 실제 Cocos2D의 씬에서는, 여러분은 여러 개의 레이어(포토샵의 그 레이어와 비슷하다고 생각하면 된다)를 다루게 되고, 각각의 레이어는 스프라이트, 레이블, 메뉴 등등의 "노드"를 포함하게 된다. 노드는 다른 노드를 포함할 수도 있다(예를 들어 스프라이트는 그 안에 자식 스프라이트를 가질 수 있다).

 만약 여러분이 샘플 프로젝트를 보고 있다면, HelloWorldScene 이라는 1개의 씬만이 사용되고 있는 것을 볼 수 있다. 이제 우리는 바로 거기에다 게임 플레이 부분을 만들게 될 것이다. 소스를 열어 보면 씬에 "Hello World"를 보여주는 레이블을 넣는 메소드, 그리고 그 메소드를 초기화하는 코드가 있다. 우리는 이 코드를 없애 버리고, 대신에 스프라이트를 넣을 것이다.

스프라이트 넣기

 스프라이트를 넣기 전에, 당연히 스프라이트를 구성할 그림이 필요해진다. 여러분이 이 그림들을 직접 만들 수도 있지만, 나의 사랑하는 아내가 만들어준 그림들(플레이어, 표창, 적)을 쓸 수도 있을 것이다. 

 그림을 준비했다면, 그것들을 드래그해서 XCode의 Resources 폴더에 넣자. 그리고 “Copy items into destination group’s folder (if needed)” 부분이 체크되어 있는지를 확인하자.

 이제 그림이 준비됐다. 우리는 이제 플레이어가 위치할 곳을 생각해봐야 한다. Cocos2D에서는 왼쪽 아래 지점이 (0,0)이며 거기서부터 오른쪽 위로 갈 수록 X와 Y 좌표가 증가한다는 것을 기억하라. 우리는 이 프로젝트를 가로 모드로 할 것이므로, 가장 오른쪽 위의 좌표는 (480, 320)이 될 것이다.

 또한 우리가 오브젝트의 위치를 정할 때, 그림의 중심을 기준으로 삼는다는 것을 기억하라. 캐릭터를 스크린 왼쪽 끝에서 오른쪽 끝으로 이동시킨다고 할 때, 이동의 위치는 이 중심점을 기준으로 사용하게 될 것이다. 즉,

 - 가로 좌표를 주기 위한 가로 기준점은 [그림의 가로 크기]/2

 - 세로 좌표를 주기 위한 세로 기준점은 [그림의 세로 크기]/2

가 된다는 뜻이다.

 좀 더 이해를 쉽게 하기 위해 다음 그림을 보자.

 그럼 이제 실제로 만들어 보자. XCode에서 옆의 Classed 폴더를 열고 HelloWorldScene.m 파일을 선택한 뒤, 코드 편집창에서 init 메소드 부분을 다음과 같이 변경한다.

-(id) init {   if( (self=[super init] ))  { CGSize winSize = [[CCDirector sharedDirector] winSize]; CCSprite *player = [CCSprite spriteWithFile:@"Player.png" rect:CGRectMake(0, 0, 27, 40)]; player.position = ccp(player.contentSize.width/2, winSize.height/2); [self addChild:player]; }   return self; }

 컴파일하고 실행해 보면 스프라이트가 잘 나타날 것이다. 하지만 아직 배경이 까맣게 나타나고 있다는 점도 알 수 있다. 우리의 닌자 캐릭터를 잘 보이게 하기 위해서는 아무래도 하얀 배경이 훨씬 나을 것이다. Cocos2D에서 이것을 간단하게 처리하고 싶으면 CCColoredLayer 클래스를 이용해 레이어의 배경색을 원하는 색으로 바꾸어 주면 된다. 바로 실험해보자. HelloWorldScene.h 파일을 열고 HelloWorld 인터페이스를 아래와 같이 선언한다.

@interface HelloWorld : CCColorLayer

 그 다음 HelloWorldScene.m 파일을 열고 init 메소드를 조금만 더 수정해주면 배경을 흰색으로 만들 수 있다.

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

 수정이 끝났으면 빌드하고 실행해 보자. 이제 스프라이트가 흰 배경에 서 있는 모습이 보일 것이다. 우리의 닌자는 이제 싸울 준비가 됐다!

목표물 움직이기

 다음으로 우리는 목표물, 즉 적들이 화면에 나타나 우리의 닌자를 공격해오도록 해야 한다. 이게 재미있게 느껴지려면 당연히 적들이 움직여야 할 것이다. 자, 그러면 적들이 화면 오른쪽에서 나타나 왼쪽으로 이동해 오도록 만들어 보자.

 다음 코드를 init 메소드 바로 앞에 넣는다.

-(void)addTarget  {   CCSprite *target = [CCSprite spriteWithFile:@"Target.png" rect:CGRectMake(0, 0, 27, 40)];   // 적들이 어떤 Y 좌표에서 나타날 것인지를 결정한다 CGSize winSize = [[CCDirector sharedDirector] winSize]; int minY = target.contentSize.height/2; int maxY = winSize.height - target.contentSize.height/2; int rangeY = maxY - minY; int actualY = (arc4random() % rangeY) + minY;   // 적들을 화면 오른쪽 끝에서 나타나게 만든다 // 위쪽에서 계산한 결과에 따라 Y 좌표는 랜덤하게 나오도록 한다 target.position = ccp(winSize.width + (target.contentSize.width/2), actualY); [self addChild:target];   // 적들의 스피드를 결정한다 int minDuration = 2.0; int maxDuration = 4.0; int rangeDuration = maxDuration - minDuration; int actualDuration = (arc4random() % rangeDuration) + minDuration;   // 행동(액션)을 만든다 id actionMove = [CCMoveTo actionWithDuration:actualDuration position:ccp(-target.contentSize.width/2, actualY)]; id actionMoveDone = [CCCallFuncN actionWithTarget:self selector:@selector(spriteMoveFinished:)]; [target runAction:[CCSequence actions:actionMove, actionMoveDone, nil]]; }

 가능한 한 모든 명령들을 이해하기 쉽게 이름붙였다. 첫 부분은 간단한 계산으로 적들이 나타날 위치를 결정하고, 배치시키고, 그것을 플레이어 스프라이트에서 했던 것과 같은 방법으로 장면에 집어넣는 것이다.

 새롭게 들어간 부분은 액션을 넣은 부분이다. Cocos2D는 이동, 점프, 페이드(사라지거나 나타날 때) 등등, 우리가 스프라이트를 애니메이션시킬 때에 사용할 수 있는 액션을 미리 많이 준비해 놓고 있다. 우리는 여기에서 그 중의 3가지 액션을 적들에게 시킬 것이다.

• CCMoveTo: CCMoveTo 액션은 오브젝트를 스크린 밖에서부터 왼쪽으로 곧바로 움직이게끔 한다. 전체 움직임이 다 끝날 때까지 걸리는 시간도 지정할 수 있는데, 우리는 2~4초 사이에서 랜덤하게 결정되게끔 할 것이다.
• CCCallFuncN: CCCallFuncN 함수는 액션이 다 끝났을 때 오브젝트에게 일어나는 콜벡을 정의한다. 여기에서는 "spriteMoveFinished"라는 콜백을 정의할 것인데, 지금은 아직 그 부분을 쓰지 않았으므로 나중에 더 설명한다.
• CCSequence: CCSequence 액션은 몇 가지 액션을 정해놓은 순서에 따라 행하게끔 만들 수 있다. 우리는 먼저 CCMoveTo 액션을 행하고, 그것이 끝나면 CCCallFuncN 액션을 행하도록 할 것이다.

 이제 위에서 설명한 콜백 함수를 넣는다. addTarget 바로 전 부분에 다음 메소드를 넣자.

-(void)spriteMoveFinished:(id)sender  { CCSprite *sprite = (CCSprite *)sender; [self removeChild:sprite cleanup:YES]; }

 알겠지만 이 함수의 목적은 화면 밖으로 나간 스프라이트를 제거하기 위한 것이다. 이 부분은 화면에 보이지 않는 알 수 없는 스프라이트들 때문에 메모리를 낭비하지 않게 하기 위해 매우 중요하다. 물론 스프라이트의 배열을 다시 사용해서 이 문제를 해결하는 다른 좋은 방법도 있지만, 필자의 이 초보자용 튜토리얼에서는 위와 같은 간단한 방법을 취할 것이다.

 적을 등장시키기 위해 마지막으로 해야 할 일이 있다.

 적을 만드는 함수를 호출해야 한다. 적을 만드는 함수를 호출 하기 위해서 cocos2D에서는 주기적으로 콜벡함수를 호출해주는 스케쥴링을 필요하다. 아래의 구문은 gameLogic을 1초 주기로 호출하고 gameLogic에서는 적을 만들어 준다. 스케쥴링을 하는 아래의 구문은 init시 추가해주면 적이 1초마다 출현하는 결과를 볼 수 있다.

[self schedule:@selector(gameLogic:) interval:1.0];

콜벡 함수의 구현:

-(void)gameLogic:(ccTime)dt { [self addTarget];}

자 그려면, 프로젝트를 실행해 보자, 종으로 움직이는 적을 볼 수 있다.

 

표창 발사하기

 

닌자가 표창을 발사 할 수 있도록 해보자! 그러기 위해서는 많은 방법이 있지만, 이 게임에서는 유저가 화면을 탭했을때 탭한 방향으로 표창이 나가도록 할 것이다.

CCMoveTo 액션 함수를 이용하여서 구현할 것이다. 이 구현을 위해서는 약간의 수학의 지식이 필요하다. CCMoveTo는 표창의 최종 목적지의 위치를 필요로 하기 때문이다. 최종 목적지란 유저가 화면을 탭한 지점을 이야기 한다. 그러나 우리는 한가지 더 해결할 필요성을 느낀다. 바로 표창이 화면 밖으로 사라지도록 처리 해야 한다는 것이다.

여기 위에 대한 문제를 도식화 하였다.

작은 삼각형은 유저가 탭한 목표지점 까지를 나타낸다. 큰 삼각형은 화면 밖으로 표창이 나가기 위해서 필요하다.

우선, 레이어에서 터치가 가능하도록 init 함수에 아래를 추가하자.

self.isTouchEnabled = YES;

이제 터치 이벤트를 콜벡하는 함수를 추가 하여야 한다. 터치가 종료되었을때 콜벡 되는 함수는 ccTouchesEnded 함수 이다:

- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {   // Choose one of the touches to work with UITouch *touch = [touches anyObject]; CGPoint location = [touch locationInView:[touch view]]; location = [[CCDirector sharedDirector] convertToGL:location];   // Set up initial location of projectile CGSize winSize = [[CCDirector sharedDirector] winSize]; CCSprite *projectile = [CCSprite spriteWithFile:@"Projectile.png" rect:CGRectMake(0, 0, 20, 20)]; projectile.position = ccp(20, winSize.height/2);   // Determine offset of location to projectile int offX = location.x - projectile.position.x; int offY = location.y - projectile.position.y;   // Bail out if we are shooting down or backwards if (offX <= 0) return;   // Ok to add now - we've double checked position [self addChild:projectile];   // Determine where we wish to shoot the projectile to int realX = winSize.width + (projectile.contentSize.width/2); float ratio = (float) offY / (float) offX; int realY = (realX * ratio) + projectile.position.y; CGPoint realDest = ccp(realX, realY);   // Determine the length of how far we're shooting int offRealX = realX - projectile.position.x; int offRealY = realY - projectile.position.y; float length = sqrtf((offRealX*offRealX)+(offRealY*offRealY)); float velocity = 480/1; // 480pixels/1sec float realMoveDuration = length/velocity;   // Move projectile to actual endpoint [projectile runAction:[CCSequence actions: [CCMoveTo actionWithDuration:realMoveDuration position:realDest], [CCCallFuncN actionWithTarget:self selector:@selector(spriteMoveFinished:)], nil]];  }

터치 종료 위치를 우리의 뷰에 맞도록 convertToGL을 통해서 변환하여야 한다. 현재 우리 게임은 랜드스케이프 모드 이기 때문에 반드시 거쳐야 할 작업이다.

처음 우리는 작은 삼각형에서의 목표지점을 구현 한다.

그리고 표창이 사라지는 화면에서 사라지는 최종 목표 지점을 구현 한다. 구현을 위해서 이용한 약간의 수학적 지식은 피타고라스의 이론 이다.

이제 표창이 날아가는 거리를 알 수 있게 되었다. 그럼 표창의 날아가는 속도를 지정해 주어야 한다. 속도 = 거리/시간 이다. 우리 화면에서 처음부터 끝까지 표창이 날아가기 위한 속력을 계산한 공식이 velocity라는 변수 이다. 이제 방정식을 이용하여 실제 표창이 날아가는 시간을 구현하면 다음과 같다. 실제표창시간 = 큰 삼각형의 최종목표 거리 / 속도

 

충돌 감지하기

 

자, 이제 표창도 나간다. 그러나 표창은 적을 위협하지 못한다. 표창이 적을 뚫고 지나가기 때문이다.

cocos2D에서는 이러한 해결점을 위해서 두개의 물리 라이브러리를 제공한다. : Box2D 와 Chipmunk 이다. 여기서는 물리 라이브러리를 사용하지 않고 간단한 방법으로 충돌 처리를 구현해 보겠다.

HelloWorldScene class 에 다음을 추가해보자:

NSMutableArray *_targets;NSMutableArray *_projectiles;

init 함수에 초기화 시켜 주자:

_targets = [[NSMutableArray alloc] init];_projectiles = [[NSMutableArray alloc] init];

dealloc 함수에 메모리 해제하는 구현부를 추가 시켜 주자:

[_targets release];_targets = nil;[_projectiles release];_projectiles = nil;

addTarget 함수에서 적이 추가될때 마다 _targets 배열에 저장한다. 타겟을 식별할 태그를 1로 지정:

target.tag = 1;[_targets addObject:target];

ccTouchesEnded 함수 부분을 수정하자, 표창이 추가 될때마다 _projectiles 배열에 저장한다. 표창을 식별할 태그를 2로 지정:

projectile.tag = 2;[_projectiles addObject:projectile];

spriteMoveFinished 함수에서 태그로 인한 구별을 두어 각각의 배열에서 스프라이트 정보를 삭제한다.

if (sprite.tag == 1) { // target [_targets removeObject:sprite]; } else if (sprite.tag == 2) { // projectile  [_projectiles removeObject:sprite]; }

프로젝트에서 컴파일 이후 실행해 보자. 쿨~! 그러나 아직 충돌처리를 위해서 빠진 부분이 있다.

HelloWorldScene 에 다음을 추가하여 보자:

- (void)update:(ccTime)dt  {   NSMutableArray *projectilesToDelete = [[NSMutableArray alloc] init]; for (CCSprite *projectile in _projectiles)  { CGRect projectileRect = CGRectMake( projectile.position.x - (projectile.contentSize.width/2), projectile.position.y - (projectile.contentSize.height/2), projectile.contentSize.width, projectile.contentSize.height);   NSMutableArray *targetsToDelete = [[NSMutableArray alloc] init]; for (CCSprite *target in _targets)  { CGRect targetRect = CGRectMake( target.position.x - (target.contentSize.width/2), target.position.y - (target.contentSize.height/2), target.contentSize.width, target.contentSize.height);   if (CGRectIntersectsRect(projectileRect, targetRect))  {   <p style="margin-top: 2px; margin-right: 0px; margin-bottom: 0px; margin-left: 40px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; line-height: 1.5; "> [targetsToDelete addObject:target];</p> } }   for (CCSprite *target in targetsToDelete) { [_targets removeObject:target]; [self removeChild:target cleanup:YES]; }   if (targetsToDelete.count > 0) { [projectilesToDelete addObject:projectile]; } [targetsToDelete release]; }   for (CCSprite *projectile in projectilesToDelete) { [_projectiles removeObject:projectile]; [self removeChild:projectile cleanup:YES]; } [projectilesToDelete release]; }

이제 완료 되었다. 표창과 적에 대한 충돌 박스를 만들어서, CGRectIntersectsRect를 이용하여서 충돌 박스들이 겹쳐 있는지 확인을 한다. 겹쳐 있다면 씬에서 스프라이트를 삭제하고 배열에서도 스프로아트 정보를 지운다. “toDelete” 배열 시리즈를 만드는 것에 주의 하라. 배열의 정보를 반복을 통해 참조할때 내부의 오브젝트 정보를 지울수가 없기 때문에 만들게 된 것이다. 이 부분에 대해서는 여러가지 최적화 방법이 있으나 여기서는 간단하게 구현해 본다.

이제 init 함수에 아래 부분을 추가하자:

[self schedule:@selector(update:)];

컴파일하고 실행 시켜 보면 표창과 충돌이후 사라지는 적을 볼수 있을 것이다!

 

게임의 종료

 

게임은 약간의 이펙트 사운드와 음악을 추가 하게 됨으로써 더욱 빛나게 된다. 여기 그러한 처리를 위한 간단한 예제를 소개 하겠다.

기본 이펙트 사운드를 추가 하기 위해서 더 알고 싶은 내용은 원저자의 블로그를 참조하기 바란다. 

blog series on audio programming for the iPhone

백그라운 음악과 이펙트 사운드를 만들고 싶다면 여기를 참조 바란다.

cool background music I made 

awesome pew-pew sound effect

HelloWorldScene.m에 추가하도록 하자:

#import "SimpleAudioEngine.h"

백그라운드 음악을 게임에서 재생시키기 위해 init 함수에 추가하자.:

[[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"background-music-aac.caf"];

ccTouchesEnded 함수에 이펙트 사운드를 추가하자.:

[[SimpleAudioEngine sharedEngine] playEffect:@"pew-pew-lei.caf"];

자 이제 “You Win” 혹은 “You Lose” 안내문을 보여주기 위해 클래스를 추가 한다. 새로운 파일을 만들기를 선택한후 Objective-C class 중 NSObject 를 선택 한다. 파일 이름은 GameOverScene.m 이라 하고, “Also create GameOverScene.h” 를 체크하는 것을 잊지 말자.

GameOverScene.h 코드 내용:

#import "cocos2d.h"  @interface GameOverLayer : CCColorLayer  { CCLabel *_label; } @property (nonatomic, retain) CCLabel *label; @end  @interface GameOverScene : CCScene  { GameOverLayer *_layer; } @property (nonatomic, retain) GameOverLayer *layer; @end

GameOverScene.m 코드 내용:

#import "GameOverScene.h" #import "HelloWorldScene.h"  @implementation GameOverScene @synthesize layer = _layer;  - (id)init  {   if ((self = [super init])) { self.layer = [GameOverLayer node]; [self addChild:_layer]; } return self; }  - (void)dealloc { [_layer release]; _layer = nil; [super dealloc]; }  @end  @implementation GameOverLayer @synthesize label = _label;  -(id) init { if( (self=[super initWithColor:ccc4(255,255,255,255)] ))  {   CGSize winSize = [[CCDirector sharedDirector] winSize]; self.label = [CCLabel labelWithString:@"" fontName:@"Arial" fontSize:32]; _label.color = ccc3(0,0,0); _label.position = ccp(winSize.width/2, winSize.height/2); [self addChild:_label];   [self runAction:[CCSequence actions: [CCDelayTime actionWithDuration:3], [CCCallFunc actionWithTarget:self selector:@selector(gameOverDone)], nil]]; } return self; } - (void)gameOverDone  {   [[CCDirector sharedDirector] replaceScene:[HelloWorld scene]];  } - (void)dealloc  { [_label release]; _label = nil; [super dealloc]; }  @end

HelloWorldScene.h 에 아래의 멤버 변수를 추가 하자:

int _projectilesDestroyed;

HelloWorldScene.m 에 import 시키자:

#import "GameOverScene.h"

update 함수에 targetsToDelete loop 부분에서 removeChild:target 다음 아래 부분을 추가하자. 표창이 없앤 적이 30이 넘어가면 결과를 보여주는 역할을 하게 된다.

_projectilesDestroyed++;if (_projectilesDestroyed > 30) { GameOverScene *gameOverScene = [GameOverScene node]; [gameOverScene.layer.label setString:@"You Win!"]; [[CCDirector sharedDirector] replaceScene:gameOverScene];}

타겟이 닌자가 있는 화면 끝쪽으로 다가 왔을때 플레이어는 게임에서 지게 된다. 이에 대한 처리는 spriteMoveFinished 함수에서 수정 한다. 함수에서 the tag == 1 case  안에서 removeChild:sprite 다음 부터 아래 부분을 추가하자:

GameOverScene *gameOverScene = [GameOverScene node]; [gameOverScene.layer.label setString:@"You Lose :["]; [[CCDirector sharedDirector] replaceScene:gameOverScene];

이제 간단한 게임의 모든 단계가 종료 되었다. 컴파일 이후 런해 보자.

 

완성된 코드를 가지고 싶어요!

 

여기에 가보자!

simple Cocos2D iPhone game.

 

기타 튜토리얼 시리즈들

 

How To Add A Rotating Turret , 미사일튜렛 회전 시키기

how to create buttons in Cocos2D, cocos2D에서 버튼 만들기

intro to Box2D, 물리 라이브러리 Box2D의 개요

how to create a simple Breakout game., 간단한 벽돌깨기 게임