[javascript] Phaser를 사용하여 게임의 업적 시스템 추가하기

22 Nov 2023

javascript

게임에 업적 시스템을 추가하면 플레이어들이 게임에서 더 오랜 시간을 보내도록 유도할 수 있습니다. 이번 튜토리얼에서는 Phaser를 사용하여 게임에 업적 시스템을 추가하는 방법을 알아보겠습니다.

1. 업적 데이터 정의하기

먼저, 게임에서 사용할 업적 데이터를 정의해야 합니다. 예를 들어, ‘100점 이상 획득하기’, ‘보스 몬스터를 처치하기’와 같은 업적들을 정의할 수 있습니다. 각 업적은 고유한 ID, 이름, 설명, 목표를 가지고 있습니다.

const achievements = [
  {
    id: 'achievement1',
    name: '100점 이상 획득하기',
    description: '게임에서 100점 이상 획득하기',
    goal: 100
  },
  {
    id: 'achievement2',
    name: '보스 몬스터를 처치하기',
    description: '게임에서 보스 몬스터를 처치하기',
    goal: 1
  },
  // 추가적인 업적들...
];

2. 현재 진행 상황 추적하기

업적 시스템을 구현하기 위해, 게임에서 사용자의 현재 진행 상황을 추적해야 합니다. 예를 들어, 사용자가 몬스터를 처치할 때마다 그 횟수를 추적하거나, 사용자의 점수를 추적할 수 있습니다.

let score = 0;
let monstersKilled = 0;

// 몬스터를 처치할 때마다 횟수 증가
function killMonster() {
  monstersKilled++;
  // 업적 달성 확인
  checkAchievements();
}

// 점수를 획득할 때마다 점수 증가
function gainScore(amount) {
  score += amount;
  // 업적 달성 확인
  checkAchievements();
}

3. 업적 달성 확인하기

사용자의 진행 상황이 변경될 때마다 업적을 확인하고 달성 여부를 확인해야 합니다. Phaser에서는 Phaser.Game 객체의 이벤트를 활용하여 업적 달성을 확인할 수 있습니다.

function checkAchievements() {
  // 모든 업적 순회
  for (const achievement of achievements) {
    // 업적이 이미 달성되었는지 확인
    if (!achievement.isAchieved) {
      // 업적 달성 여부 확인
      if (achievement.id === 'achievement1' && score >= achievement.goal) {
        // 업적 달성
        achievement.isAchieved = true;
        // 업적 알림 표시
        showAchievementNotification(achievement);
      } else if (achievement.id === 'achievement2' && monstersKilled >= achievement.goal) {
        // 업적 달성
        achievement.isAchieved = true;
        // 업적 알림 표시
        showAchievementNotification(achievement);
      }
      // 추가적인 업적들...
    }
  }
}

// 업적 알림 표시
function showAchievementNotification(achievement) {
  console.log(`축하합니다! 업적 "${achievement.name}"을 달성하셨습니다!`);
}

4. 게임에 업적 시스템 추가하기

게임에 업적 시스템을 추가하기 위해, Phaser의 적절한 위치에서 checkAchievements() 함수를 호출해야 합니다. 예를 들어, 게임의 각 프레임마다 호출하거나, 게임 진행 중 로직에 따라 호출할 수 있습니다.

// 게임의 각 프레임마다 호출
function update() {
  // 게임 로직...
  
  // 업적 확인
  checkAchievements();
}

업적 시스템을 보다 재미있고 다양하게 만들기 위해 애니메이션, 효과음, 업적 목록 표시 등을 추가할 수도 있습니다. 이제 Phaser를 사용하여 게임에 업적 시스템을 추가하는 방법을 알게 되었습니다. 이를 통해 플레이어들이 게임에 더 많은 시간을 투자할 수 있게 될 것입니다.

참고 자료

Phaser 공식 문서