[javascript] Phaser에서 키 입력 및 액션 인식 구현하기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 다양한 플랫폼에서 동작하는 게임을 만들 수 있습니다. 이번에는 Phaser를 사용하여 키 입력과 액션 인식을 구현하는 방법에 대해 알아보겠습니다.

키 입력 처리하기

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

let cursors;

function create() {
  // 키보드 입력을 받기 위해 'cursors' 객체 생성
  cursors = this.input.keyboard.createCursorKeys();
}

function update() {
  if (cursors.left.isDown) {
    // 왼쪽 화살표 키를 눌렀을 때 실행할 코드
  } else if (cursors.right.isDown) {
    // 오른쪽 화살표 키를 눌렀을 때 실행할 코드
  } else if (cursors.up.isDown) {
    // 위쪽 화살표 키를 눌렀을 때 실행할 코드
  } else if (cursors.down.isDown) {
    // 아래쪽 화살표 키를 눌렀을 때 실행할 코드
  }
}

키보드 객체를 생성하고, update 함수에서 각 키 입력에 대한 동작을 정의할 수 있습니다. 이 예제에서는 화살표 키에 대한 입력을 처리하고 있습니다.

액션 인식하기

특정한 액션이 발생했을 때 일련의 동작을 실행하고 싶다면, Phaser의 input 객체를 사용하여 액션 인식을 구현할 수 있습니다. 아래는 간단한 액션 인식 예제입니다.

let spaceKey;

function create() {
  // Space 키 입력을 받기 위해 'spaceKey' 객체 생성
  spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
}

function update() {
  if (Phaser.Input.Keyboard.JustDown(spaceKey)) {
    // Space 키를 한 번 눌렀을 때 실행할 코드
  }
}

addKey 메서드를 사용하여 액션에 해당하는 키를 등록하고, update 함수에서 JustDown 메서드를 사용하여 해당 키가 한 번 눌렸을 때 동작을 실행합니다.

마치며

Phaser를 사용하여 키 입력과 액션 인식을 구현하는 방법에 대해 알아보았습니다. 이를 활용하면 다양한 게임 내부의 동작을 키 입력에 따라 제어할 수 있습니다. Phaser에는 더욱 다양한 기능과 메서드가 있으니, 관련 문서를 참고하여 게임 개발에 활용해보시기 바랍니다.

키 입력 처리하기

액션 인식하기

마치며

참고 자료