[javascript] Phaser를 이용하여 액션 게임 만들기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 액션 게임을 만드는 데 매우 효과적입니다. 이 튜토리얼에서는 Phaser를 사용하여 간단한 액션 게임을 만드는 방법을 알아보겠습니다.

1. Phaser 설치 및 설정

먼저, Phaser를 설치하고 설정해야 합니다. 설치는 npm을 사용하여 다음과 같이 수행할 수 있습니다:

npm install phaser

설치가 완료되면, HTML 파일에 다음과 같이 Phaser를 추가합니다:

<script src="node_modules/phaser/dist/phaser.min.js"></script>

이제 Phaser를 사용할 준비가 되었습니다.

2. 게임 화면 설정

Phaser는 게임을 동작시키는 데 필요한 기본적인 요소들을 제공합니다. 먼저, 게임을 위한 캔버스를 생성하고 화면 크기를 설정하는 코드를 작성해보겠습니다:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

위 코드에서 width와 height는 게임 화면의 크기를 설정하는 부분입니다.

3. 게임 캐릭터와 움직임 설정

게임의 주인공인 캐릭터를 생성하고 움직이는 로직을 구현해보겠습니다. 먼저, 캐릭터의 이미지를 불러오는 preload 함수를 작성합니다:

function preload() {
    this.load.image('character', 'assets/character.png');
}

위 코드에서 character는 캐릭터의 식별자이며, 'assets/character.png'는 캐릭터 이미지의 파일 경로입니다.

다음으로, 실제 캐릭터를 생성하고 키보드 입력에 따라 움직이도록 하는 create와 update 함수를 작성합니다:

let character;

function create() {
    character = this.add.image(400, 300, 'character');
}

function update() {
    const cursorKeys = this.input.keyboard.createCursorKeys();

    if (cursorKeys.left.isDown) {
        character.x -= 5;
    } else if (cursorKeys.right.isDown) {
        character.x += 5;
    }

    if (cursorKeys.up.isDown) {
        character.y -= 5;
    } else if (cursorKeys.down.isDown) {
        character.y += 5;
    }
}

위 코드에서 create 함수에서는 게임 화면에 캐릭터 이미지를 추가하고, update 함수에서는 키보드 입력에 따라 캐릭터의 위치를 변경합니다. 이제 플레이어가 화살표 키를 누를 때마다 캐릭터가 움직일 것입니다.

4. 몬스터와 충돌 처리

이번에는 몬스터를 추가하고 캐릭터와의 충돌 처리를 구현해보겠습니다. 먼저, 몬스터의 이미지를 불러오는 preload 함수를 수정합니다:

function preload() {
    this.load.image('character', 'assets/character.png');
    this.load.image('monster', 'assets/monster.png');
}

위 코드에서 monster는 몬스터의 식별자이며, 'assets/monster.png'는 몬스터 이미지의 파일 경로입니다.

다음으로, 몬스터를 생성하고 캐릭터와의 충돌 처리를 추가하는 create와 update 함수를 수정합니다:

let character;
let monster;

function create() {
    character = this.add.image(400, 300, 'character');
    monster = this.add.image(Phaser.Math.Between(100, 700), Phaser.Math.Between(100, 500), 'monster');
}

function update() {
    const cursorKeys = this.input.keyboard.createCursorKeys();

    if (cursorKeys.left.isDown) {
        character.x -= 5;
    } else if (cursorKeys.right.isDown) {
        character.x += 5;
    }

    if (cursorKeys.up.isDown) {
        character.y -= 5;
    } else if (cursorKeys.down.isDown) {
        character.y += 5;
    }

    if (Phaser.Geom.Intersects.RectangleToRectangle(character.getBounds(), monster.getBounds())) {
        // 캐릭터와 몬스터가 충돌했을 때 처리 로직 작성
    }
}

위 코드에서 create 함수에서는 몬스터 이미지를 추가하고, update 함수에서는 캐릭터와 몬스터의 충돌을 감지한 후, 처리할 로직을 작성합니다.

5. 게임 실행

이제 게임을 실행해보겠습니다. HTML 파일에 다음과 같이 <canvas> 태그를 추가합니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Phaser Game</title>
</head>
<body>
    <script src="node_modules/phaser/dist/phaser.min.js"></script>
    <script src="game.js"></script>
</body>
</html>

그리고 game.js 파일에 위의 코드를 복사하여 붙여넣습니다. 그 다음, 웹브라우저에서 HTML 파일을 열면 게임이 실행됩니다.

결론

Phaser를 사용하면 HTML5 기반의 액션 게임을 쉽게 만들 수 있습니다. 이 튜토리얼에서는 Phaser를 설치하고 게임 화면 설정, 캐릭터와 움직임 설정, 몬스터와 충돌 처리를 구현하는 방법을 알아보았습니다. 시작해보세요!