Fix-width buttons
Introduction¶
A container with a group of fix-width buttons.
- 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 fix-Width buttons object
var buttons = scene.rexUI.add.fixWidthButtons(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 fix-Width buttons object
var buttons = scene.rexUI.add.fixWidthButtons(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { FixWidthButtons } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
- Add fix-Width buttons object
var buttons = new FixWidthButtons(scene, config); sscene.add.existing(buttons);
Add Buttons object¶
var buttons = scene.rexUI.add.fixWidthButtons({
// x: 0,
// y: 0,
// anchor: undefined,
// width: undefined,
// height: undefined,
orientation: 0,
// Elements
// background: backgroundGameObject,
buttons: [
buttonGameObject,
buttonGameObject,
// ...
],
align: 0,
click: {
mode: 'pointerup',
clickInterval: 100
},
// space: 0,
// space: { left: 0, right:0, top:0, bottom:0, line:0, item:0 },
// name: '',
// draggable: false,
// eventEmitter: this,
// groupName: undefined,
// type: undefined,
// setValueCallback: undefined,
// setValueCallbackScope: undefined
});
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 :
width
,height
: Minimum width, minimum height.orientation
: Main orientation of button game objects.'left-to-right'
,'horizontal'
,'h'
,'x'
, or0
: Arrange button game objects from left ot right.'top-to-bottom'
,'vertical'
,'v'
,'y'
, or1
: Arrange button game objects from top to bottom.
background
: Game object of background, optional. This background game object will be resized to fit the size of grid table.buttons
: 1d/2d array of button game objects.align
: Align children of a line.0
,'left'
,'top'
: Align children of a line to left/top side.1
,'right'
,'bottom'
: Align children of a line to right/bottom side.2
,'center'
: Align children of a line to ceter.3
,'justify'
,'justify-left'
,'justify-top'
: If remainder space is less or equal than 25%, then justify children. Else align children to left/top side.4
,'justify-right'
,'justify-bottom'
: If remainder space is less or equal than 25%, then justify children. Else align children to right/bottom side.5
,'justify-cneter'
: If remainder space is less or equal than 25%, then justify children. Else align children to center.
click
: Configuration of button clicking.click.mode
:'pointerdown'
,'press'
, or0
: Fire 'click' event when touch pressed.'pointerup'
,'release'
, or1
: Fire 'click' event when touch released after pressed.
click.clickInterval
: Interval between 2 'click' events, in ms.
space
:- A number: Space between 2 button game objects.
- An object: Padding of button game objects.
space.left
,space.right
,space.top
,space.bottom
: Space of bounds.space.item
: Space betwen each child of a line.space.line
: Space between each line.
name
: Set name of this button game objects.eventEmitter
: Dispatch buttons' touch events to other game obhect, default is this buttons game object.groupName
: Optional group name for argument of touch events.type
: Type/behavior of these buttons.undefined
: No extra behavior, default value.'checkboxes'
: Set these buttons to checkboxes.'radio'
: Set these buttons to radio.
setValueCallback
: Callback to set value of a button.undefined
: No callback, default value.- A function object.
function(button, value, previousValue) { // ... }
button
: Button game object.value
:true
, orfalse
.previousValue
:true
, orfalse
.
Custom class¶
- Define class
class MyButtons extends RexPlugins.UI.FixWidthButtons { constructor(scene, config) { super(scene, config); // ... scene.add.existing(this); } // ... }
- Create instance
var buttons = new MyButtons(scene, config);
Layout children¶
Arrange position of all elements.
buttons.layout();
See also - dirty
Other properties¶
See sizer object
Events¶
- Click button
or
buttons.on('button.click', function(button, index, pointer, event) { // ... }, scope);
buttons.on('button.click', function(button, groupName, index, pointer, event) { // ... }, scope);
groupName
: Optional group name.button
: Triggered button game object.index
: Index of triggered button game object.pointer
: Pointer object.- Cancel remaining touched events :
event.stopPropagation()
- Pointer-over button
or
buttons.on('button.over', function(button, index, pointer, event) { // ... }, scope);
buttons.on('button.over', function(button, groupName, index, pointer, event) { // ... }, scope);
- Pointer-out button
or
buttons.on('button.out', function(button, index, pointer, event) { // ... }, scope);
buttons.on('button.out', function(button, groupName, index, pointer, event) { // ... }, scope);
- Enable button's input
or
buttons.on('button.enable', function(button, index) { // ... }, scope);
buttons.on('button.enable', function(button, groupName, index, pointer, event) { // ... }, scope);
- Disable button's input
or
buttons.on('button.disalbe', function(button, index) { // ... }, scope);
buttons.on('button.disalbe', function(button, groupName, index, pointer, event) { // ... }, scope);
Emit button click event¶
buttons.emitButtonClick(index);
index
: Index of triggered button game object, or a button game object.
Enable/disable input of button¶
- Enable a button's input
buttons.setButtonEnable(index); // buttons.setButtonEnable(index, true);
index
: Index of triggered button game object, or a button game object.
- Enable all buttons' input
buttons.setButtonEnable(); // buttons.setButtonEnable(true);
- Disable
buttons.setButtonEnable(index, true);
index
: Index of triggered button game object, or a button game object.
- Disable all buttons' input
buttons.setButtonEnable(false);
- Toggle
buttons.toggleButtonEnable(index);
- Toggle all buttons's input
buttons.toggleButtonEnable();
- Get button's input enable
var enabled = bottons.getButtonEnable(index);
Get element¶
- Get element
- Background game object
var background = buttons.getElement('background');
- Button game objects
or
var buttonObjects = buttons.getElement('buttons');
orvar buttonObject = buttons.getButton(index);
var buttonObjects = buttons.getElement('buttons[0]'); // First button
- Background game object
- Get by name
or
var gameObject = buttons.getElement('#' + name); // var gameObject = buttons.getElement('#' + name, recursive);
var gameObject = buttons.getByName('#' + name); // var gameObject = buttons.getByName('#' + name, recursive);
recursive
: Settrue
to search all children recursively.
Add button¶
- Add button
buttons.addButton(gameObject)
gameObject
: A game object, or an array of game objects.
Remove buttton¶
- Remove button
buttons.removeButton(gameObject, destroyChild);
gameObject
:- Game object, or array of game objects : Button game object.
- A number, or array of numbers : Index of button game object.
- A string, or array of strings : Name of button game object.
destroyChild
: Settrue
to destroy button game object.
- Remove all buttton
buttons.clearButtons(destroyChild);
destroyChild
: Settrue
to destroy button game objects.
Show/hide button¶
Hidden elements won't be counted when layouting.
Call buttons.layout()
, or topSizer.layout()
after show/hide any button.
- Show button
buttons.showButton(index);
index
: A number index, or a button game object.
- Hide button.
buttons.hideButton(index);
index
: A number index, or a button game object.
For each button¶
buttons.forEachButtton(callback, scope);
callback
:function(button, index, buttonArray) { // ... }
Checkboxes/radio¶
- Configure buttons to checkboxes/radio
var buttons = scene.rexUI.add.fixWidthButtons({ buttons: [ buttonGameObject, buttonGameObject, // ... ], type: 'checkboxes', setValueCallback: function(button, value, previousValue) { // ... }, // setValueCallbackScope: undefined });
buttons
: Array of button game objects.- Property
name
of each button game object will be used as a key inbuttons.data
- Property
type
: Set type to'checkboxes'
, or'radio'
.setValueCallback
: Callback to set value of a button.function(button, value) { // ... }
button
: Button game object.value
:true
, orfalse
.previousValue
:true
, orfalse
.
- State of a button : Stored in
buttons.data
Note
Checkboxes and radio don't support add, remove, show, or hide methods.
Checkboxes¶
- Read state
var state = buttons.getData(key);
key
:name
property of a button game object. (i.e.button.name
)state
:true
, orfalse
- Set state
buttons.setData(key, state);
key
:name
property of a button game object. (i.e.button.name
)state
:true
, orfalse
Radio¶
- Read state
var value = buttons.value;
value
:name
property of a button game object. (i.e.button.name
)
- Set state
buttons.value = key;
key
:name
property of a button game object. (i.e.button.name
)