HTML5 게임 개발 따라하기 - 총알 피하기(2/3)

지난 포스트에 이어 이번 포스트에서는 게임 준비, 게임 오버 및 시간 텍스트를 출력을 다룹니다.

 

전체 목차

1. Phaser 및 플레이어 설정
2. 시작, 종료 및 텍스트 설정 (현재 페이지)
3. 적(총알) 설정 및 충돌 설정

이번 포스트에서 해볼 내용

 

1. 텍스트 출력

간단한 텍스트 출력 예제입니다. (10, 10) 위치에 "TEXT"를 출력합니다. 글꼴과 색상은 font, fill로 설정합니다.

this.textTime = this.add.text(10, 10, "TEXT", { font: "25px Arial", fill: "#FFFFFF" });

 

더 자세한 설정 방법은 아래를 참고하세요.

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html

Phaser 3 API Documentation - Class: Text

 

create 함수에 아래처럼 시간, 게임 준비, 종료 텍스트를 추가합니다. setOrigin로 기준 축을 설정할 수 있습니다.

시간, 게임오버, 게임시작 텍스트가 출력된다.

 

2. 시간 타이머 설정

시간(초) 타이머를 설정합니다. 아래는 간단한 타이머 샘플입니다.

this.time.addEvent({
	delay: 1000, // 시간 단위 ms
	callback: () => this.second++, // delay 주기마다 수행할 로직
	callbackScope: this, // callback 범위
	loop: true, // 반복 여부
});

 

더 자세한 설정 방법은 아래를 참고하세요.

https://photonstorm.github.io/phaser3-docs/Phaser.Time.TimerEvent.html#callbackScope__anchor

Phaser 3 API Documentation - Class: TimerEvent

 

위에서 시간을 출력하던 부분을 아래처럼 수정합니다. second 변수를 선언하고 1000ms 마다 second를 1씩 증가시킵니다.

아직 화면에는 시간이 변하지 않습니다. 아래처럼 update 함수에 코드를 추가합니다. update 함수에서 시간 텍스트를 바꿔줍니다.

게임 화면에서 시간이 변하는 걸 확인합니다.

1초마다 시간이 변한다. (그런데 게임 시작전인데도 변함)

 

3. 게임 시작, 종료 설정

지금은 모든 텍스트가 다 표시되고 있고 게임 플레이 중이 아닌데 시간이 계속 바뀌고 있습니다. 게임 상태 제어를 통해 게임 상태별로 텍스트를 출력하고, 게임 플레이 중일 때만 시간이 변하게 해야 합니다.

먼저 gameState 변수를 선언합니다. 0은 게임 준비, 1은 플레이, 2는 게임오버라고 정의하겠습니다.

타이머를 아래와 같이 변경합니다. gameState가 1일 경우에만 ssecond를 증가시킵니다.

게임 오버 텍스트는 총알에 맞았을 경우에만 출력되어야 하기 때문에 처음에는 안 보이도록 설정합니다.

플레이어를 못움직이게 막아야한다.

플레이어는 게임 플레이 상태에서만 움직여야 합니다. update 함수 내 플레이어 움직임 코드 위에 아래 조건을 추가합니다.

플레이어가 안움직인다.

space를 누르면 게임 상태를 1(플레이)로 변경해보자. space는 this.cursorKeys.space.isDown로 입력받을 수 있다. 아래처럼 게임 준비 중일 때 space를 누르면 게임 상태를 1로, 게임 준비 텍스는 출력 안되도록 설정한다.

 

To be continued