[javascript] Phaser에서 마우스 및 키보드 입력에 따른 조작법 구현하기

22 Nov 2023

javascript

Phaser는 HTML5로 게임을 개발할 수 있는 강력한 JavaScript 프레임워크입니다. 이 프레임워크를 사용하면 마우스와 키보드 입력에 따른 조작법을 간단하게 구현할 수 있습니다. 이번 글에서는 Phaser에서 마우스와 키보드 입력을 처리하는 방법에 대해 알아보겠습니다.

마우스 입력 처리하기

마우스 입력은 Phaser의 input 객체를 사용하여 처리할 수 있습니다. 다음은 클릭 이벤트를 처리하는 예제 코드입니다.

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

var mainState = {
  preload: function() {
    // 게임에 필요한 리소스를 미리 로드하는 부분
  },
  
  create: function() {
    // 게임 오브젝트를 생성하고 초기화하는 부분
  },
  
  update: function() {
    // 프레임마다 실행되는 게임 로직
  },
  
  handleClick: function() {
    // 클릭 이벤트 핸들러
    // 마우스 클릭이 발생할 때 실행됩니다.
  }
};

game.state.add('main', mainState);
game.state.start('main');

game.input.onDown.add(mainState.handleClick, this);

game.input.onDown 이벤트를 사용하여 마우스 클릭 이벤트를 감지하고, handleClick 함수를 실행시킵니다. 마우스의 좌표나 다른 속성을 사용하려면 event 객체를 핸들러 함수에 전달할 수 있습니다.

키보드 입력 처리하기

키보드 입력은 Phaser의 input 객체를 사용하여 처리할 수 있습니다. 다음은 키보드 입력을 처리하는 예제 코드입니다.

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

var mainState = {
  preload: function() {
    // 게임에 필요한 리소스를 미리 로드하는 부분
  },
  
  create: function() {
    // 게임 오브젝트를 생성하고 초기화하는 부분
    game.input.keyboard.addCallbacks(this, null, null, this.handleKeyPress);
  },
  
  update: function() {
    // 프레임마다 실행되는 게임 로직
  },
  
  handleKeyPress: function(event) {
    // 키보드 입력 이벤트 핸들러
    // 키 입력이 발생할 때 실행됩니다.
    if (event.keyCode === Phaser.Keyboard.SPACEBAR) {
      // 스페이스바를 눌렀을 때 실행될 로직
    }
  }
};

game.state.add('main', mainState);
game.state.start('main');

game.input.keyboard.addCallbacks 함수를 사용하여 키보드 입력 이벤트를 감지하고, handleKeyPress 함수를 실행시킵니다. event 객체를 통해 눌린 키의 코드를 확인하고 필요한 로직을 처리할 수 있습니다.

결론

Phaser를 사용하면 마우스와 키보드 입력에 따른 조작법을 간단하게 구현할 수 있습니다. 마우스 입력은 game.input.onDown 이벤트를 사용하고, 키보드 입력은 game.input.keyboard.addCallbacks 함수를 사용하여 처리할 수 있습니다. 위 예제 코드를 기반으로 원하는 동작을 추가하여 게임을 개발해보세요!

더 많은 Phaser 기능에 대해서는 Phaser 공식 사이트를 참고하시기 바랍니다.