SWIPE
phaser3-rex-plugins install
npm i phaser3-rex-plugins
npm i phaser3-rex-plugins-types
환경 설정에서 Gesture 관련 플러그인을 넣어준다.
import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin.js';
var config = {
// ...
plugins: {
scene: [{
key: 'rexGestures',
plugin: GesturesPlugin,
mapping: 'rexGestures'
},
// ...
]
}
// ...
};
var game = new Phaser.Game(config)
var swipe = scene.rexGestures.add.swipe(config);
class Demo extends Phaser.Scene {
constructor() {
super({
key: 'examples'
})
}
preload() {
// 위의 config에서 설정하지 않은 경우는 preload 단계에서 아래와 같이 설정해도 된다.(둘중 하나 선택)
// this.load.scenePlugin({
// key: 'rexgesturesplugin',
// url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js',
// sceneKey: 'rexGestures'
// });
}
create() {
this.print = print = this.add.text(0, 0, '')
this.swipeInput = this.rexGestures.add.swipe({ velocityThreshold: 1000, threshold: 5 })
.on('swipe', (swipe: any) => {
print.text += `swipe, v = ${swipe.dragVelocity}\n`;
// if (swipe.down) {
// this.direction = 'down';
// } else if (swipe.left) {
// this.direction = 'left';
// } else if (swipe.up) {
// this.direction = 'up';
// } else if (swipe.right) {
// this.direction = 'right';
// }
}, this);
// swipe는 화면 전체에 대해 리스닝하므로 화면 this.input.on 등(마우스 이벤트)을 활용하여 실제적으로 클릭된 오브젝트를 함께 처리하는 것이 유용하다.
this.input.on('gameobjectup', (pointer: any, gameObject: any) => { // gameObject에서 mouse Up일때 이벤트 발생
this.selectObject = null;
}, this);
this.input.on('gameobjectdown', (pointer: any, gameObject: any) => { // gameObject에서 mouse Up일때 이벤트 발생
this.selectObject = gameObject;
}, this);
}
update() {
if (this.swipeInput.isSwiped) {
this.print.text += `update(): swipe ${dumpDirectionStates(this.swipeInput)}\n`;
}
}
}
var directions = ['left', 'right', 'up', 'down'];
var dumpDirectionStates = function (swipe) {
var s = '';
var dir;
for (var i = 0, cnt = directions.length; i < cnt; i++) {
dir = directions[i];
if (swipe[dir]) {
s += ' ' + dir;
}
}
return s;
}
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
scene: Demo
};
var game = new Phaser.Game(config);