드래곤 플라이트 따라 만들기 - 1. 메뉴와 화면모드

이 연재글은 필자의 심심함에 따라 작성되고 있는 글입니다. 좀 늦어질 수도 있습니다. 그리고 코드의 내용이 개판일 수도 있으니 나름 유념하고 봐주세요. 소스는 나중에 한 번에 통짜로 github에 올릴테니 버그, 수정 사항이 있으면 알려주시면 반영 하도록 하겠습니다.

만들고 라인수를 살펴보니 주석포함 1200 라인정도 밖에 안되네요. 정말 아무나 할 수 있습니다. 

본 글과 소스의 라이센스는 '만나면 커피 한잔 사주기' 라이센스 입니다. 쿨럭. 

지난번에는 게임 개발의 환경 구성을 하였다. 이번 장에서는 본론으로 들어갈려고 했으나 게임의 가장 중요한 부분인 메뉴 화면을 구성을 할 것이다. 그리고 화면모드 변경에 대해서도 설명을 할 것이다. :-) 

메뉴 화면

게임을 시작 하면 대부분의 게임은 메뉴로 시작한다. 단순하게 게임 이름과 게임의 시작을 하게 하는 “Start” 버튼으로 구성된 시작 화면을 만들어 본다. 

Cmd(⌘) + N으로 새로운 파일을 추가 한다.  CCLayer를 상속 받고 MenuLayer로 이름을 짓는다. 

MemuLayer.h 파일의 @end 바로 위에 아래와 같이 코드를 추가 한다. 

+(CCScene *)scene;

MemuLayer.m으로 이동해서  @implementation과 @end 사이에 아래 코드를 추가 한다. 

+(CCScene *)scene{

    //scene은 오토릴리스 오브젝트이다.

    CCScene *scene = [CCScene node];

    //layer는 오토릴리스 오브젝트이다.

    MenuLayer *layer = [MenuLayer node];

    //scene의 자식으로 layer를 추가한다.

    [scene addChild:layer];

    //scene을 리턴한다.

    return scene;

}

CCScene을 상속 받아서 CCLayer를 추가 해도 되지만 MenuLayer 외에 특별하게 자식노드로 추가 될게 없으므로 클래스 메소드로 scene을 만들고 MenuLayer를 자식노드에 추가해서 리턴한다. 

Note: 

`[CCScene node]`에서 node의 정의는 아래와 같이 되어 있다. 

+(id) node

{

return [[[self alloc] init] autorelease];

}

다음은 init 메소드를 작성할 것이다. +(CCScene *)scene 메소드 아래에 아래 코드를 추가 한다. 

- (id)init

{

    self = [super init];

    if (self) {

        //다이렉터에서 화면의 크기를 알아온다.

        CGSize size = [[CCDirector sharedDirector] winSize];

        //제목으로 만들 레이블을 시스템 폰트를 사용해서 만든다.

        CCLabelTTF *label = [CCLabelTTF labelWithString:@"Dragon Rider" fontName:@"HelveticaNeue" fontSize:36];

        //레이블의 위치를 지정한다.

        label.position = ccp( size.width/2, size.height/2 + 100 );

        //레이블을 자식으로 추가한다.

        [self addChild:label];

        CCLabelTTF *label2 = [CCLabelTTF labelWithString:@"Made by @krazyeom" fontName:@"HelveticaNeue" fontSize:30];

        //레이블의 위치를 지정한다.

        label2.position = ccp( size.width/2, size.height/2 + 60 );

        //레이블을 자식으로 추가한다.

        [self addChild:label2];

        

        //메뉴 아이템의 폰트를 변경한다.

        [CCMenuItemFont setFontName:@"AppleSDGothicNeo-Medium"];

        //메뉴 아이템 블럭

        CCMenuItem *startItem = [CCMenuItemFont itemWithString:@"Start" block:^(id sender)  {

        //Start 메뉴 버튼이 눌렸을 경우, GameScene을 화면 전환과 함께 호출한다.

        }];

        

        //메뉴 버튼을 메뉴에 추가한다.

        CCMenu *menu = [CCMenu menuWithItems:startItem, nil];

        //세로 정렬로 각 메뉴의 사잇값으로 20을 준다.

        [menu alignItemsVerticallyWithPadding:20];

        //메뉴의 위치를 지정한다.

        [menu setPosition:ccp( size.width/2, size.height/2 - 50)];

        //메뉴를 자식으로 추가한다.

        [self addChild:menu];

    }

    return self;

}

시스템 폰트를 사용해서 게임 제목을 추가하고, 실질적인 메뉴를 추가한다. 메뉴를 추가 하기 위해서는 메뉴 아이템을 생성하고 메뉴에 배열형식으로 하나씩 자식 노드로 추가한다.

AppDelegate에서 바로 MenuLayer를 노드로 추가 해도 되지만, cocos2d의 기본 템플릿인 IntroLayer를 사용해서 화면 전환을 할 것이다. 

이제것 만들어진 코드를 호출하기 위해 IntroLayer.m 파일을 아래와 같이 수정한다. 

//메뉴 레이어를 추가한다.

#import "MenuLayer.h"

//삭제한다

//#import "HelloWorldLayer.h"

-(void) onEnter 메소드를 아래 와 같이 변경한다. 

-(void) onEnter

{

[super onEnter];

[[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:1.0 scene:[MenuLayer scene]]];

}

HelloLayer를 MenuLayer로 변경을 하면된다. 현재 씬을 화면 전환효과를 사용하여 1초동안 MenuLayer의 씬으로 변경한다.

Note:

OnEnter는 객체가 생성이 되고 시작 시점에 호출된다. Exit는 객체가 해제가 될 때 호출된다.

CCNode SceneManagement

-(void) onEnter

-(void) onEnterTransitionDidFinish

-(void) onExitTransitionDidStart

-(void) onExit

이제 앱이 실행되면 AppDelegate에서 IntroLayer를 호출하고, IntroLayer는 MenuLayer를 화면 전환효과로 호출한다. 

여기까지 잘 따라왔으면 Cmd(⌘)+R 눌러서 실행한다. 문제가 없으면 아래 그림과 같이 나올 것이다. 

Note: 

cocos2d에서는 시스템 폰트를 말고 비트맵 폰트를 사용하는 것을 권장한다. 렌더링 과정에서 손실이 크다. 이번 프로젝트에서는 텍스트를 표시 할 것이 많지 않으므로 시스템 폰트를 사용한다. 비트맵 폰트 사용법은 Tutorial: Bitmap Fonts and Hiero를 참조 하길 바란다. 

화면모드 변경

드레곤 플라이트는 기본적으로 세로화면으로 게임을 진행한다. 그런데 이상하게 세로화면이 아닌 가로화면으로 메뉴가 나온다. 원래 생각했었던 메뉴 화면 구성은 아래 그림과 같을 것이다.

이런 이유는 cocos2d의 게임은 기본적으로 가로화면으로 구성되어서 그렇다. 수정을 위해서 왼쪽 Project 판넬에서 Project를 선택하고 Summary 탭으로 이동한다. 

아래 그림과 같이 Supported Interface Orientations에서 Landscape Left와 Landscape Right로 선택되어 있던 것을 Portrait와 Upside Down으로 변경해서 세로 모드로 가능하게 한다. 

다시 Cmd(⌘)+R 눌러서 실행해보자. 세로화면으로는 잘 나오지만, 실행할때 기본 이미지가 메뉴가 나오기 전에 90도로 회전해서 또 나온다. OTL 

IntroLayer.m 파일에서 init 메소드 중간에 보면 background.rotation = 90; 코드가 있다. 첫 Defalut.png 이미지가 호출 되고 Loading 되는 시점에서 깜빡임과 딜레이를 없애기 위해 Defalut.png 그림을 배경화면으로 한 번 더 보여준다. 이 과정에서 그림을 90도로 돌리는 과정때문에 일어난 현상이다. 간단하게 저 코드를 주석 처리 하거나 지우면 된다. 

다시 Cmd(⌘)+R 눌러서 실행해보자. 모든것이 완벽하게 보인다. 

예~! 시작이 반이다. 벌써 반이나 한 것이나 다름이 없다. 이제 본격적으로 게임의 화면을 구성하는 것으로 넘어가 보자.