[javascript] Phaser에서 게임의 퀘스트 및 작업 시스템 구현하기

22 Nov 2023

javascript

게임의 퀘스트 및 작업 시스템은 플레이어가 게임 내에서 목표를 달성하고 보상을 받을 수 있는 방법을 제공합니다. Phaser는 JavaScript 기반의 게임 개발 프레임워크로, 이러한 시스템을 구현하는 데 유용하게 사용될 수 있습니다. 이번 블로그 포스트에서는 Phaser를 사용하여 게임의 퀘스트 및 작업 시스템을 구현하는 방법에 대해 알아보겠습니다.

1. 퀘스트 및 작업을 정의하기

퀘스트 및 작업 시스템을 구현하기 전에, 먼저 퀘스트와 작업을 정의해야 합니다. 퀘스트는 플레이어가 달성해야 할 메인 목표를 의미하며, 작업은 이 퀘스트를 달성하기 위한 소규모 목표입니다. 예를 들어, “용사가 악당을 물리치세요”라는 퀘스트는 “10마리의 몬스터를 죽이세요”라는 작업으로 나눌 수 있습니다.

2. 퀘스트 및 작업 객체 생성하기

Phaser에서는 퀘스트와 작업을 객체로 표현할 수 있습니다. 각각의 객체에는 목표, 진행 상태, 보상 등의 속성이 포함될 수 있습니다. 이러한 객체를 생성하여 게임에 추가하는 방식으로 퀘스트 및 작업 시스템을 구현할 수 있습니다.

class Quest {
    constructor(title, description, tasks, rewards) {
        this.title = title;
        this.description = description;
        this.tasks = tasks;
        this.rewards = rewards;
        this.isCompleted = false;
    }

    complete() {
        if (!this.isCompleted) {
            this.isCompleted = true;
            // 보상 지급
        }
    }
}

class Task {
    constructor(description, targetCount) {
        this.description = description;
        this.targetCount = targetCount;
        this.currentCount = 0;
        this.isCompleted = false;
    }

    increment() {
        if (!this.isCompleted) {
            this.currentCount++;

            if (this.currentCount >= this.targetCount) {
                this.isCompleted = true;
                // 작업 완료 시 동작
            }
        }
    }
}

// 퀘스트 및 작업 생성
const quest = new Quest("용사의 임무", "용사가 악당을 물리치세요", [
    new Task("몬스터를 죽이세요", 10),
    new Task("보물을 찾으세요", 1)
], {
    gold: 100,
    experience: 500
});

3. 게임 로직에 퀘스트 및 작업 추가하기

퀘스트 및 작업 객체를 생성한 후에는 게임 로직에 이를 추가해야 합니다. Phaser에서는 상황에 따라 퀘스트 및 작업의 진행 상태를 업데이트하고, 플레이어의 조작에 따라 작업의 진행도를 증가시킬 수 있습니다.

// 게임 로직에 퀘스트 및 작업 추가
function update() {
    // 플레이어가 몬스터를 죽일 때마다 작업의 진행도 증가
    if (player.isKillingMonster && !task.isCompleted) {
        task.increment();
    }

    // 모든 작업이 완료됐을 때 퀘스트 완료 처리
    if (task1.isCompleted && task2.isCompleted) {
        quest.complete();
    }
}

4. UI에 퀘스트 및 작업 정보 표시하기

퀘스트 및 작업 시스템의 핵심은 플레이어에게 진행 상태를 시각적으로 보여주는 것입니다. Phaser에서는 게임 화면에 UI 요소를 추가하여 퀘스트 및 작업 정보를 표시할 수 있습니다.

// UI 요소 생성
const questTitleText = this.add.text(10, 10, quest.title, { fontSize: '24px', fill: '#fff' });
const questDescriptionText = this.add.text(10, 50, quest.description, { fontSize: '16px', fill: '#fff' });
const taskText = this.add.text(10, 100, task.description + ` (${task.currentCount}/${task.targetCount})`, { fontSize: '16px', fill: '#fff' });

5. 결론

Phaser를 사용하여 게임의 퀘스트 및 작업 시스템을 구현하는 방법에 대해 알아보았습니다. 퀘스트 및 작업을 정의하고 객체로 생성한 후 게임 로직에 추가하고, UI에 정보를 표시함으로써 플레이어에게 목표를 제공하고 보상을 주는 시스템을 구현할 수 있습니다. 이러한 시스템은 게임의 흥미와 재미 요소를 높여줄 수 있습니다.

참고 자료

Phaser 공식 문서: https://phaser.io/
Phaser GitHub 레포지토리: https://github.com/photonstorm/phaser