Drag rotate

Introduction

Get dragging angle around a specific point.

  • Author: Rex
  • Member of scene

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexdragrotateplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdragrotateplugin.min.js', true);
    
  • Add drag-rotate input
    var dragRotate = scene.plugins.get('rexdragrotateplugin').add(scene, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import DragRotatePlugin from 'phaser3-rex-plugins/plugins/dragrotate-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexDragRotate',
                plugin: DragRotatePlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add drag-rotate input
    var dragRotate = scene.plugins.get('rexDragRotate').add(scene, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import DragRotate from 'phaser3-rex-plugins/plugins/dragrotate.js';
    
  • Add drag-rotate input
    var dragRotate = new DragRotate(scene, config);
    

Create instance

var dragRotate = scene.plugins.get('rexDragRotate').add(scene, {
    x: 0,
    y: 0,
    maxRadius: 100
    minRadius: 0,
    // enable: true,
});
  • x, y : Orgin point, in world position.
  • maxRadius, minRadius : Dragging is valid when distance between touch pointer and origin position is larger then minRadius and less then maxRadius.
  • enable : Set false to disable input events.

Enable

  • Get
    var enable = dragRotate.enable;  // enable: true, or false
    
  • Set
    dragRotate.setEnable(enable);  // enable: true, or false
    // dragRotate.enable = enable;
    
  • Toggle
    dragRotate.toggleEnable();
    

Origin point

  • Get
    var x = dragRotate.x;
    var y = dragRotate.y;
    
  • Set
    dragRotate.setOrigin(x, y);
    
    or
    dragRotate.setOrigin(pointer); // pointer: {x, y}
    

Note

Parameter (x,y) is world position, not camera position.

Radius

  • Get
    var maxRadius = dragRotate.maxRadius;
    var minRadius = dragRotate.minRadius;
    
  • Set
    dragRotate.setRadius(maxRadius, minRadius);
    

Get dragging state

var state = dragRotate.state;
  • 0 : No touch pointer
  • 1 : Catch touch pointer
    • Fire 'dragstart' event when catching touch pointers.
    • Fire 'drag' event when any catched touch pointer moved.
    • Fire 'dragend' event when releasing catched touch pointer.

Is drag

var isDrag = dragRotate.isDrag;

Return true if (dragRotate.state === 1) and catched touch pointer just moved.

Events

On dragging

  • On dragging
    dragRotate.on('drag', function(dragRotate) {
        // gameObject.rotation += dragRotate.deltaRotation;
    }, scope);
    
    • dragRotate.deltaRotation : Dragging angle around origin position, in radians.
      • Add to gameObject.rotation to spin target game object.
        gameObject.rotation += dragRotate.deltaRotation;
        
    • dragRotate.deltaAngle : Dragging angle around origin position, in degrees.
      • Add to gameObject.angle to spin target game object.
        gameObject.angle += dragRotate.deltAangle;
        
    • dragRotate.cw : Return true if dragging is dragrotate-wise.
    • dragRotate.ccw : Return true if dragging is counter-dragrotate-wise.

On drag start, on drag end

  • On drag touch pointer start, fired when catching touch pointer.
    dragRotate.on('dragstart', function(dragRotate) {
    
    }, scope);
    
  • On drag touch pointer end, fired when releasing the catched touch pointer.
    dragRotate.on('dragend', function(dragRotate) {
    
    }, scope);
    

Catched touch pointer

  • Pointer, available when state is 1
    var pointer = dragRotate.pointer;
    
    • World position of pointer
      var x = pointer.worldX;
      var y = pointer.worldY;