Menu
Introduction¶
A container with buttons and sub-menu.
- Author: Rex
- Game object
Live demos¶
Usage¶
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'
.
- Percentage of visible width/height :
orientation
: Main orientation of the menu, default is1
(top to bottom)'left-to-right'
,'horizontal'
,'h'
,'x'
, or0
: Arrange buttons from left ot right.'top-to-bottom'
,'vertical'
,'v'
,'y'
, or1
: Arrange buttons from top to bottom.
items
: Array of item data for each button. Each item haschildren
: An array of items for sub-menu, optional.- Other custom properties
createBackgroundCallback
: Callback to return container object of menu's bckground.- Properties of
items
parameteritems.scene
: Scene of this menu object.
- Properties of
createButtonCallback
: Callback to return container object of each item.- Properties of
item
parameteritem.scene
: Scene of this menu object.- Other custom properties
- Properties of
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()
- Expand(Pop-up start) sub-menu
menu.on('expand', function(subMenu, parentButton) { // .... }, scope)
subMenu
: Sub-menu.parentButton
: Game object of triggered button.rootMenu
: Root-menu
- Pop-up root-menu, or sub-menu completely
menu.on('popup.complete', function(menu) { // .... }, scope)
menu
: Root-menu, or sub-menu
- Collapse(Scale-down starting) root-menu, or sub-menu
menu.on('collapse', function(subMenu, parentButton, rootMenu) { // .... }, scope)
subMenu
: Sub-menu.parentButton
: Game object of triggered button.rootMenu
: Root-menu
- Scale-down root-menu completely
menu.on('scaledown.complete', function(rootMenu) { // .... }, scope)
rootMenu
: Root-menu