Pinch

Introduction

Get scale factor from 2 dragging touch pointers.

• Author: Rex
• Member of scene

Live demos

Pinch-zoom

Usage

Sample code

Install plugin

Load minify file

• Load plugin (minify file) in preload stage

  scene.load.scenePlugin('rexgesturesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgesturesplugin.min.js', 'rexGestures', 'rexGestures');
  

• Add pinch input

  var pinch = scene.rexGestures.add.pinch(config);
  // var pinch = scene.rexGestures.add.pinch(gameObject, config);
  

Import plugin

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Install plugin in configuration of game

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

• Add pinch input

  var pinch = scene.rexGestures.add.pinch(config);
  // var pinch = scene.rexGestures.add.pinch(gameObject, config);
  

Import class

• Install rex plugins from npm

  npm i phaser3-rex-plugins
  

• Import class

  import { Pinch } from 'phaser3-rex-plugins/plugins/gestures.js';
  

• Add pinch input

  var pinch = new Pinch(scene, config);
  // var pinch = new Pinch(gameObject, config);
  

Create instance

• Pinch input

  var pinch = scene.rexGestures.add.pinch({
      // enable: true,
      // bounds: undefined,
  
      // threshold: 0,
  });
  

  • enable : Set false to disable input events.
  • bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor.
  • threshold : Fire pinch events after dragging distances of catched pointers are larger than this threshold.
• Pinch behavior of game object

  var pan = scene.rexGestures.add.pinch(gameObject, {
      // enable: true,
      // bounds: undefined,
  
      // threshold: 0,
  });
  

  • Start pinching when pointer-down on this game object.

Enable

• Get

  var enable = pinch.enable;  // enable: true, or false
  

• Set

  pinch.setEnable(enable);  // enable: true, or false
  // pinch.enable = enable;
  

• Toggle

  pinch.toggleEnable();
  

Events

On dragging

• On dragging 1^st touch pointer, fired when 1^st touch pointer is moving

  pinch.on('drag1', function(pinch) {
      // var drag1Vector = pinch.drag1Vector; // drag1Vector: {x, y}
  }, scope);
  

  • pinch.drag1Vector : Drag vector from prevoius touch position to current touch position of 1^st catched touch pointer.
• On dragging 2 touch pointers, fired when any catched touch pointer moved.

  pinch.on('pinch', function(pinch) {
      // var scaleFactor = pinch.scaleFactor;
      // gameObject.scaleX *= scaleFactor;
      // gameObject.scaleY *= scaleFactor;
  }, scope);
  

  • pinch.scaleFactor : Rate of distance change between 2 catched touch pointers.

On drag start, on drag end

• On drag 1 touch pointer start, fired when catching 1^st touch pointer.

  pinch.on('drag1start', function(pinch) {
  
  }, scope);
  

• On drag 1 touch pointer end, fired when releasing the last one catched touch pointer.

  pinch.on('drag1end', function(pinch) {
  
  }, scope);
  

• On drag 2 touch pointers start, fired when catching 2 touch pointers.

  pinch.on('pinchstart', function(pinch) {
  
  }, scope);
  

• On drag 2 touch pointers end, fired when releasing any catched touch pointer.

  pinch.on('pinchend', function(pinch) {
  
  }, scope);
  

Scale factor

var scaleFactor = pinch.scaleFactor;

Rate of distance change between 2 catched touch pointers. (i.e current distance between 2 catched touch pointers / previous distance ).

Drag vector of 1^st touch pointer

var drag1Vector = pinch.drag1Vector; // {x, y}

Catched touch pointers

• Pointer 0, available when state is 1

  var pointer0 = pinch.pointers[0];
  

  • Position of pointer

    var x = pointer0.x;
    var y = pointer0.y;
    var worldX = pointer0.worldX;
    var worldY = pointer0.worldY;
    

• Pointer 1, available when state is 2

  var pointer0 = pinch.pointers[1];
  

Is pinched

var isPinched = pinch.isPinched;

Return true if pinched.

Is pointer inside another game object

Under any pinch event,

pinch.on('pinch', function(pinch) {
    var isPointer0InsideGameObject = pinch.isPointer0InGameObject(anotherGameObject);
    var isPointer1InsideGameObject = pinch.isPointer1InGameObject(anotherGameObject);
});

Other properties

• Drag threshold
  • Get

    var dragThreshold = pinch.dragThreshold;
    

  • Set

    pinch.setDragThreshold(dragThreshold);
    // pinch.dragThreshold = dragThreshold;
    

• Detect bounds
  • Get

    var bounds = pinch.bounds;
    

  • Set

    pinch.setDetectBounds(bounds);
    // pinch.bounds = bounds;