[javascript] Phaser에서 게임의 시간 관리 및 게임 내 시간 표시 구현하기

22 Nov 2023

javascript

Phaser는 HTML5로 게임을 개발하기 위한 강력한 프레임워크입니다. 이 프레임워크를 사용하면 쉽고 빠르게 게임을 제작할 수 있습니다. 이번 글에서는 Phaser를 사용하여 게임 내에서 시간을 관리하고 표시하는 방법에 대해 알아보겠습니다.

게임 내 시간 관리

Phaser에서는 game.time 객체를 사용하여 게임의 시간을 관리할 수 있습니다. 이 객체에는 게임 시작부터 경과한 시간, 프레임 간의 시간 간격 등과 같은 정보들이 포함되어 있습니다.

아래는 간단한 예시입니다:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game-container');

var GameState = {
    create: function() {
        this.startTime = this.game.time.now;
    },
    update: function() {
        var elapsedTime = this.game.time.now - this.startTime;
        console.log("경과 시간: " + elapsedTime + "ms");
    }
};

game.state.add('game', GameState);
game.state.start('game');

위 코드에서 game.time.now는 현재 게임에서 경과한 시간을 밀리초 단위로 나타냅니다. 따라서 update 함수에서 현재 경과 시간을 계산하여 사용할 수 있습니다.

게임 내 시간 표시 구현

게임 내에서 시간을 표시하려면 게임 화면에 텍스트를 추가해야 합니다. Phaser에서는 game.add.text 메서드를 사용하여 텍스트를 추가할 수 있습니다.

아래는 시간을 표시하는 예시입니다:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game-container');

var GameState = {
    create: function() {
        this.startTime = this.game.time.now;
        
        this.timeText = this.game.add.text(16, 16, '경과 시간: 0ms', {
            fontSize: '32px',
            fill: '#ffffff'
        });
    },
    update: function() {
        var elapsedTime = this.game.time.now - this.startTime;
        this.timeText.text = '경과 시간: ' + elapsedTime + 'ms';
    }
};

game.state.add('game', GameState);
game.state.start('game');

위 코드에서는 create 함수에서 텍스트 스타일을 설정하고, update 함수에서 현재 경과 시간을 텍스트에 업데이트합니다. 이렇게 하면 게임 화면에 실시간으로 경과 시간이 표시됩니다.

정리

Phaser를 사용하여 게임 내에서 시간을 관리하고 표시하는 방법에 대해 알아보았습니다. game.time 객체를 사용하여 경과 시간을 계산하고, game.add.text를 사용하여 게임 화면에 시간을 표시할 수 있습니다. 이러한 기능을 사용하면 게임 내에서 시간 관리와 사용자에게 시간을 표시하는 기능을 쉽게 구현할 수 있습니다.

게임 내 시간 관리

게임 내 시간 표시 구현

정리

Reference