[javascript] Phaser에서 터치 및 제스처 인식 기능 추가하기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 다양한 플랫폼에서 게임을 만들 수 있게 해주는 강력한 도구입니다. 이번에는 Phaser를 사용하여 터치 및 제스처 인식 기능을 추가하는 방법에 대해 알아보겠습니다.

1. 터치 인식 기능 추가하기

Phaser에서 터치 인식 기능을 사용하기 위해서는 input 모듈을 활성화해야 합니다. 다음은 터치 이벤트를 처리하는 간단한 예제입니다.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    },
    input: {
        touch: true
    }
};

const game = new Phaser.Game(config);

function preload() {
    // 이미지, 사운드 등의 리소스를 불러옵니다.
}

function create() {
    // 게임 오브젝트를 생성하고 초기화합니다.

    // 터치 이벤트를 처리하기 위해 해당 게임 오브젝트에 대한 이벤트 리스너를 등록합니다.
    this.input.on('gameobjectdown', handleTouch);
}

function handleTouch(pointer, gameObject) {
    // 터치가 발생한 게임 오브젝트를 처리합니다.
}

위 예제에서 this.input.on을 사용하여 gameobjectdown 이벤트에 대한 리스너를 등록하고, handleTouch 함수에서 터치 이벤트를 처리하도록 구성하였습니다.

2. 제스처 인식 기능 추가하기

Phaser에서 제스처 인식 기능을 사용하기 위해서는 gestures 모듈을 활성화해야 합니다. 다음은 드래그 및 핀치 제스처를 처리하는 예제입니다.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    input: {
        touch: true,
        activePointers: 2
    },
    plugins: {
        scene: [{
            key: 'Phaser3SwipePlugin',
            plugin: PhaserSwipe.SwipePlugin,
            mapping: 'swipe'
        }]
    }
};

const game = new Phaser.Game(config);

function preload() {
    // 이미지, 사운드 등의 리소스를 불러옵니다.
}

function create() {
    // 게임 오브젝트를 생성하고 초기화합니다.

    // 드래그 제스처를 처리하기 위해 해당 게임 오브젝트에 대한 이벤트 리스너를 등록합니다.
    this.input.on('drag', handleDrag);

    // 핀치 제스처를 처리하기 위해 해당 게임 오브젝트에 대한 이벤트 리스너를 등록합니다.
    this.input.on('pinch', handlePinch);
}

function update() {
    // 게임 상태를 업데이트합니다.
}

function handleDrag(pointer, gameObject, dragX, dragY) {
    // 드래그 이벤트를 처리합니다.
}

function handlePinch(pointer, scale) {
    // 핀치 이벤트를 처리합니다.
}

위 예제에서 input 객체의 activePointers 속성을 통해 제스처 인식에 사용되는 포인터 수를 설정하고, plugins 객체를 통해 Phaser3SwipePlugin 플러그인을 등록하여 제스처를 처리하도록 구성하였습니다. 이제 drag 이벤트와 pinch 이벤트를 처리하는 함수인 handleDrag와 handlePinch를 구현하면 됩니다.

Phaser를 사용하여 터치 및 제스처 인식 기능을 추가하는 방법에 대해 간단하게 알아보았습니다. 더 복잡한 기능을 구현하고 싶다면 Phaser 문서를 참고하시기 바랍니다.

참고 자료

Phaser 공식 문서