[javascript] Phaser에서 효과음과 배경음악 관리하기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 게임의 오디오 요소를 관리하는 기능을 갖고 있습니다. 효과음과 배경음악을 게임에 추가하고 관리하는 방법에 대해 알아보겠습니다.

효과음 추가하기

Phaser에서 효과음을 추가하려면 this.sound.add 메서드를 사용합니다. 아래는 예시 코드입니다.

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

const game = new Phaser.Game(gameConfig);

const preload = function() {
  // 사전 로드할 리소스
  this.load.audio('explosion', 'assets/sounds/explosion.wav');
};

const create = function() {
  // 게임 시작 시 초기화
  const explosionSound = this.sound.add('explosion');

  // 효과음 재생
  explosionSound.play();
};

game.scene.add('preload', preload);
game.scene.add('create', create);
game.scene.start('preload');
game.scene.start('create');

위 코드에서는 preload 함수에서 explosion이라는 효과음을 로드하고, create 함수에서 해당 효과음을 추가하고 재생하고 있습니다. this.sound.add 메서드를 사용하여 효과음을 추가한 뒤, play 메서드로 재생할 수 있습니다.

배경음악 추가하기

배경음악을 추가하려면 this.sound.add 메서드를 사용하는 방법은 동일하지만, 효과음과 다르게 반복 재생되도록 설정해야 합니다. 아래는 배경음악을 추가하는 예시 코드입니다.

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

const game = new Phaser.Game(gameConfig);

const preload = function() {
  // 사전 로드할 리소스
  this.load.audio('backgroundMusic', 'assets/music/backgroundMusic.mp3');
};

const create = function() {
  // 게임 시작 시 초기화
  const backgroundMusic = this.sound.add('backgroundMusic', { loop: true });

  // 배경음악 재생
  backgroundMusic.play();
};

game.scene.add('preload', preload);
game.scene.add('create', create);
game.scene.start('preload');
game.scene.start('create');

위 코드에서는 preload 함수에서 backgroundMusic이라는 배경음악을 로드하고, create 함수에서 해당 배경음악을 추가하고 반복 재생하도록 설정하고 있습니다. { loop: true } 옵션을 사용하여 반복 재생을 활성화할 수 있습니다.

Phaser에서는 더 다양한 오디오 관련 기능을 제공하고 있으므로, 필요에 따라 API 문서를 참고하여 자세히 살펴보시기 바랍니다.

효과음 추가하기

배경음악 추가하기

참고 자료