[javascript] Phaser에서 랭킹 시스템 구현 방법

22 Nov 2023

javascript

Phaser는 HTML5 기반으로 개발된 게임 개발 프레임워크로, 게임에서 랭킹 시스템을 구현할 수 있습니다. 랭킹 시스템은 플레이어의 점수를 추적하고 공유함으로써 게임의 재미와 경쟁력을 높일 수 있습니다. 이번 블로그 포스트에서는 Phaser를 사용하여 간단한 랭킹 시스템을 구현하는 방법에 대해 알아보겠습니다.

1. Firebase를 이용한 데이터베이스 설정

랭킹 시스템을 구현하기 위해선 플레이어 점수를 저장하고 공유하기 위한 데이터베이스가 필요합니다. Firebase는 실시간 데이터베이스로서 이러한 용도로 많이 사용됩니다. 먼저 Firebase 계정을 만들고 프로젝트를 생성해주세요.

2. Firebase SDK 추가하기

Phaser에서 Firebase를 사용하기 위해서는 먼저 Firebase SDK를 프로젝트에 추가해야 합니다. HTML 문서의 <head> 태그 안에 다음 코드를 추가해주세요:

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>

3. Firebase 초기화하기

Firebase SDK를 추가한 후, Firebase를 초기화해야 합니다. Phaser에서는 보통 create() 또는 preload() 함수 내에서 이 작업을 수행합니다. 다음과 같이 Firebase를 초기화하는 코드를 추가해주세요:

// Firebase 초기화
var firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  databaseURL: "your-database-url",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

firebase.initializeApp(firebaseConfig);

위 코드에서 your-api-key, your-auth-domain, 등에 자신의 Firebase 프로젝트의 정보를 넣어주세요.

4. 랭킹 데이터베이스 관리

랭킹 시스템을 구현하기 위해선 게임 종료 후 플레이어의 점수를 데이터베이스에 저장해야 합니다. 이를 위해 다음과 같은 함수를 작성해주세요:

// 랭킹 데이터베이스에 점수 저장
function saveScoreToDatabase(score) {
  firebase.database().ref('scores').push({
    score: score
  });
}

위 함수는 ‘scores’라는 데이터베이스 경로에 새로운 점수를 저장합니다.

5. 랭킹 표시하기

랭킹을 표시하기 위해서는 데이터베이스에서 점수를 가져와 순위를 매겨야 합니다. 다음과 같은 함수를 작성해주세요:

// 랭킹 표시
function showRanking() {
  firebase.database().ref('scores').orderByChild('score').limitToLast(10).once('value')
    .then(function(snapshot) {
      var rank = 1;
      snapshot.forEach(function(childSnapshot) {
        var childData = childSnapshot.val();
        console.log(rank + '. ' + childData.score);
        rank++;
      });
    });
}

위 함수는 ‘scores’ 경로에서 최근 10개의 점수를 가져와 출력합니다.

마무리

이상으로 Phaser에서 간단한 랭킹 시스템을 구현하는 방법에 대해 알아보았습니다. Firebase를 사용하여 데이터베이스를 설정하고, 데이터를 저장하고 가져오는 방법을 다루었습니다. 따라서 이제 게임에 랭킹 시스템을 추가하여 플레이어끼리 경쟁할 수 있도록 만들어보세요.

더 자세한 내용은 Phaser 공식 문서와 Firebase 공식 문서를 참고해주세요.