드래곤 플라이트 따라 만들기 - 8. Head-up Display

HUD (Head-up Display)

대부분 게임에는 시간이나 점수를 보여주는 HUD가 있다. 우리 게임에도 간단하게 HUD를 추가하도록 하자. 

단순하게 움직인 거리를 나타내는 것만 표시할 것이다. 적을 죽여서 점수에 반영하는 것은 숙제로 남기기로 하겠다. 

우선 CCLayer를 상속받아서 HUDLayer이름으로 클래스 하나를 생성한다. 

그리고 HUDLayer.h에 아래 코드와 같이 작성한다. 

@interface HUDLayer : CCLayer {

    CCLabelTTF *scoreLabel;

}

-(void)setScoreText:(int)score;

점수(거리)를 보여주는 Label을 인스턴스 변수로 추가한다. 그리고 외부에서 점수를 메시지로 보낼 수 있도록 메소드를 하나 생성한다. 

HUDLayer.m으로 이동해서 초기 설정을 위해 init 메소드에 아래와 같이 추가한다. 

- (id)init

{

    self = [super init];

    if (self) {

        //레이블의 초기값을 0M 으로 한다. 시스템 폰트 사용

        scoreLabel = [CCLabelTTF labelWithString:@"0M" fontName:@"Arial" fontSize:20];

        //위치를 정한다.

        scoreLabel.position = ccp(280, 450);

        //화면에 뿌리기위해 자식노드에 추가 

        [self addChild:scoreLabel];

    }

    return self;

}

시스템 폰트를 사용해서 문자열의 초깃값을 "0M"로 설정한다. 그리고 오른쪽 위에 배치한 후 자식 노드로 추가해서 화면에 보여준다.

그리고 다른 클래스에서 텍스트를 변경할 수 있도록 메소드를 작성한다. 

-(void)setScoreText:(int)score{

    //레이블을 위한 스트링 값

    NSString *scoreString = [NSString stringWithFormat:@"%dM", score];

    //레이블의 스트링에 할당한다.

    scoreLabel.string = scoreString;

}

점수값을 받으면 스트링으로 변환한다. 그리고 레이블의 스트링값에 넣어준다. 

기본적인 HUDLayer를 작성하였다.

GameLayer에 적용을 위해서 GameLayer.h로 이동을 한다. 

점수를 저장할 인스턴스 변수 하나를 아래와 같이 추가한다. 

    int score;

그리고 프로퍼티를 설정한다. 

@property (nonatomic, weak) HUDLayer *hud;

GameLayer.m으로 이동해서 init 함수에서 아래와 같이 코드를 추가한다.

        //점수를 위한 초기화

        score = 0;

시작할 때 점수를 0으로 초기화한다. 

그리고 시간이 흘러감에 따라서 점수를 올려줄 수 있게 아래와 같이 코드를 추가한다.

//일정 시간마다 점수를 올려준다.

-(void)updateScore:(ccTime)dt{

    [_hud setScoreText:score++];

}

움직이는 거리를 계산하기보단 간단하게 시간을 거리로 두면 간단하게 계산이 된다. 한번 호출될 때 마다 1M씩 점수를 올려준다. 

그리고 onEnter 메소드에 아래와 같이 코드를 추가한다.

- (void)onEnter {

    [super onEnter];

...

    //점수를 위한 스케쥴

    [self schedule:@selector(updateScore:) interval:0.01f];

}

0.01초마다 updateScore: 메소드를 호출을 하는 스케쥴러를 추가한다. 

끝난 것처럼 보인다. 하지만 HUDLayer를 자식 노드에 추가하지 않아서 지금은 화면에 보이지 않는다. 

GameScene.h으로 이동해서 HUDLayer를 추가하도록 하자.

#import "HUDLayer.h"

...

@property (nonatomic, weak) HUDLayer *hudLayer;

HUDLayer를 임포트 하고 프로퍼티로 설정을 한다. 

GameScene.m으로 이동해서 init 메소드를 아래코드로 변경을 한다. 

- (id)init

{

    self = [super init];

    if (self) {

        //HUD 레이어 추가하기

        _hudLayer = [HUDLayer node];

        [self addChild:_hudLayer z:1];

        //Game 레이어 추가하기

        _gameLayer = [GameLayer node];

        [self addChild:_gameLayer z:0];

      

        //게임 레이어의 HUD에 HUD레이어 전달

        self.gameLayer.hud = _hudLayer;

    }

    return self;

}

HUDLayer를 자식노드로 추가를 하고 GameLayer의 hud에 hudLayer를 전달한다. 

Cmd(⌘) + R을 눌러서 실행을 해보자. 

시간이 지남에 따라서 오른쪽 위에 거리를 나타내는 점수가 갱신면서 보여지는 것을 확인할 수 있다. 

다음 장에서는 적이 터질때 터지는 애니메이션을 구현하도록 하겠다.