Colin's Blog
[javascript] Phaser를 사용하여 게임의 리더보드 구현하기

Phaser Logo

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 다양한 게임 개발 기능을 제공합니다. 이번 글에서는 Phaser를 사용하여 게임 내에 리더보드 시스템을 구현하는 방법에 대해 알아보겠습니다.

1. 리더보드 서버 설정하기

리더보드에 점수를 저장하고 조회하기 위해 서버가 필요합니다. 이 예제에서는 Node.js와 Express를 사용하여 간단한 서버를 설정하겠습니다.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json());

let leaderboard = [];

app.post('/score', (req, res) => {
  const { username, score } = req.body;
  leaderboard.push({ username, score });
  leaderboard.sort((a, b) => b.score - a.score);
  res.sendStatus(200);
});

app.get('/leaderboard', (req, res) => {
  res.json(leaderboard);
});

app.listen(3000, () => {
  console.log('Leaderboard server listening on port 3000');
});

위의 코드는 리더보드 점수를 POST로 전송받아 서버에 저장하고, GET으로 리더보드를 조회하는 간단한 Express 서버입니다.

2. Phaser 게임에 리더보드 기능 추가하기

Phaser 게임에 리더보드 기능을 추가하기 위해서는 먼저 Phaser 게임을 설정해야 합니다. 해당 게임에서 점수가 갱신될 때마다 리더보드 서버에 점수를 전송하고, 리더보드를 표시하는 기능을 구현할 것입니다.

const config = {
  // 게임 설정
};

const game = new Phaser.Game(config);

class GameScene extends Phaser.Scene {
  // 게임 씬 설정

  updateScore(score) {
    // 점수 갱신될 때마다 리더보드 서버에 점수 전송하기
    const username = getUsername(); // 점수를 전송하는 유저의 이름
    fetch('/score', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, score })
    }).then(response => {
      console.log('Score updated on server');
    }).catch(error => {
      console.error('Failed to update score on server', error);
    });
  }

  showLeaderboard() {
    // 리더보드 표시하기
    fetch('/leaderboard')
      .then(response => response.json())
      .then(leaderboard => {
        // 리더보드 데이터를 이용하여 표시 방법 구현
      })
      .catch(error => {
        console.error('Failed to fetch leaderboard', error);
      });
  }
}

// 게임에 씬 추가
game.scene.add('Game', GameScene);

// 게임 시작
game.scene.start('Game');

위의 코드는 Phaser 게임에서 리더보드 기능을 추가하는 예시입니다. updateScore 함수는 점수가 갱신될 때마다 리더보드 서버에 점수를 전송하고, showLeaderboard 함수는 리더보드 데이터를 받아와서 표시하는 기능을 구현합니다.

3. 게임에 리더보드 UI 추가하기

Phaser 게임에 리더보드를 표시하기 위해서는 게임 씬에 적절한 UI 엘리먼트를 추가해야 합니다. 이 예제에서는 Phaser의 기본 UI 패키지인 phaser3-rex-plugins를 사용하여 리더보드 UI를 구현하겠습니다.

// 게임 씬 내에서 리더보드 UI 생성 및 표시
const leaderboardUI = this.add.rexLeaderboard({
  x: 400,
  y: 300,
  width: 300,
  height: 400,
  background: this.add.rectangle(0, 0, 300, 400, 0x000000, 0.5)
});

this.showLeaderboard(); // 리더보드 데이터 표시

// 뒤로 가기 버튼 생성
const backButton = this.add.text(10, 10, 'Back', { fill: '#ffffff' })
  .setInteractive()
  .on('pointerdown', () => {
    this.scene.start('Menu');
  });

위의 코드는 Phaser 게임에서 리더보드를 표시하기 위한 UI를 추가하는 예시입니다. rexLeaderboard를 사용하여 리더보드 영역의 크기와 위치, 배경색 등을 설정합니다.

마무리

이제 Phaser를 사용하여 게임 내에 리더보드 기능을 구현하는 방법에 대해 알아보았습니다. 서버 설정, 게임에 리더보드 기능 추가, 리더보드 UI 표시 등을 진행하여 게임에 리더보드 시스템을 구현해보세요.

Phaser에 대한 자세한 내용은 공식 문서를 참고하면 도움이 됩니다. (Phaser 공식 문서)

© 2018 Colin. All rights reserved.