[javascript] Phaser에서 미니맵 및 HUD 추가하기

22 Nov 2023

javascript

이번에는 Phaser 게임 엔진을 사용하여 미니맵 및 HUD(Head-Up Display)를 추가하는 방법에 대해 알아보겠습니다. 미니맵은 게임의 전체 맵을 작은 크기로 표시하는 데 사용되며, HUD는 게임의 상태 정보나 게임 내 요소를 표시하는 데 사용됩니다.

미니맵 추가하기

먼저, Phaser 게임에 미니맵을 추가하기 위해 Phaser.Tilemaps.Parsers를 사용해야 합니다. 이를 위해 간단한 코드 예시를 살펴보겠습니다.

// 게임 생성
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload() {
    // 맵 타일셋 및 맵 데이터 로드
    this.load.image('tiles', 'assets/tiles.png');
    this.load.tilemapTiledJSON('map', 'assets/map.json');
}

function create() {
    // 맵 생성
    var map = this.make.tilemap({ key: 'map' });
    var tileset = map.addTilesetImage('tiles', 'tiles');

    // 미니맵 생성
    var minimap = map.createStaticLayer('minimap', tileset, 0, 0);
    minimap.setScale(0.2); // 미니맵 크기 조정
}

이 예시는 Phaser 게임을 생성하고, 맵 타일셋과 맵 데이터를 불러옵니다. 그런 다음 make.tilemap 메서드를 사용하여 맵을 생성하고, createStaticLayer 메서드를 사용하여 미니맵을 생성합니다. setScale 메서드를 사용하여 미니맵의 크기를 조정할 수 있습니다.

HUD 추가하기

다음으로, Phaser 게임에 HUD를 추가하는 방법에 대해 알아보겠습니다. HUD를 표시하기 위해서는 Phaser의 Scene 객체를 사용해야 합니다.

var HudScene = new Phaser.Scene('Hud');

HudScene.preload = function() {
    // HUD에 사용할 이미지, 스프라이트 등을 로드합니다.
    this.load.image('healthBar', 'assets/healthbar.png');
};

HudScene.create = function() {
    // HUD에 필요한 요소를 생성하고 배치합니다.
    this.healthBar = this.add.sprite(10, 10, 'healthBar');
    this.healthBar.setOrigin(0, 0);
};

// 게임에 HudScene 객체를 추가합니다.
game.scene.add('Hud', HudScene);
game.scene.start('Hud');

이 예시에서는 HudScene이라는 Scene 객체를 생성하고, preload 함수에서 HUD에 사용할 이미지를 로드합니다. 그 후 create 함수에서 필요한 HUD 요소를 생성하고 배치합니다. 이런 방식으로 게임에 HudScene 객체를 추가하고 활성화시켜 HUD를 표시할 수 있습니다.

결론

Phaser 게임 엔진을 사용하여 게임에 미니맵 및 HUD를 추가하는 방법에 대해 알아보았습니다. 이를 통해 게임의 플레이어 경험을 향상시킬 수 있으며, 게임의 상태나 맵 정보를 시각적으로 전달할 수 있습니다. Phaser의 다양한 기능과 메서드를 활용하여 더욱 멋진 게임을 만들어보세요!

참고 자료

Phaser 공식 문서