Menu

Introduction

A container with buttons and sub-menu.

  • Author: Rex
  • Game object

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');
    
  • Add menu object
    var menu = scene.rexUI.add.menu(config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';
    var config = {
        // ...
        plugins: {
            scene: [{
                key: 'rexUI',
                plugin: UIPlugin,
                mapping: 'rexUI'
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add menu object
    var menu = scene.rexUI.add.menu(config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import { Menu } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
    
  • Add menu object
    var menu = new Menu(scene, config);
    sscene.add.existing(menu);
    

Add menu object

var menu = scene.rexUI.add.menu({
    // x: 0,
    // y: 0,
    // anchor: undefined,

    // orientation: 1,
    items: [],

    createBackgroundCallback: function(items) {
        var scene = items.scene;
        // container = ...
        return container;
    },

    createBackgroundCallbackScope: undefined,
    createButtonCallback: function(item, index, items) {
        var scene = item.scene;
        // var isFirstButton = (index === 0);
        // var isLastButton = (index === (items.length - 1));
        // container = ...
        return container;
    },
    createButtonCallbackScope: undefined,

    easeIn: 0,
    // easeIn: {
    //     duration: 500,
    //     ease: 'Cubic'
    // },

    easeOut: 0,
    // easeOut: {
    //     duration: 100,
    //     ease: 'Linear'
    // },
    // expandEvent: 'button.click'

    name: ''
});
  • x, y : Position of this object, it is valid when this object is the top object.
  • anchor : See anchor.
    • 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'.
  • orientation : Main orientation of the menu, default is 1 (top to bottom)
    • 'left-to-right', 'horizontal','h', 'x', or 0 : Arrange buttons from left ot right.
    • 'top-to-bottom', 'vertical','v', 'y', or 1 : Arrange buttons from top to bottom.
  • items : Array of item data for each button. Each item has
    • children : An array of items for sub-menu, optional.
    • Other custom properties
  • createBackgroundCallback : Callback to return container object of menu's bckground.
    • Properties of items parameter
      • items.scene : Scene of this menu object.
  • createButtonCallback : Callback to return container object of each item.
    • Properties of item parameter
      • item.scene : Scene of this menu object.
      • Other custom properties
  • easeIn : Scale up size when extend menu.
    • A number : Duration of ease, in milliseconds.
    • An object :
      • easeIn.duration : Duration of ease, in milliseconds.
      • easeIn.ease : Ease function, default is 'Cubic'
  • easeOut : Scale down size when extend menu.
    • A number : Duration of ease, in milliseconds.
    • An object :
      • easeOut.duration : Duration of ease, in milliseconds.
      • easeOut.ease : Ease function, default is 'Linear'
  • expandEvent : Event name of expanding sub-menu.
    • 'button.click' : Default value
    • 'button.over'
  • name : Set name of this menu.

Custom class

  • Define class
    class MyMenu extends RexPlugins.UI.Menu {
        constructor(scene, config) {
            super(scene, config);
            // ...
            sscene.add.existing(this);
        }
        // ...
    }
    
  • Create instance
    var menu = new MyMenu(scene, config);
    

Collapse

  • Collapse menu
    menu.collapse();
    
  • Collapse sub-menu
    menu.collapseSubMenu();
    

Other properties

See sizer object, base sizer object.

Events

  • Click button
    menu.on('button.click', function(button, index, pointer, event) {
        // ...
    }, scope);
    
    • button : Game object of triggered button.
    • index : Index of triggered button.
    • pointer : Pointer object.
    • Cancel remaining touched events : event.stopPropagation()
  • Pointer-over button
    menu.on('button.over', function(button, index, pointer, event) {
        // ...
    }, scope);
    
    • button : Game object of triggered button.
    • index : Index of triggered button.
    • pointer : Pointer object.
    • Cancel remaining touched events : event.stopPropagation()
  • Pointer-out button
    menu.on('button.out', function(button, index, pointer, event) {
        // ...
    }, scope);
    
    • button : Game object of triggered button.
    • index : Index of triggered button.
    • pointer : Pointer object.
    • Cancel remaining touched events : event.stopPropagation()