태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

 

 

 

 
분류 전체.. (1308)
마이크로소.. (132)
민수네 가족 (17)
호랭이 사.. (141)
열이아빠의.. (7)
PlayPhone (98)
NetworkON (1)
ratharn의.. (10)
큐브 해법 (10)
사람들 (6)
개발 이야기 (94)
아이티 이.. (539)
영어 이야기 (2)
좋은책 이.. (8)
대기중인.. (1)
발명 이야기 (2)
건강하게.. (15)
LG전자  블로그  아이폰  구글  마이크로소프트  마이크로소프트웨어  호랭이  마소  개발자  삼성전자 
 free offers
└>free offers
 online pharma..
└>online pharma..
 Go here
└>Go here
 visit my webp..
└>visit my webp..
 Go Source
└>Go Source
«   2021/10   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
+ ITViewpoint
+ 도이모이
+ with okgosu
+ 학주니닷컴
+ 열이아빠의 R⋯
+ Gsong.s Blog
+ 비주얼스튜디⋯
+ 광파리의 글⋯
+ LovedWeb
+ 블루오션의⋯
+ 울지 않는 벌새
+ PC 지존
+ 디지털통
+ 아크비스타
+ 고독한 프로⋯
+ Total : 2,100,947
+ Today : 6
+ Yesterday : 5
  

 

 

 

cocos2d _해당되는 글 2건
2010.02.01   아이폰 블록격파 게임 만들기 
2009.12.18   실전 아이폰 게임 개발 준비하기 

 

아이폰 블록격파 게임 만들기
+   [PlayPhone]   |  2010. 2. 1. 07:44  


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

출처| 아이마소 |

지난 시간에는 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, iPhone, SDK, 개발자, 게임개발, 마소, 마이크로소프트웨어, 블로그, 블록격파, 아이폰, 이창신, 호랭이
     0   

아이디 
비밀번호 
홈페이지 
비밀글   

 

 

실전 아이폰 게임 개발 준비하기
+   [마이크로소프트웨어]   |  2009. 12. 18. 10:32  


드디어 한국에도 불기 시작한 아이폰 광풍은 개발자들의 관심을 끌기에도 충분합니다. 이에따라 주변 개발자들 중 전혀 다른 분야에 근무하던 분들까지 아이폰 개발에 관심을 가지거나 직접 아이폰 애플리케이션 개발을 시작하게 되는 경우들을 많이 접하게 되는데요. 그중에는 여러가지 시행 착오를 겪는 분들도 많습니다. 이번 글은 월간 마소에 실린 글 중 이창신 님이 쓰신 글이며, 아이폰 게임 개발을 하기 위해 알아두어야 할 내용들이 잘 정리되어 있습니다. 아이폰 게임 개발을 준비하는 분들께 도움이 되면 좋겠네요. 참고로 이창신 님은 월간 마소 연재를 통해 아이폰 게발과 관련된 노하우들을 독자들에게 제공할 예정입니다.

아이마소 : http://www.imaso.co.kr

최근 한 한국 개발팀이 만든 아이폰 게임이 앱스토어 상위에 올라 화제가 된 적이 있고 아이폰 애플리케이션의 여러 종류 중 가장 인기 있는 것은 단연 게임이기도 하다. 그동안 잘 된다는 말은 많이 들었지만, 막상 가까운 같은 나라에서 히트작이, 그것도 본업(회사원)이 있으면서 개발자와 디자이너 2명의 힘으로 일궈낸 성과라 많은 사람들에게 희망과 자극이 되지 않았나 싶다.

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

그래서 막상 아이폰 게임 제작에 뛰어 들어보면 꽤나 난관이 많음을 알게 된다. 일단 개발과 관련된 것만 추려 보면 다음과 같다.

● 아이폰 애플리케이션 개발 기반 마련: 크게 두 가지 문제가 있다.
   - 하드웨어: 일단 맥 컴퓨터가 있어야 한다. 게다가 국내에 아이폰이 들어오지 않아 아이팟 터치를 대신 써야 하는데, 고환율 덕분에 맥과 아이팟 터치 둘 다 매우 비싸다.
   - 소프트웨어: 개발 환경이 매우 낯설다. 개발 언어도 무척 생소한 Objective-C이고, IDE도 Xcode를 쓴다. 이전부터 맥 애플리케이션 개발에 관심이 없었던 경우는 그야말로 ‘듣보잡’ 수준일 수도 있다.
● 아이폰 애플리케이션 개발 기본 습득: 전에는 우리말로 된 책조차도 없어 학습에 애로가 많았지만, 최근 입문 번역서가 나와 한숨 돌릴 수 있게 되었다.
● 아이폰 게임 개발에 필요한 기술 습득: 입문서에서는 자세히 다루지 않은 그래픽스와 사운드 처리 쪽을 더 파야 한다.

그리고 다음과 같은 배경을 가졌다면 앱스토어에 있는 높은 수준의 게임을 보며 갈 길이 먼 것을 깨달을 것이다.

● 전에 게임을 개발해 본 적이 (별로) 없다.
● (자바나 스크립트 언어 같은 환경에 비해) C 언어에 익숙하지 않다.

그러던 차, 게임에도 프레임워크가 있을 터, 우연히 발견하게 된 것이 바로 이 글을 통해 소개할 cocos2d iPhone(이하 cocos2d, 참고로 cocos2d는 파이썬으로 되어 있는 게임 엔진이고, 기본 개념을 따와 Objective-C로 응용해 아이폰에서도 쓸 수 있게 한 것이 cocos2d iPhone이다)이다. 이름에서 알 수 있듯이 이 게임 엔진은 2차원을 대상으로 하고 있다. 혹 3차원 게임 개발에 관심이 있는 독자는 SIO2(http://sio2interactive.com/HO ME/HOME.html)가 3D 엔진으로 cocos2d 격이므로 참고해 보길 바란다.

Hello cocos2d

cocos2d는 2D 게임을 위한 엔진이지만, 흥미롭게도 기반은 OpenGL, 즉 3D 기술이다. 이는 근본적으로 아이폰(아이팟 터치도 동일)에 PowerVR이라는 3D 가속 칩이 들어 있어 3D 처리가 무척 강력하기 때문에, 2D조차도 3D로(즉 3차원에서 한 차원 줄이면 되므로) 처리하는 방식인데, 3D 기능이 강력한 PC나 가정용 게임기에서도 쓰인다. 하지만 그렇게 cocos2d를 쓰기 위해 OpenGL을 알아야 필요는 없다. 되레 게임 개발을 쉽고 편하게 하기 위해 OpenGL과 같은 하부 기술은 상당히 감춰 놓았다. cocos2d의 또 하나의 장점은 코코아 스타일의 API이다. 객체 지향 프로그래밍에 익숙하다면 Objective-C의 기본 감각으로도 충분히 이해할 수 있는 구조여서 자바나 C#과 같은 플랫폼에서 작성하는 기분을 느낄 수 있다. cocos2d는 오픈소스 프로젝트로 http://code.google.com/p/ cocos2d-iphone/에서 진행되고 있으며, 2009년 3월 현재 0.7 버전이 릴리즈되어 있고 곧 0.8과 1.0을 출시할 계획이다.

흥미로운 것은 이 cocos2d 엔진을 만든 사람 자신도 이 엔진을 써서 Sapus Tongue이라는 게임을 만들었다는 사실이다. 엔진이 오픈소스에 무료라서 수익 모델이 없어 보이는데, 아직 관련 자료가 많지 않아 실제 게임 개발에 참고할 만한 예제가 충분치 않다.

cocos2d 준비

cocos2d를 배워보려고 하는 데 있어서 가장 큰 장애라면 역시 문서의 부족이다. 특히 공식 문서라 할 수 있는 프로젝트 문서가 거의 없다(이점은 Ricardo도 인정하고 있다). 그나마 있는 문서들은 많이 흩어져 있는데, cocos2d의 공식 블로그(http:// blog.sapusmedia.com/)에서 문서에 대한 안내 포스트(http:// blog.sapusmedia.com/2009/03/documentation-in-cocos2d. html)에도 가장 먼저 소개된 문서인 cocos2d whitepaper (http://monoclestudios.com/cocos2d_whitepaper.html, 이 문서는 cocos2d를 이용해 게임을 만드는 회사에서 작성한 것)를 참고로 cocos2d 준비를 설명해 보려 한다.
cocos2d는 일종의 라이브러리이므로 쉽게 가져다 쓸 수 있을 것 같지만, 실은 소스를 자신의 프로젝트에 넣어야 한다. 그래서 아예 cocos2d를 이용한 애플리케이션을 만들 때에는 다음과 같은 과정으로 프로젝트를 생성하고 설정해야 한다.

먼저 Xcode를 실행하여 File -> New Project를 선택한 다음, 오른쪽에서 Window-Based Application을 선택하고 Choose 버튼을 누른다. 프로젝트 이름은 HelloCocos2d라고 해보자.

cocos2d 통합

먼저 cocos2d를 받아 적당한 곳에 압축을 푼다. 그리고 앞으로 파일을 추가할 때는 Copy items into destination group’s folder (if needed)는 선택해도 좋지만 압축을 푼 파일의 사본이 프로젝트에 추가되는 것이므로 만약 cocos2d 코드를 한 곳에서 관리하고 싶다면 선택하지 않는 것도 방법이다.

첫 번째, HelloCocos2d 프로젝트로 돌아가 Project -> Add to Project...를 선택하여 cocos2d를 푼 디렉토리로 가서 그 밑의 external 디렉토리를 선택한다. 그러면 팝업 메뉴가 하나 뜨는데 Add 버튼을 누른다. 그러면 프로젝트 뷰의 왼쪽에 external이라는 그룹(폴더 모양)이 생긴 것을 볼 수 있는데, 이 그룹을 펼쳐서 Chipmunk 디렉토리 밑으로 Demo라는 디렉토리가 보이는데 이것을 지운다(지울 때, 위의 Copy items into destionation... 옵션을 선택했다면 Also Move to Trash, 아니면 Delete References를 선택한다).

두 번째, 또 다시 Project -> Add to Project를 선택하여 cocos2d를 푼 디렉토리 밑의 cocos2d 디렉토리를 선택한다(혼동하지 말도록. cocos2d를 푼 디렉토리를 선택하는 것이 아니라 그 밑의 cocos2d 디렉토리를 선택하는 것이다).

세 번째, 이번에는 프로젝트 뷰의 왼쪽 Groups & Files에서 Resources 그룹을 선택하여 컨텍스트 메뉴로 Add -> Existing Files...를 선택한 다음, cocos2d를 푼 디렉토리 밑의 Resources 아래의 Images 디렉토리에 있는 fps_images.png을 선택하여 추가한다.

마지막으로 네 번째, Groups & Files에 Frameworks라는 그룹이 있는데 이것을 선택하여 컨텍스트 메뉴로 Add -> Existing Frameworks...를 선택한 다음 OpenGLES.framework와 QuartzCore.framework을 선택하여 추가한다.

이로써 cocos2d를 사용하는 애플리케이션을 만들 준비가 다 되었다. 그럼 어떤 새로운 기술을 배우더라도 꼭 처음에 등장하는 예제인 ‘Hello World’를 바로 만들어 보자.

Hello cocos2d

<리스트 1>은 지금까지 작업한 결과로 생성되는 HelloCocos2 dAppDelegate.m 파일이다.


<리스트 1>  HelloCocos2dAppDelegate.m의 내용

    //
    //  HelloCocos2dAppDelegate.m
    //  HelloCocos2d
    //
    //  Created by Changshin Lee on 09. 03. 19.
    //  Copyright __MyCompanyName__ 2009. All rights reserved.
    //
    #import "HelloCocos2dAppDelegate.h"
    @implementation HelloCocos2dAppDelegate
    @synthesize window;

    - (void)applicationDidFinishLaunching:(UIApplication *)application {    
        // Override point for customization after application launch
        [window makeKeyAndVisible];
    }

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


이 파일에 추가해야 할 것은 크게 세 가지다.

첫째, cocos2d를 쓰기 위해 #import “cocos2d.h”를 맨 위에 넣는다.
둘째, cocos2d 엔진의 초기화 코드를 // Override point for ... 부분에 넣는다.
셋째, Hello cocos2d를 출력하는 로직을 구현한다.

<리스트 2>의 코드는 앞서 언급한 세 가지 작업을 마친 것이다. 엔진 초기화는 간단히 주화면인 window를 Director 싱글턴([Director sharedDirector]의 반환값)에 붙이면(attachIn Window) 된다. 이후 코드는 아직 배우지 않은 것들이 많이 나와 생경하지만, 간단히 <그림 1>과 같은 흐름이라 할 수 있다.

 

사용자 삽입 이미지


<리스트 2> 세 가지 작업을 마친 결과

    //
    //  HelloCocos2dAppDelegate.m
    //  HelloCocos2d
    //
    //  Created by Changshin Lee on 09. 03. 19.
    //  Copyright __MyCompanyName__ 2009. All rights reserved.
    //

    #import "HelloCocos2dAppDelegate.h"
    #import "cocos2d.h"
    @implementation HelloCocos2dAppDelegate
    @synthesize window;

    - (void)applicationDidFinishLaunching:(UIApplication *)application {    
    [[Director sharedDirector] attachInWindow:window];   
    Scene *helloScene = [Scene node];
    Label *helloLabel = [Label labelWithString:@"Hello cocos2d" fontName:@"TrebuchetMS" fontSize:40.0f];
    helloLabel.position = cpv(150, 100);
    [helloScene add:helloLabel];
    [[Director sharedDirector] runWithScene:helloScene];
    [window makeKeyAndVisible];
    }

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


cocos2d의 특징

가장 먼저 눈에 띄는 것은 아이폰 애플리케이션의 기본 구조인 Model-View-Controller의 표준 클래스인 UIView와 UIView Controller를 쓰지 않는 cocos2d 고유의 모델이다. 물론 기존 UIView·UIViewController와 같이 써도 되지만, 쓰지 않고도 완결된 애플리케이션 작성이 가능하다는 점이 독특하다. 그래서 아마 처음 이 모델을 보면 꽤나 적응이 안 될 수도 있는데, 자주 쓰게 되면 자연스럽게 차츰 적응이 된다(필자의 경험상).

또 하나는 좌표계다. UIView의 기본 좌표계는 왼쪽 위 모서리가 (0, 0)이고 오른쪽으로 갈수록 x 좌표가, 아래로 갈수록 y 좌표가 증가한다. cocos2d는 OpenGL 기반의 좌표계를 채용하여 왼쪽 아래 모서리가 (0, 0)이고 위로 갈수록 y 좌표가 증가한다.

좌표계와 더불어 독특한 것이 뷰의 위치 지정인데, 앞의 코드에서 나온 position은 UIView의 frame.origin이 아닌 center, 즉 뷰의 중심을 뜻한다. 뷰의 위치를 좌표로 지정하다 보면 왼쪽 위 모서리에 해당하는 origin이 편할 경우가 있는데, 항상 중심을 지정해야 하므로 계산이 필요할 수 있다.

cocos2d API의 기본 구조

cocos2d 아이폰 버전의 API는 cocos2d 원조(파이썬 버전) API로부터 기본 개념을 가져왔다. 따라서 cocos2d의 개념 파악을 위해서라면 파이썬 버전 기반의 프로그래밍 가이드인 http://www.cocos2d.org/doc/programming_guide/도 충분히 도움이 된다. 이 글에서는 cocos2d API의 핵심 클래스들을 나열하며 소개해 보려 한다.

CocosNode

엔진의 이름과 겹치는 만큼, CocosNode 클래스는 핵심 중의 핵심이다. 이후 나오는 Scene, Layer, Sprite 등 cocos2d 엔진을 바탕으로 돌아가는 그래픽 오브젝트의 뿌리가 되는 클래스이다. 이 클래스에는 position이나 visible과 같은 공통 프로퍼티와 그래픽 오브젝트의 계층 구조를 구성하게 해주는 add, remove와 같은 메소드, 그리고 액션과 스케줄링을 위한 기능까지 들어 있다.

특히 그래픽 오브젝트의 계층 구조는 UIView의 그것과 마찬가지라고 이해하면 쉽다. 따라서 화면을 구성함에 있어 이 계층 구조를 잘 활용하는 것이 관건이기도 하다. 액션에 대해서는 Action 클래스에서 언급하기로 하고 스케줄링에 대해 말하자면, NSTimer와 같이 중앙 집중적인 스케줄링 기능을 이용하는 것이 아니라, 오브젝트마다 분산된 자신만의 스케줄링이 가능하다는 점에서 매력적이다.

Scene과 Director

하지만 앞의 예제에서는 CocosNode 클래스는 나오지 않는다. 대신 Scene과 Director가 나오는데, 클래스 이름이 영화에서 온 것 같아 이해가 쉽다. 먼저 Director는 말 그대로 cocos2d 엔진에 있어 감독 같은 존재이다. 영화에 감독은 보통 한 명이듯이, Director 오브젝트도 하나, 즉 싱글턴(singleton)으로 되어 있어서 항상 [Director sharedDirector] 클래스 메소드 호출로 싱글턴을 얻어 낸다.

감독이 영화 제작에 있어 단위로 삼는 것은 씬(Scene), 즉 장면이다. cocos2d에서도 Scene은 가장 큰 화면 구성 단위이며 Director는 이 Scene 오브젝트 단위로 화면을 표시한다.

Layer

Scene이 게임에 있어 전체 화면을 가리킨다면, Layer는 그 화면을 구성하는 요소요소를 나타낸다. Scene이 영화에서 배경화면이라면, Layer는 배우나 소품에 해당하는 셈이다.

 

사용자 삽입 이미지

Scene과 Layer의 기능상의 가장 큰 차이점은 사용자 입력을 받을 수 있는가이다. 따라서 사용자 입력이 필요 없는 정적인 요소는 Scene에 바로 추가하는 방식을 취하며, Layer는 주로 사용자 입력이 필요한 동적인 요소를 구성하는 바탕이 된다. Layer가 터치 이벤트나 액셀로미터 이벤트를 받으려면 TouchEvents Delegate 프로토콜을 구현해야 한다.

 

사용자 삽입 이미지

Sprite

스프라이트는 게임 개발에 있어 화면상에 움직임이 있는 물체의 단위이며, Sprite 클래스도 바로 그런 의미이다. 스프라이트를 생성하는 방법에는 몇 가지가 있는데, 가장 쉽게 이미지 파일(아이폰에서는 PNG를 주로 쓴다)로부터 생성하며 애니메이션을 위해 하나의 스프라이트에 복수 개의 이미지를 넣을 수 있다. 부가적으로, 앞서 소개했던 PowerVR 3D 가속칩에 최적화된 PVRTC 이미지 파일도 사용할 수 있다.

 

사용자 삽입 이미지

Action

Action은 기본적으로 CocosNode에 액션을 취하게 하는 클래스이긴 하지만, 보통은 게임에서 주로 움직이는 대상인 Sprite에 많이 적용하게 된다. Action에는 크게 InstantAction, IntervalAction, 그리고 RepeatForever가 있는데

- InstantAction은 즉시 실행되고 바로 끝나는 단발성의 액션
- IntervalAction은 일정 시간동안 지속되는 액션
- RepeatForever은 특정 IntervalAction을 무한 반복하는 액션

각 종류별로 무척 다양한 액션들이 제공되어 있어 스프라이트의 움직임을 프로그램으로 작성할 때 무척 편리하다.

cocos2d 기반 게임의 기본 구성

앞서 cocos2d의 핵심 API를 배웠다고 해도, 게임 자체의 개발과 직결되는 것은 아니다. Director - Scene - Layer - Sprite - Action을 개별적으로 사용하여 아주 간단한 게임을 구성할 수 있겠지만(또는 게임의 핵심 부분을 빠르게 구현하는 프로토타이핑도 가능할 것이다), 제품 수준의 게임이라면 <그림 2>와 같은 구도를 갖게 마련이다.

 

사용자 삽입 이미지

<그림 2>를 이루는 요소 하나하나가 Scene이 되는데, 그럼 차례대로 살펴보자.

TitleScene과 MenuScene

게임을 시작하면 보통 화려한 오프닝이 시선을 집중시킨다. 타이틀 화면은 동영상으로 간단하게 처리할 수도 있지만, 여기서부터 인터렉션과 애니메이션이 필요할 경우는 TitleScene의 별도 작성도 요구된다.

타이틀 화면을 마치면 게임의 준비 화면인 메뉴가 나오게 된다. MenuScene은 모든 게임에 필수이므로, 따라서 cocos2d는 Menu와 MenuItem이라는 클래스를 제공하여 메뉴 구성의 편의성을 높이고 있다. Menu는 Layer를 상속하고 있어 당연히 사용자 입력을 받을 수 있는데, MenuItem을 이미지나 텍스트로 추가만 하면 알아서 터치 이벤트를 해당 MenuItem과 연결된 셀렉터(selector)로 이어준다. <그림 2>에서와 같이 메뉴 아이템에는 본 게임, 도움말, 스코어, 설정 등이 있으며 해당 아이템을 터치하면 Director의 replaceScene으로 화면 전환을 해주는 식으로 작성한다. 타이틀과 메뉴를 제외하고 모든 화면은 언제고 메뉴 화면으로 돌아올 수 있어야 하는 점도 간과해서는 안 된다.

GameScene

GameScene은 게임 본편에 해당한다. 여기에 게임 로직이 들어가게 되는데, 게임 오버가 되면 보통 ScoreScene으로 이어진다.

ScoreScene

ScoreScene은 그동안의 점수와 하이 스코어일 경우 이름을 받는 등의 작업이 일어난다.

HelpScene과 OptionScene

HelpScene은 게임을 처음 하는 사람을 위한 안내를 하며, 간단히 그림이나 동영상으로 설명할 수도 있다. OptionScene은 게임의 콘트롤이나 난이도, 사운드 등을 설정하게 해주는 화면이다.

아직 cocos2d에 대한 문서가 많지 않아 배우기가 만만치 않지만, 그래도 뜻이 있는 곳에 길이 있는 법이다. 가장 좋은 학습방법은 실제 cocos2d로 만든 게임 코드를 보는 것이다. 마침 오픈소스로 되어 있는 cocos2d 기반 게임인 Gorillas(http:// gorillas.lyndir.com/trac/wiki/TheSource)가 있어(게임 자체도 꽤 재밌다) cocos2d로 게임을 만들어 보려는 이들에게 최고의 도우미 역할을 해주리라 본다.

더불어 이번 특집에서의 cocos2d 소개에 이어 다음 달부터는 마소의 연재 코너를 통해 cocos2d와 함께 아이폰 게임을 만드는 과정을 좀 더 깊게 살펴보려 하니 아무쪼록 cocos2d의 기초를 잘 닦는 시간으로 4월을 보내고 5월호에서 다시 만나기를 소망한다.


cocos2d의 새 버전 0.7.1

원고를 마소 편집부로 넘기고 난 다음 날 아침, cocos2d의 새 버전인 0.7.1이 나온 것을 알고 받아보니 중요한 변경 사항이 있어 서둘러 추가했다. 본문에도 소개된 CocosNode의 멤버 메소드들 중 코드 표기법에 맞지 않는 메소드들을 대거 교체했다.

[self add:node];        // OLD
[self addChild:node];   // NEW

[self add:node z:0];          // OLD
[self addChild:node z:0];     // NEW

[self add:node z:0 tag:t];          // OLD
[self addChild:node z:0 tag:t];     // NEW

[self add:node z:0 tag:t parallaxRatio];        // OLD
[self addChild:node z:0 tag:t parallaxRatio];   // NEW

[self getByTag:tag];        // OLD
[self getChildByTag:tag];   // NEW

[self remove:node];                    // OLD
[self removeChild:node cleanup:NO];    // NEW

[self removeAndStop:node];                  // OLD
[self removeChild:node cleanup:YES];        // NEW

[self removeByTag:tag];                    // OLD
[self removeChildByTag:tag cleanup:NO];    // NEW

[self removeAndStopByTag:tag];              // OLD
[self removeChildByTag:tag cleanup:YES];    // NEW

[self removeAll];                           // OLD
[self removeAllChildrenWithCleanup: NO];    // NEW

[self removeAndStopAll];                    // OLD
[self removeAllChildrenWithCleanup: YES];    // NEW

[self do: action];          // OLD
[self runAction: action];   // NEW

[self absolutePosition];                   // OLD
[self convertToWorldSpace:CGPointZero];    // NEW

0.7.1에서도 // OLD에 해당하는 옛 메소드를 사용할 수 있지만 비추천(deprecated) 상태이며 0.8부터는 아예 사라진다고 하니 지금부터 0.7.1을 쓰더라도 // NEW에 해당하는 메소드를 쓰기 시작하자. 따라서 본문의 HelloCocos2d 예제 코드에서 [helloScene add:helloLabel];도 [helloScene addChild:helloLabel];와 같이 바꾸는 것이 좋다.






     cocos2d, 개발, 개발자, 게임, 블로그, 소프트웨어, 아이팟, 아이폰, 애플리케이션, 앱스토어, 이창신
     0   

아이디 
비밀번호 
홈페이지 
비밀글   

 

<<이전 | 1 | 다음>>

열이아빠's Blog is powered by Daum