Sizer
Introduction¶
Layout children game objects.
It is inspired from wxSizer.
- 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 sizer object
var sizer = scene.rexUI.add.sizer(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 sizer object
var sizer = scene.rexUI.add.sizer(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { Sizer } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
- Add sizer object
var sizer = new Sizer(scene, config); sscene.add.existing(sizer);
Add sizer object¶
var sizer = scene.rexUI.add.sizer({
orientation: 0,
// x: 0,
// y: 0,
// anchor: undefined,
// width: undefined,
// height: undefined,
// space: { left: 0, right:0, top:0, bottom:0, item:0 }
});
or
var sizer = scene.rexUI.add.sizer(x, y, {
orientation: 0,
// width: undefined,
// height: undefined,
// anchor: undefined,
// space: { left: 0, right:0, top:0, bottom:0, item:0 }
});
or
var sizer = scene.rexUI.add.sizer(x, y, width, height, {
orientation: 0,
// anchor: undefined,
// space: { left: 0, right:0, top:0, bottom:0, item:0 }
});
or
var sizer = scene.rexUI.add.sizer(x, y, width, height, orientation, {
// anchor: undefined,
// space: { left: 0, right:0, top:0, bottom:0, item:0 }
});
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 the sizer.'left-to-right'
,'horizontal'
,'h'
,'x'
, or0
: Arrange game objects from left ot right.'top-to-bottom'
,'vertical'
,'v'
,'y'
, or1
: Arrange game objects from top to bottom.
space
: Pads spaces.space.left
,space.right
,space.top
,space.bottom
: Space of bounds.space.item
: Space between 2 children game objects.
Custom class¶
- Define class
class MySizer extends RexPlugins.UI.Sizer { constructor(scene, x, y, minWidth, minHeight, orientation, config) { super(scene, x, y, minWidth, minHeight, orientation, config); // ... scene.add.existing(this); } // ... }
- Create instance
var sizer = new MySizer(scene, x, y, minWidth, minHeight, orientation);
Add background¶
sizer.addBackground(child);
or
sizer.addBackground(child, {left: 0, right: 0, top: 0, bottom: 0}, key);
left
,right
,top
,bottom
: Extra padded space. Default is 0.key
: Add this child into childMap, which could be read back bysizer.getElement(key)
.undefined
: Don't add this child. Default value.
Add child¶
Add a game obejct to sizer
sizer.add(child);
or
sizer.add(child, proportion, align, padding, expand, key, index);
or
sizer.add(child,
{
proportion: 0,
align: 'center',
padding: {left: 0, right: 0, top: 0, bottom: 0},
expand: false,
key: undefined,
index: undefined
}
);
child
: A game object.proportion
:0
, or'min'
: Place next game object closely. Default value.> 0
: Stretch game object via proportion value.null
: Don't arrange this child.
align
:'center'
, orPhaser.Display.Align.CENTER
: Align game object at center. Default value.'left'
, orPhaser.Display.Align.LEFT_CENTER
: Align game object at left-center.'right'
, orPhaser.Display.Align.RIGHT_CENTER
: Align game object at right-center.'top'
, orPhaser.Display.Align.RIGHT_CENTER
: Align game object at top-center.'bottom'
, orPhaser.Display.Align.BOTTOM_CENTER
: Align game object at bottom-center.
padding
: Extra padded space. Default is 0.- A number for left/right/top/bottom bounds,
- Or a plain object.
{ left: 0, right: 0, top: 0, bottom: 0 }
expand
: Settrue
to- Expand height when
orientation
is0
(left-to-right
), or - Expand width when
orientation
is1
(top-to-bottom
)
- Expand height when
key
: Add this child into childMap, which could be read back bysizer.getElement(key)
.undefined
: Don't add this child. Default value.
index
: Insert child to.undefined
: Insert child at last.
Add space¶
Add a stretchable space.
sizer.addSpace();
// sizer.addSpace(proportion);
Layout children¶
Arrange position of all children.
sizer.layout();
See also - dirty
Remove child¶
- Remove a child
sizer.remove(child);
- Remove and destroy a child
sizer.remove(child, true);
- Remove all children
sizer.removeAll();
- Remove and destroy all children
sizer.removeAll(true);
- Remove all children and backgrounds
sizer.clear();
- Remove and destroy all children and backgrounds
sizer.clear(true);
Get element¶
- Get element
- All children items
var items = sizer.getElement('items');
- All children items
- Get by name
or
var gameObject = sizer.getElement('#' + name); // var gameObject = sizer.getElement('#' + name, recursive);
var gameObject = sizer.getByName('#' + name); // var gameObject = sizer.getByName('#' + name, recursive);
recursive
: Settrue
to search all children recursively.
Other properties¶
See base sizer object.