Anchor

Introduction

Set position based on visible window.

Note

Visible window will be changed when scale mode is ENVELOP, WIDTH_CONTROLS_HEIGHT, or HEIGHT_CONTROLS_WIDTH.

  • Author: Rex
  • Behavior of game object

Live demos

Usage

Sample code

Install plugin

Load minify file

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

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import AnchorPlugin from 'phaser3-rex-plugins/plugins/anchor-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexAnchor',
                plugin: AnchorPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add anchor behavior
    var anchor = scene.plugins.get('rexAnchor').add(gameObject, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import Anchor from 'phaser3-rex-plugins/plugins/anchor.js';
    
  • Add anchor behavior
    var anchor = new Anchor(gameObject, config);
    

Create instance

var anchor = scene.plugins.get('rexAnchor').add(gameObject, {
    // left: '0%+0',
    // right: '0%+0',
    // centerX: '0%+0',
    // x: '0%+0',

    // top: '0%+0',
    // bottom: '0%+0',
    // centerY: '0%+0',
    // y: '0%+0'
});
  • left, right, centerX, x, top, bottom, centerY, y : Position based on visible window, which composed of
    • Percentage of visible width/height : 'p%', p: 0 ~ 100.
      • 'left'(=0%), 'center'(=50%), 'right'(=100%)
      • 'top'(=0%), 'center'(=50%), 'bottom'(=100%)
    • Offset : '+n', or '-n'.

For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center :

{
    left: 'left+10',
    centerY: 'center'
}

Reset config

anchor.resetFromJSON({
    // left: '0%+0',
    // right: '0%+0',
    // centerX: '0%+0',
    // x: '0%+0',

    // top: '0%+0',
    // bottom: '0%+0',
    // centerY: '0%+0',
    // y: '0%+0'
})
  • left, right, centerX, x, top, bottom, centerY, y : Position based on visible window, which composed of
    • Percentage of visible width/height : 'p%', p: 0~100
      • 'left'(=0%), 'center'(=50%), 'right'(=100%)
      • 'top'(=0%), 'center'(=50%), 'bottom'(=100%)
    • Offset : '+n', or '-n'