[javascript] Phaser에서 게임 텍스트 및 대화 시스템 구현하기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 간단하고 인터랙티브한 웹 게임을 만들 수 있습니다. 이번 튜토리얼에서는 Phaser를 사용하여 게임 내에서 텍스트와 대화 시스템을 구현하는 방법에 대해 알아보겠습니다.

1. 텍스트 표시하기

게임의 텍스트를 표시하기 위해서는 Phaser의 Text 객체를 사용할 수 있습니다. 먼저 Phaser를 초기화하고 텍스트를 표시할 위치를 지정해야 합니다. 다음은 초기화하는 코드입니다.

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

function create() {
    // 텍스트를 표시할 위치 설정
    var x = 400;
    var y = 300;
    var text = "Hello, Phaser!";

    // Text 객체 생성
    var style = { font: "32px Arial", fill: "#ffffff" };
    var phaserText = this.add.text(x, y, text, style);
    phaserText.setOrigin(0.5);
}

위 코드에서는 “Hello, Phaser!”라는 텍스트를 가운데 정렬하여 표시하고 있습니다. ‘font’ 속성을 통해 텍스트의 글꼴과 크기를, ‘fill’ 속성을 통해 텍스트의 색상을 지정할 수 있습니다.

2. 대화 시스템 구현하기

게임에서 대화 시스템을 구현하기 위해서는 텍스트를 순차적으로 표시하고 대화를 진행할 수 있어야 합니다. 이를 위해 Phaser의 Time 객체와 Input 객체를 활용할 수 있습니다. 다음은 간단한 대화 시스템의 예시 코드입니다.

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

var dialogue = [
    "안녕하세요?",
    "반갑습니다!",
    "Phaser로 게임을 만들어 보세요!"
];

var currentLine = 0;
var maxLines = 3;
var text;
var spacebar;

function create() {
    text = this.add.text(400, 300, "", { font: "32px Arial", fill: "#ffffff" });
    text.setOrigin(0.5);

    spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
}

function update() {
    if (spacebar.isDown && currentLine < maxLines) {
        text.text = dialogue[currentLine];
        currentLine++;
    }
}

위 코드에서는 ‘dialogue’ 배열에 대화 내용을 저장하고, Spacebar 키를 누르면 다음 대화가 표시되도록 구현되어 있습니다. ‘update’ 함수에서 Spacebar 키의 입력을 감지하고, 현재 대화 인덱스를 증가시키며 텍스트를 업데이트합니다.

마치며

이번 튜토리얼에서는 Phaser를 사용하여 게임 텍스트와 대화 시스템을 구현하는 방법을 알아보았습니다. Phaser의 Text 객체를 활용하여 텍스트를 표시하고, Time과 Input 객체를 이용하여 대화 시스템을 구현할 수 있습니다.

더 자세한 내용은 Phaser 공식 문서를 참고하시기 바랍니다.