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);