[javascript] Phaser를 사용하여 2D 게임 개발하기

22 Nov 2023

javascript

Phaser는 HTML5 기반 게임 개발 프레임워크로, 2D 게임을 쉽게 개발할 수 있게 도와줍니다. 이 프레임워크는 JavaScript로 작성되었으며, Canvas나 WebGL을 사용하여 게임을 렌더링합니다. 이번 글에서는 Phaser를 사용하여 2D 게임을 개발하는 기본적인 방법에 대해 알아보겠습니다.

Phaser 설치

Phaser를 사용하기 위해선 먼저 Phaser를 설치해야 합니다. 만약 npm을 사용하고 있다면, 다음 명령어를 사용하여 Phaser를 설치할 수 있습니다.

npm install phaser

또는 CDN을 사용하여 Phaser를 로드할 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>

게임 개발을 위한 기본 구조

Phaser를 사용하여 게임을 개발할 때는 기본적으로 다음과 같은 구조를 가지게 됩니다.

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

const game = new Phaser.Game(config);

function preload() {
  // 게임에 필요한 이미지, 사운드 등을 로드
}

function create() {
  // 게임 오브젝트를 생성하고 초기화
}

function update() {
  // 게임 상태를 업데이트
}

위의 코드는 Phaser를 초기화하고 세 가지 함수를 정의하는 기본적인 구조입니다. preload 함수는 게임에 필요한 리소스를 로드하는데 사용되며, create 함수는 게임 오브젝트를 생성하고 초기화하는데 사용됩니다. update 함수는 게임 상태를 업데이트하는데 사용됩니다.

게임 개발 예제

다음은 간단한 2D 플랫폼 게임 개발 예제입니다. 이 예제에서는 주인공 캐릭터를 움직이고 점프할 수 있게 만들어보겠습니다.

const config = {
  width: 800,
  height: 600,
  type: Phaser.AUTO,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: false
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

const game = new Phaser.Game(config);

let player;

function preload() {
  this.load.image('sky', 'assets/sky.png');
  this.load.image('ground', 'assets/platform.png');
  this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}

function create() {
  this.add.image(400, 300, 'sky');

  platforms = this.physics.add.staticGroup();
  platforms.create(400, 568, 'ground').setScale(2).refreshBody();

  player = this.physics.add.sprite(100, 450, 'dude');
  player.setBounce(0.2);
  player.setCollideWorldBounds(true);

  this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });

  this.anims.create({
    key: 'turn',
    frames: [{ key: 'dude', frame: 4 }],
    frameRate: 20
  });

  this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
  });

  cursors = this.input.keyboard.createCursorKeys();

  this.physics.add.collider(player, platforms);
}

function update() {
  if (cursors.left.isDown) {
    player.setVelocityX(-160);
    player.anims.play('left', true);
  }
  else if (cursors.right.isDown) {
    player.setVelocityX(160);
    player.anims.play('right', true);
  }
  else {
    player.setVelocityX(0);
    player.anims.play('turn');
  }

  if (cursors.up.isDown && player.body.touching.down) {
    player.setVelocityY(-330);
  }
}

위의 코드는 주인공 캐릭터를 움직이고 점프할 수 있게 만드는 예제입니다. preload 함수에서는 게임에 필요한 이미지를 로드하고, create 함수에서는 게임 오브젝트를 생성하고 초기화합니다. update 함수에서는 게임 상태를 업데이트합니다. 이 예제에서 사용된 이미지와 스프라이트 시트는 별도의 경로에서 로드되어야 하니, 적절한 경로로 수정해주세요.

결론

Phaser를 사용하여 2D 게임을 개발하는 방법에 대해 알아보았습니다. Phaser는 강력한 기능을 제공하며, 다양한 플랫폼에서 동작하는 게임을 개발할 수 있습니다. 추가적으로 Phaser의 복잡한 기능들에 대해서는 공식 문서를 참고하시기 바랍니다.

참고 링크: