아이폰 블록격파 게임 만들기

속속 아이폰 앱스토어의 개발자 성공 스토리가 소개되는 가운데 회사 일과는 별도로 아이폰 앱이나 게임 개발을 준비하는 소프트웨어 개발자들을 자주 보게 됩니다. 그 덕분인지 요즘 아이폰이나 안드로이드 개발자 좀 구해달라는 요청도 많이 받게 되는데요. 물론 아이폰 앱을 만든다고 모두가 억만장자가 될 수 있는 것은 아닐테지만 개발자와 침체되어 있던 중소 개발사들에 활력소가 되어주고 있는 것만은 확실한 듯합니다. 이처럼 아이폰 앱이나 게임 개발을 준비하는 분들을 위해 월간 마소에서는 매달 아이폰과 안드로이드 개발 방법을 연재하고 있는데요. 이중에 재미있는 글을 하나 옮겨봅니다. 아이폰 개발을 준비하고 계시는 분들께 도움이 되면 좋겠습니다.

출처| 아이마소 |

---

지난 시간에는 cocos2d를 이용하여 벽돌 깨기의 기초가 되는 공과 막대를 그리고 움직여 보았다. 이번 호에서는 그 뒤를 이어서 벽돌을 그리고 공과 벽돌의 충돌과 격파를 실현해보려 한다. 그럼 본론에 들어가기에 앞서 cocos2d 관련 이야기들을 풀어본다.

이창신 iasandcb@gmail.com, http://ias.myid. net｜현재 모바일 애플리케이션 개발에 몰두하고 있다.

cocos2d의 새 버전이 역시나 지난 달 필자가 원고를 마감한 후 출시되었다. 주요 변경사항은 다음과 같다.

- 사운드 엔진이 OGG Vorbis 형식의 파일을 지원하게 되었다.
- AtlasSprite와 TextureAtlas의 많은 향상이 이루어졌다.
- 액션과 스케줄러의 성능과 안정성 또한 향상되었다.
- 물론 그밖에도 많은 버그 수정과 개선이 있었다.

cocos2d 0.7.2

특히 아틀라스 쪽과 액션·스케줄러 쪽은 cocos2d를 사용하는 많은 개발자들의 열성적인 피드백과 참여가 있었다.

이런 점에서 cocos2d 프로젝트는 매우 성공적으로 진행되고 있다고 볼 수 있는데, 지난 4월 말에 미국 앱스토어 유료 애플리케이션 1위를 차지한 StickWars라는 애플리케이션이 cocos2d를 쓴 것으로 알려지며 개발자들이 이를 무척이나 반기는 분위기다.

아이폰 OS 3.0과의 호환성

이미 아이폰 개발 프로그램에 가입한 개발자들에게는 공지가 나갔는데, 앞으로 출시할 애플리케이션뿐만 아니라 기존 애플리케이션들도 모두 아이폰 OS 3.0과의 호환성을 테스트해야 한다.

애플의 이렇듯(?) 과감한 업그레이드 정책은 예전부터 유명한데(몇 년 전에는 매킨토시의 CPU를 PowerPC에서 인텔로 바꾸면서 유니버설 바이너리 제공을 사실상 의무화했었다), 앞으로 나올 아이폰에 기본 탑재될 OS 버전인 만큼 개발자 스스로도 신경 써야 할 부분이기도 하다.

cocos2d를 기반으로 만든 애플리케이션의 경우, cocos2d 자체의 아이폰 OS 3.0과의 궁합이 무척 궁금할 것이다.

마침 http:// code.google.com/p/cocos2d-iphone/wiki/SDKCom patibility3_0에 정리되고 있는데, 요약하자면 이에 심각한 문제는 없다. cocos2d와의 호환성이 이제 애플도 신경써야 할 만큼 중요한 사안이어서 아이폰 OS 3.0 정식판 출시 전까지 말끔히 해결될 것으로 보인다.

더불어 아마도 이달 말쯤 나올 cocos2d 0.8부터 이런 호환성 문제를 대체로 해결한 상태이니 cocos2d를 사용하여 아이폰 OS 3.0 애플리케이션을 개발하는 경우에는 0.8(또는 SVN 리비전으로는 909 이후)을 사용하기를 권한다.

프로젝트 템플릿

지난 달에 소개했던 cocos2d 프로젝트 템플릿은 0.7.1 기준이라 이번에 나온 0.7.2를 쓸 수 없다.

결국 템플릿을 따로 만들어야 하는데, 마침 http://groups.google.com/group/cocos2d-iphone-discuss/browse_thread/thread/a9ce5d5733 af2d54/4bd99d0ef9f3c380에 cocos2d 프로젝트 템플릿을 만드는 좋은 방법이 나와 이번 글에 소개하려 한다.

먼저 http://cocos2d-iphone-discuss.googlegroups.com/ web/cocos2d-template_0_7_2.zip을 받아 적당한 곳에 압축을 풀면 cocos2d라는 디렉토리가 생기고 그 밑으로 내용물이 생겨난다.

이후 터미널에서 다음과 같이 디렉토리를 생성한다(혹시 아이폰 SDK를 기본 디렉토리에 설치하지 않았다면 해당 디렉토리로 잡아주길 바란다).

mkdir -p “/Developer/Platforms/iPhoneOS.platform/Developer/ Library/Xcode/Project Templates/Game”

이어서 조금 전 압축을 푼 cocos2d 디렉토리 이하를 위에서 생성한 디렉토리(/Developer/Platforms/iPhoneOS.platform /Developer/Library/Xcode/Project Templates/Game)로 복사한다. 그런 후에 Xcode를 실행하고 Preferences -> Source Trees(상단 탭에 있음)를 선택한 다음에, 하단의 + 버튼을 눌러 Setting Name은 COCOS2D_ROOT, Display Name은 cocos2d, Path는 자신의 cocos2d가 있는 디렉토리를 각각 입력한 후 적용한다.

이제 확인을 위해 File -> New Project를 선택하면 Game 카테고리에 cocos2d가 나온다.

 

그럼 서론을 마치고 본격적인 과정에 돌입해보자.

회고

 

바로 이 달의 이야기를 시작하려는 찰라, 이번 호부터 연재를 보는 독자에게는 정말이지 생뚱맞아 보일 수도 있고 또 지난달부터 따라온 독자라도 복습 차원에서 지난 시간의 내용을 되돌아볼 필요가 있겠단 생각이 든다.

따라서 지난 이야기를 잠시 해본다. 먼저 cocos2d 템플릿으로 BrickBreak라는 프로젝트를 생성한 다음, <리스트 1>의 코드로부터 시작하자(모두 프로젝트의 Classes 밑으로 들어간다).

<리스트 1> BrickBreakAppDelegate.h     #import <UIKit/UIKit.h>     #import "cocos2d.h"     @interface BrickBreakAppDelegate : NSObject <UIApplicationDelegate> {     UIWindow *window;     }     @property (nonatomic, retain) UIWindow *window;     @end

<리스트 2> BrickBreakAppDelegate.m     #import "BrickBreakAppDelegate.h"     #import "GameScene.h"     @implementation BrickBreakAppDelegate     @synthesize window;     - (void)applicationDidFinishLaunching:(UIApplication *)application {     // NEW: Init the window     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];     [window setUserInteractionEnabled:YES];     //[window setMultipleTouchEnabled:YES];     //[[Director sharedDirector] setLandscape: YES];     [[Director sharedDirector] setDisplayFPS:YES];     [[Director sharedDirector] attachInWindow:window];     [window makeKeyAndVisible];     [window release];     [[Director sharedDirector] runWithScene:[GameScene node]];     }     - (void)dealloc {     [window release];     [super dealloc];     }     - (void)applicationWillResignActive:(UIApplication *)application {     [[Director sharedDirector] pause];     }     - (void)applicationDidBecomeActive:(UIApplication *)application {     [[Director sharedDirector] resume];     }     - (void)applicationDidReceiveMemoryWarning:(UIApplication *)application {     [[TextureMgr sharedTextureMgr] removeAllTextures];     }     @end

<리스트 3> GameScene.h     #import <Foundation/Foundation.h>     #import "cocos2d.h"     @interface GameScene : Scene {     }     @end     @interface GameLayer : Layer {     int ballX;     int ballY;     int deltaX;     int deltaY;     int barX;     int barY;     BOOL isBallMoving;     Sprite *ball;     Sprite *bar;     }     @property (nonatomic, retain) Sprite *ball;     @property (nonatomic, retain) Sprite *bar;     - (void)move:(ccTime)delta;     @end

<리스트 4> GameScene.m     #import "GameScene.h"     #import <QuartzCore/QuartzCore.h>     CGImageRef CreateRectangleImage(int pixelsWide, int pixelsHigh, float red, float green, float blue, float alpha, BOOL wantCircle) {     CGImageRef theCGImage = NULL;     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();     CGContextRef theBitmapContext = CGBitmapContextCreate (NULL, pixelsWide, pixelsHigh,       8, 0, colorSpace, kCGImageAlphaNoneSkipFirst);     if (theBitmapContext != NULL) {     CGContextSetRGBFillColor(theBitmapContext, red, green, blue, alpha);     if (wantCircle) {     CGContextFillEllipseInRect(theBitmapContext, CGRectMake(0, 0, pixelsWide, pixelsHigh));     } else {     CGContextFillRect(theBitmapContext, CGRectMake(0, 0, pixelsWide, pixelsHigh));     }     theCGImage=CGBitmapContextCreateImage(theBitmapContext);     CGContextRelease(theBitmapContext);     }     CGColorSpaceRelease(colorSpace);         return theCGImage;     }     @implementation GameScene     - (id)init {     if (self = [super init]) {     [self addChild:[GameLayer node] z:1];     }     return self;     }     @end     @implementation GameLayer     @synthesize ball, bar;     - (void)move:(ccTime)dt {     if (ballX < 0 || ballX > 320) {     deltaX = -deltaX;     }     if (ballY > 480 || (ballY < 30 && ballX > barX - 30 && ballX < barX + 30)) {     deltaY = -deltaY;     }     ballX += deltaX;     ballY += deltaY;     [ball runAction:[MoveTo actionWithDuration:dt position:cpv(ballX, ballY)]];     }     - (id)init {     if (self = [super init]) {     CGImageRef ballImage=CreateRectangleImage(20, 20, 1.0, 1.0, 1.0, 1.0, YES);     self.ball = [[Sprite alloc] initWithCGImage:ballImage];     ballX = 160;     ballY = 30;     deltaX = 1;     deltaY = 1;     ball.position = cpv(ballX, ballY);     [self addChild:ball];     CGImageRelease(ballImage);     [self schedule:@selector(move:)];     CGImageRef barImage=CreateRectangleImage(60, 10, 1.0, 1.0, 1.0, 1.0, NO);     self.bar = [[Sprite alloc] initWithCGImage:barImage];     barX = 160;     barY = 10;     bar.position = cpv(barX, barY);     [self addChild:bar];     CGImageRelease(barImage);     isTouchEnabled = YES;     }     return self;     }     - (BOOL)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {     UITouch *touch = [touches anyObject];     CGPoint location = [touch locationInView: [touch view]];     int x = location.x;     barX = x;     [bar runAction:[MoveTo actionWithDuration:0.1 position:cpv(barX, barY)]];     return kEventHandled;     }     @end

이 글에 소개된 프로젝트 템플릿을 쓰는 경우에 MenuScene 클래스 코드도 자동으로 생성되는데, 여기에서는 쓰이지 않는다(하지만 지우지는 말 것).

BrickBreakAppDelegate는 일종의 부트스트랩(bootstrap)으로, GameScene이라는 본격적인 게임 화면 처리 클래스를 불러오기 위한 사전 준비 작업을 맡는다. GameScene에서 각각의 쓰임새는 다음과 같다.

- CreateRectangleImage : 주어진 크기와 색의 원과 직사각형을 그린다.
- move : 공을 움직이고 막대와의 충돌을 감지한다.
- ccTouchesEnded : 터치 입력을 받아 막대를 움직인다.

그리고 지난 달 코드와 달라진 부분이 조금 있으므로 앞의 코드로 갱신하기를 바란다. 이쯤해서 회고를 마치고 다음 이야기를 시작한다. 이어서 추가할 것은 바로 벽돌이다.

벽돌

벽돌이 공이나 막대와 다른 점은 다음과 같다.

- 벽돌은 움직이지 않는다.
- 공과 충돌하면 파괴된다.
- 여러 개가 동시에 화면에 나온다.

벽돌은 흰색 정사각형으로, 38×38의 크기를 갖고 화면 중상단에 8개씩 8줄을 깔려 한다. 벽돌 크기를 38×38로 한 것은 한 픽셀씩 여백을 두어 벽돌끼리 붙어 보이지 않게 하기 위해서다.

이를 위해 우선 GameScene.h에 bricks라는 배열을 인스턴스 변수로 추가한다.

<리스트 5> bricks 인스턴스 변수가 추가된 GameScene.h     #import <Foundation/Foundation.h>     #import "cocos2d.h"     @interface GameScene : Scene {     }     @end     @interface GameLayer : Layer {     int ballX;     int ballY;     int deltaX;     int deltaY;     int barX;     int barY;     BOOL isBallMoving;     Sprite *ball;     Sprite *bar;     NSMutableArray *bricks;     }     @property (nonatomic, retain) Sprite *ball;     @property (nonatomic, retain) Sprite *bar;     @property (nonatomic, retain) NSMutableArray *bricks;     - (void)move:(ccTime)delta;     @end

bricks는 벽돌들을 저장할 곳인데, 동적으로 변경될 것이라 NSMutableArray 타입을 썼다.

참고로 Objective-C(더 정확히는 Foundation 프레임워크)는 대부분의 데이터 컨테이너 타입(심지어 문자열까지)에 불가변형(immutable)과 가변형(mutable)의 구분이 있다.

배열의 경우도 NSArray가 불가변형이며 초기 생성 이후에는 내용물에 변경을 가할 수 없다.

반면 가변형 배열인 NSMutableArray는 생성 후 얼마든지 원소를 추가 및 삭제할 수 있다.

<리스트 6> GameScene.m에서 벽돌 초기화 부분     @implementation GameLayer     @synthesize ball, bar, bricks;     (중략)     - (id)init {     if (self = [super init]) {     CGImageRef ballImage=CreateRectangleImage(20, 20, 1.0, 1.0, 1.0, 1.0, YES);     self.ball = [[Sprite alloc] initWithCGImage:ballImage];     ballX = 160;     ballY = 30;     deltaX = 0;     deltaY = 0;     ball.position = cpv(ballX, ballY);     [self addChild:ball];     CGImageRelease(ballImage);     [ball release];     [self schedule:@selector(move:)];     CGImageRef barImage=CreateRectangleImage(60, 10, 1.0, 1.0, 1.0, 1.0, NO);     self.bar = [[Sprite alloc] initWithCGImage:barImage];     barX = 160;     barY = 10;     bar.position = cpv(barX, barY);     [self addChild:bar];     CGImageRelease(barImage);     [bar release];     self.bricks = [[NSMutableArray alloc] initWithCapacity:8];     for (int i = 0; i < 8; i++) {     NSMutableArray *brickRow = [[NSMutableArray alloc] initWithCapacity:8];     [bricks addObject:brickRow];     for (int j = 0; j < 8; j++) {     CGImageRef brickImage = CreateRectangleImage(38, 38, 1.0, 1.0, 1.0, 1.0, NO);     Sprite *brick = [[Sprite alloc] initWithCGImage:brickImage];     brick.position = cpv(j * 40 + 1 + 19, i * 40 + 1 + 19 + 80);     [self addChild:brick];     [brickRow addObject:brick];     CGImageRelease(brickImage);     [brick release];     }     [brickRow release];     }     isTouchEnabled = YES;     }     return self;     }     (후략)

먼저 bricks 프로퍼티의 게터, 세터 생성을 위해 @synthesize에 bricks를 추가했다.

GameLayer의 init 메소드에서 8×8의 이중 루프를 통해 벽돌의 스프라이트를 생성하고 화면에 추가하고 있다.

첫 번째 루프에서는 한 줄에 해당하는 brickRow라는 배열을 생성하여 bricks에 추가하고, 두 번째 배열에서 brickRow에 벽돌 스프라이트를 추가한다.

이때 화면 레이어에도 바로 추가하여 벽돌 데이터뿐만 아니라 화면 초기화도 함께 한다.

격파

지금까지 한 것을 실행해보면 좀 황당한 실행 화면이 나타난다.

공이 벽돌을 그대로 통과하는 것이다! 공을 막대로 쳐내는 것처럼, 공이 벽돌과 부딪히면 벽돌이 파괴되는 처리가 필요하다.

우선 공과 벽돌의 충돌 판정이 필요한데, 앞서 공과 막대의 경우와 같이 move 메소드에서 처리한다.

공과 막대 사이의 충돌과 달리 공과 벽돌은 충돌할 수 있는 방향이 4면이므로 충돌에 따른 반사도 Y 방향 반사와 더불어 X 방향의 반사도 발생할 수 있다.

파괴의 시각적인 효과는 간단히 Sprite 클래스(실은 조상 클래스인 CocosNode)의 visible 프로퍼티를 NO로 설정하는 것으로 구현했다.

따라서 충돌 판정시 이미 visible 프로퍼티가 NO인 벽돌은 바로 다음으로 넘어가야 한다.

<리스트 7> 벽돌 판정이 추가된 GameLayer의 move 메소드     - (void)move:(ccTime)dt {     if (ballX < 0 || ballX > 320) {     deltaX = -deltaX;     }     if (ballY > 480 || (ballY < 30 && ballX > barX - 30 && ballX < barX + 30)) {     deltaY = -deltaY;     }     for (NSMutableArray *brickRow in bricks) {     for (Sprite *brick in brickRow) {     if (!brick.visible) {     continue;     }     int brickBallDeltaX = brick.position.x - ballX;     int brickBallDeltaY = brick.position.y - ballY;     if (brickBallDeltaX < 29 && brickBallDeltaX > -29) {     if (brickBallDeltaY < 19 && brickBallDeltaY > - 19) {     brick.visible = NO;     deltaX = -deltaX;     }     }     if (brickBallDeltaY < 29 && brickBallDeltaY > -29) {     if (brickBallDeltaX < 19 && brickBallDeltaX > - 19) {     brick.visible = NO;     deltaY = -deltaY;     }     }     }     }     ballX += deltaX;     ballY += deltaY;     [ball runAction:[MoveTo actionWithDuration:dt position:cpv(ballX, ballY)]];     }

벽돌 초기화처럼 이중 루프가 도는데 문법적으로 foreach에 해당하는 for (Type iterator in arrays) 방식을 써서 간결함을 확보해보았다.

이제 실행해보면 공이 벽돌과 충돌하지 않고 보통의 벽돌 깨기처럼 진행된다.

단, 벽돌이 막대와 가깝게 있으므로 조심할 것(이렇게 한 데에는 다음 달 연재를 위한 복선이 깔려 있다)!

과제

이번에도 독자에게 예제를 보완하는 작업을 과제로 내보려 한다.

첫 번째는 MenuScene이다. 보통 게임은 바로 본 게임 화면을 시작하는 대신, 오프닝 화면으로 한숨 돌리게 한 다음에 게임 시작을 사용자가 명시적으로 할 수 있도록 한다.

MenuScene의 구현은 또한 Scene간의 전환을 공부할 수 있게 해주는 좋은 소재이기도 하다.

두 번째는 게임 오버 처리이다. 공이 막대 밑으로 빠지는 경우에 게임 오버 메시지를 보여주고 처음부터 다시 할지 아니면 메뉴 화면으로 돌아갈지 물어봐주는 센스가 필요할 것이다.

이때 MenuScene에서 주로 쓰이는 MenuItem 등을 활용할 수 있으니 MenuScene 구현은 확실히 쓸모가 많다.

역시나 다음 시간에 필자의 구현과 비교할 수 있는 기회를 제공할 것이다.

6월에는 애플 관련 개발자들의 최대 행사인 WWDC가 열린다.

이 컨퍼런스에서 아이폰 OS 3.0에 대한 공개적인 논의가 또 한번 봇물을 이룰 것으로 보이며, 어쩌면 NDA(비공개 조약)도 풀려 아이폰 OS 3.0에 대해 자유롭게 이야기 나눌 수 있게 될지도 모르겠다.

그 가능성이 현실이 되면 아이폰 OS 3.0의 게임 기능 관련 강화 쪽, 즉 Game Kit에 대해 알아보는 기회를 가져볼 생각이다.

>>> 지난호 보기 | cocos2d 기반 실정 아이폰 게임 개발

>>> 월간 마소 정기구독 신청하기