8 direction

Introduction

Move game object by cursor keys, with a constant speed.

  • Author: Rex
  • Arcade behavior of game object

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Enable arcade physics engine in configuration of game
    var config = {
        // ...
        physics: {
            default: 'arcade',
            arcade: {
                // debug: true
            }
        }
    }
    var game = new Phaser.Game(config);
    
  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexeightdirectionplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeightdirectionplugin.min.js', true);
    
  • Add eight-direction behavior
    var eightDirection = scene.plugins.get('rexeightdirectionplugin').add(gameObject, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Enable arcade physics engine and install plugin in configuration of game
    import EightDirectionPlugin from 'phaser3-rex-plugins/plugins/eightdirection-plugin.js';
    var config = {
        physics: {
            default: 'arcade',
            arcade: {
                // debug: true
            }
        },
        // ...
        plugins: {
            global: [{
                key: 'rexEightDirection',
                plugin: EightDirectionPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add eight-direction behavior
    var eightDirection = scene.plugins.get('rexEightDirection').add(gameObject, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Enable arcade physics engine in configuration of game
    var config = {
        // ...
        physics: {
            default: 'arcade',
            arcade: {
                // debug: true
            }
        }
    }
    var game = new Phaser.Game(config);
    
  • Import class
    import EightDirection from 'phaser3-rex-plugins/plugins/eightdirection.js';
    
  • Add eight-direction behavior
    var eightDirection = new EightDirection(gameObject, config);
    

Create instance

var eightDirection = scene.plugins.get('rexEightDirection').add(gameObject, {
    speed: 200,
    // dir: '8dir',     // 0|'up&down'|1|'left&right'|2|'4dir'|3|'8dir'
    // rotateToDirection: false,
    // enable: true,
    // cursorKeys: scene.input.keyboard.createCursorKeys()
});
  • speed : moving speed, pixels in second.
  • dir :
    • 'up&down', or 0 :Aaccept up or down cursor keys only.
    • 'left&right', or 1 : Aaccept left or right cursor keys only.
    • '4dir', or 2 : Aaccept up, down, left or right cursor keys.
    • '8dir', or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.
  • rotateToDirection : Set true to change angle towards moving direction.
  • enable : set false to disable moving.
  • cursorKeys : CursorKey object, using keyboard's cursorKeys by default.

Set speed

eightDirection.setSpeed(speed);
// eightDirection.speed = speed;

Set rotate-to-direction

eightDirection.setRotateToDirection(rotateToDirection);
  • rotateToDirection : Set true to change angle towards moving direction

Set direction mode

eightDirection.setDirMode(dir);
  • dir :
    • 'up&down', or 0 :Aaccept up or down cursor keys only.
    • 'left&right', or 1 : Aaccept left or right cursor keys only.
    • '4dir', or 2 : Aaccept up, down, left or right cursor keys.
    • '8dir', or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.