[javascript] Phaser의 키보드 및 마우스 제어 기능 활용 방법

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 키보드 및 마우스 입력을 쉽게 제어할 수 있는 다양한 기능을 제공합니다. 이번 글에서는 Phaser를 사용하여 키보드 및 마우스 입력을 처리하는 방법에 대해 알아보겠습니다.

1. 키보드 입력 처리하기

Phaser에서는 Phaser.Input.Keyboard 객체를 사용하여 키보드 입력을 감지하고 처리할 수 있습니다. 아래는 간단한 예제 코드입니다.

// 키보드 객체 생성
let keyboard = this.input.keyboard;

// 키보드 이벤트 리스너 등록
keyboard.on('keydown', handleKeyDown);
keyboard.on('keyup', handleKeyUp);

// 키보드 이벤트 핸들러 함수
function handleKeyDown(event) {
  // 눌린 키의 keyCode 확인
  let keyCode = event.keyCode;
  
  // 특정 키가 눌렸을 때의 동작 수행
  if(keyCode === Phaser.Input.Keyboard.KeyCodes.LEFT) {
    // 좌측 이동 로직
  }
  
  if(keyCode === Phaser.Input.Keyboard.KeyCodes.RIGHT) {
    // 우측 이동 로직
  }
  
  // ...
}

function handleKeyUp(event) {
  // 키를 떼었을 때의 동작 수행
}

위 코드에서 Phaser.Input.Keyboard 객체를 생성하고, on 메서드를 사용하여 키보드 이벤트에 대한 리스너를 등록합니다. 이후 이벤트 핸들러 함수에서 event.keyCode를 통해 눌린 키의 keyCode를 확인하고 원하는 동작을 수행하면 됩니다.

2. 마우스 입력 처리하기

마우스 입력 처리도 키보드 입력 처리와 유사한 방식으로 이루어집니다. 아래는 마우스 입력을 처리하는 예제 코드입니다.

// 마우스 객체 생성
let mouse = this.input.mouse;

// 마우스 이벤트 리스너 등록
mouse.on('pointerdown', handleMouseDown);
mouse.on('pointerup', handleMouseUp);
mouse.on('pointermove', handleMouseMove);

// 마우스 이벤트 핸들러 함수
function handleMouseDown(event) {
  // 마우스 버튼이 눌릴 때의 동작 수행
  // event.button을 통해 어떤 버튼이 눌렸는지 확인 가능
}

function handleMouseUp(event) {
  // 마우스 버튼을 떼었을 때의 동작 수행
}

function handleMouseMove(event) {
  // 마우스의 이동에 따른 동작 수행
  // 이동한 위치는 event.x, event.y를 통해 확인 가능
}

Phaser.Input.Mouse 객체를 생성하고, 마찬가지로 on 메서드를 사용하여 마우스 이벤트에 대한 리스너를 등록하면 됩니다. 각 이벤트 핸들러 함수에서 원하는 동작을 수행하면 됩니다.

마무리

Phaser를 사용하여 게임을 개발할 때 키보드 및 마우스 입력 처리 기능은 필수적인 요소입니다. 이번 글에서는 Phaser에서 키보드 및 마우스 입력을 처리하는 방법에 대해 알아보았습니다. 추가적인 정보는 Phaser 공식 문서를 참고하세요.