Phaser는 HTML5 기반의 게임 개발 프레임워크로, 다양한 게임 요소를 구성하고 조작할 수 있는 강력한 기능을 제공합니다. 이번 포스트에서는 Phaser을 사용하여 게임 마커를 설정하고 퍼즐 요소를 조작하는 방법에 대해 알아보겠습니다.

1. 게임 마커 설정하기

게임 마커는 퍼즐 요소의 위치를 표시하는 역할을 합니다. Phaser에서 게임 마커를 설정하려면 다음 단계를 따르세요:

// 마커 그룹 생성
let markerGroup = this.physics.add.group();

// 마커 생성
let marker = markerGroup.create(x, y, "marker");

// 마커 활성화
marker.setActive(true).setVisible(true);

위의 코드에서 markerGroup는 마커들을 담을 그룹을 생성합니다. markerGroup.create(x, y, "marker")를 사용하여 특정 위치에 마커를 생성하고, setActive(true)와 setVisible(true)를 호출하여 마커를 활성화시킵니다. 마커 스프라이트는 “marker” 이미지로 정의되어야 합니다.

2. 퍼즐 요소 조작하기

Phaser에서 퍼즐 요소를 조작하려면 다음 단계를 따르세요:

2.1. 퍼즐 요소 드래그 및 드롭

// 드래그 가능한 퍼즐 요소 생성
let puzzlePiece = this.physics.add.sprite(x, y, "puzzlePiece");
puzzlePiece.setInteractive();

// 드랍 영역 설정
let dropZone = this.add.zone(dropX, dropY, dropWidth, dropHeight);
this.physics.world.enable(dropZone);

// 드래그 앤 드롭 이벤트 추가
this.input.setDraggable(puzzlePiece);
this.input.on("drag", function (pointer, gameObject, dragX, dragY) {
  gameObject.x = dragX;
  gameObject.y = dragY;
});
this.input.on("dragend", function (pointer, gameObject, dropped) {
  if (!dropped) {
    gameObject.x = originalX;
    gameObject.y = originalY;
  }
});

위의 코드에서 puzzlePiece는 드래그할 수 있는 퍼즐 요소를 생성합니다. setInteractive()를 호출하여 퍼즐 요소에 상호작용 가능한 기능을 추가합니다.

dropZone은 퍼즐 요소를 드롭할 수 있는 영역을 설정합니다. this.add.zone(dropX, dropY, dropWidth, dropHeight)를 사용하여 영역을 생성하고, this.physics.world.enable(dropZone)을 호출하여 영역에 물리적인 충돌 감지 기능을 추가합니다.

this.input.setDraggable(puzzlePiece)를 호출하여 퍼즐 요소를 드래그 가능하도록 설정하고, drag 이벤트와 dragend 이벤트를 처리하여 드래그 중인 퍼즐 요소의 위치를 업데이트하고, 드래그가 끝난 후에 올바르지 않은 위치에 드롭된 경우 원래 위치로 되돌리는 기능을 추가합니다.

2.2. 퍼즐 요소 간 충돌 감지

// 충돌 감지 설정
this.physics.add.collider(puzzlePiece1, puzzlePiece2, function () {
  // 충돌이 발생했을 때 실행되는 함수
});

위의 코드에서 this.physics.add.collider(puzzlePiece1, puzzlePiece2, callback)를 호출하여 퍼즐 요소 간의 충돌을 감지하고, 충돌이 발생했을 때 실행될 콜백 함수를 정의합니다.

결론

Phaser를 사용하여 게임 마커를 설정하고 퍼즐 요소를 조작하는 방법을 알아보았습니다. 이러한 기능을 활용하여 다양한 게임 요소와 퍼즐 기능을 구현할 수 있습니다. Phaser 공식 문서를 참고하여 더 다양한 기능을 익히고 게임 개발에 활용해보세요!

참고 자료

• Phaser 공식 문서