Skip to content

Cursor at bounds

Introduction

Map cursor-at-(left/right/top/botttom-)bound to (left/right/up/down) cursor key state.

  • 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('rexcursoratboundsplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcursoratboundsplugin.min.js', true);
    
  • Add cursor-at-bound object
    var cursorAtBound = scene.plugins.get('rexcursoratboundsplugin').add(scene, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import CursorAtBoundsPlugin from 'phaser3-rex-plugins/plugins/cursoratboundss-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexCursorAtBounds',
                plugin: CursorAtBoundsPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add cursor-at-bound object
    var cursorAtBound = scene.plugins.get('rexCursorAtBounds').add(scene, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import CursorAtBounds from 'phaser3-rex-plugins/plugins/cursoratboundss.js';
    
  • Add cursor-at-bound object
    var cursorAtBound = new CursorAtBounds(scene, config);
    

Create instance

var cursorAtBound = scene.plugins.get('rexCursorAtBounds').add(scene, {
    // bounds: undefined,
    // sensitiveDistance: 20,
});
  • bounds : A rectangle objectㄝ or undefined (to use game window as rectangle object), for detecting the position of cursor.
  • sensitiveDistance : A sensitive distance in pixels.

Map position of cursor to state of cursor key

  • Position x is between left bound and left bound + sensitive distance : left cursor key is pressed.
  • Position x is between right bound and right bound - sensitive distance : Right cursor key is pressed.
  • Position y is between top bound and top bound + sensitive distance : Up cursor key is pressed.
  • Position y is between bottom bound and bottom bound - sensitive distance : Down cursor key is pressed.

State of cursor keys

var cursorKeys = cursorAtBound.createCursorKeys();

var leftKeyDown = cursorKeys.left.isDown;
var rightKeyDown = cursorKeys.right.isDown;
var upKeyDown = cursorKeys.up.isDown;
var downKeyDown = cursorKeys.down.isDown;

Or

var leftKeyDown = cursorAtBound.left;
var rightKeyDown = cursorAtBound.right;
var upKeyDown = cursorAtBound.up;
var downKeyDown = cursorAtBound.down;
var noKeyDown = cursorAtBound.noKey;

Destroy

cursorAtBound.destroy();