Base sizer
Introduction¶
Base class of all ui plugins.
- Author: Rex
Usage¶
Background¶
sizer.addBackground(gameObject);
// sizer.addBackground(gameObject, key);
// sizer.addBackground(gameObject, paddingConfig, key);
gameObject
: Background game object will be resized aftersizer.layout()
method.- Round rectangle game object
var gameObject = scene.rexUI.add.roundRectangle(x, y, width, height, radius, fillColor);
- Nine-patch game object
var gameObject = scene.rexUI.add.ninePatch(x, y, width, height, key, columns, rows, config);
- Custom game object which has
resize(width, height)
method.- Display width, display height will be changed if this background game object does not have
resize
method.
- Display width, display height will be changed if this background game object does not have
- Round rectangle game object
paddingConfig
: Add space between bounds. Default is 0.- A number for left/right/top/bottom bounds,
- Or a plain object.
{ left: 0, right: 0, top: 0, bottom: 0 }
key
: A string key. Get background game object back viavar child = sizer.getElement(key);
Minimum size¶
- Get
var minWidth = sizer.minWidth; var minHeight = sizer.minHeight;
- Set
or
sizer.setMinSize(width, height);
sizer.setMinWidth(width); sizer.setMinHeight(height);
Resize top-most sizer
sizer.setMinSize(width, height).layout()
Dirty¶
Don't layout this sizer if sizer.dirty
is false
. i.e. Size of this sizer won't be changed, but won't layout children neither.
Default value is true
.
- Get
var dirty = sizer.dirty;
- Set
or
sizer.setDirty(); // sizer.setDirty(true);
sizer.dirty = true;
- Clear
or
sizer.setDirty(false);
sizer.dirty = false;
Bounds of sizer¶
- Get
var leftBound = sizer.left; var rightBound = sizer.right; var topBound = sizer.top; var bottomBound = sizer.bottom; var centerX = sizer.centerX; var centerY = sizer.centerY;
- Set
or
sizer.left = leftBound; sizer.right = rightBound; sizer.top = topBound; sizer.bottom = bottomBound; sizer.centerX = centerXBound; sizer.centerY = centerYBound;
sizer.alignLeft(leftBound); sizer.alignRight(rightBound); sizer.alignTop(topBound); sizer.alignBottom(bottomBound); sizer.alignCenterX(centerXBound); sizer.alignCenterY(centerYBound);
Push into bounds¶
Align sizer to bound if overlapping it.
sizer.pushIntoBounds();
or
sizer.pushIntoBounds(bounds);
bounds
: Bounds in rectangle object.
Scale¶
- Pop-up
- Pop-up width and height
or
sizer.popUp(duration); // sizer.popUp(duration, undefined, ease);
sizer.popUpPromise(duration) .then(function() { // .... })
ease
: Ease function, default is'Cubic'
.
- Pop-up width only
or
sizer.popUp(duration, 'x'); // sizer.popUp(duration, 'x', ease);
sizer.popUpPromise(duration, 'x') .then(function() { // .... })
- Pop-up height only
or
sizer.popUp(duration, 'y'); // sizer.popUp(duration, 'y', ease);
sizer.popUpPromise(duration, 'y') .then(function() { // .... })
- Pop-up via config
or
sizer.popUp({ duration: undefined, orientation: undefined, ease: undefined, })
sizer.popUpPromise(config) .then(function() { // .... })
orientation
:undefined
,x
, ory
- Pop-up width and height
- Scale-down destroy
- Scale-down width and height
or
sizer.scaleDownDestroy(duration); // sizer.scaleDownDestroy(duration, undefined, ease);
sizer.scaleDownDestroyPromise(duration) .then(function() { // .... })
ease
: Ease function, default is'Linear'
.
- Scale-down width only
or
sizer.scaleDownDestroy(duration, 'x'); // sizer.scaleDownDestroy(duration, 'x', ease);
sizer.scaleDownDestroyPromise(duration, 'x'); .then(function() { // .... })
- Scale-down height only
or
sizer.scaleDownDestroy(duration, 'y'); // sizer.scaleDownDestroy(duration, 'y', ease);
sizer.scaleDownDestroyPromise(duration, 'y') .then(function() { // .... })
- Scale-down width and height
- Scale-down without destroy
- Scale-down width and height
or
sizer.scaleDown(duration); // sizer.scaleDown(duration, undefined, ease);
sizer.scaleDownPromise(duration, undefined, ease) .then(function() { // .... })
- Scale-down width only
or
sizer.scaleDowny(duration, 'x'); // sizer.scaleDowny(duration, 'x', ease);
sizer.scaleDownPromise(duration, 'x', ease) .then(function() { // .... })
- Scale-down height only
or
sizer.scaleDown(duration, 'y'); // sizer.scaleDown(duration, 'y', ease);
sizer.scaleDownPromise(duration, 'y', ease) .then(function() { // .... })
- Scale-down width and height
- Events
- Pop-up complete
sizer.on('popup.complete', function(sizer) { });
- Scale-down, scale-down destroy complete
sizer.on('scaledown.complete', function(sizer) { });
- Pop-up complete
Fade¶
- Fade-in
or
sizer.fadeIn(duration);
orsizer.fadeIn(duration, endAlpha);
orsizer.fadeIn(duration, {start:0, end:1});
sizer.fadeInPromise(duration) .then(function(){ // ... })
- Fade-out destroy
or
sizer.fadeOutDestroy(duration);
sizer.fadeOutDestroyPromise(duration) .then(function(){ // ... })
- Fade-out without destroy
or
sizer.fadeOut(duration);
sizer.fadeOutPromise(duration) .then(function(){ // ... })
- Events
- Fade-in complete
sizer.on('fadein.complete', function(sizer) { });
- Fade-out, fade-out destroy complete
sizer.on('fadeout.complete', function(sizer) { });
- Fade-in complete
Ease move¶
- Move from
or
sizer.moveFrom(duration, x, y); // sizer.moveFrom(duration, x, y, ease);
sizer.moveFromPromise(duration, x, y, ease) .then(function(){ // ... })
x
,y
: Start position.- Number : Start position x/y.
- String(
+=300
) : Related position of current position x/y. undefined
: Current position x/y.
ease
:'Linear'
,'Cubic'
,'Elastic'
,'Bounce'
,'Back'
...
- Move-from destroy
or
sizer.moveFromDestroy(duration, x, y); // sizer.moveFrom(duration, x, y, ease);
sizer.moveFromDestroyPromise(duration, x, y, ease) .then(function(){ // ... })
- Move to
or
sizer.moveTo(duration, x, y); // sizer.moveTo(duration, x, y, ease);
sizer.moveToPromise(duration, x, y, ease) .then(function(){ // ... })
x
,y
: End position.- Number : End position x/y.
- String(
+=300
) : Related position of current position x/y. undefined
: Current position x/y.
ease
:'Linear'
,'Cubic'
,'Elastic'
,'Bounce'
,'Back'
...
- Move-to destroy
or
sizer.moveToDestroy(duration, x, y); // sizer.moveTo(duration, x, y, ease);
sizer.moveToDestroyPromise(duration, x, y, ease) .then(function(){ // ... })
- Events
- Move-from complete
sizer.on('movefrom.complete', function(sizer) { });
- Move-to complete
sizer.on('moveto.complete', function(sizer) { });
- Move-from complete
Drag top-most sizer¶
- Draggable child
- Enable
or
sizer.setDraggable(child); // sizer.setDraggable(child, true)
sizer.setDraggable(elementName); // sizer.setDraggable(elementName, true)
- Disable
or
sizer.setDraggable(child, false);
sizer.setDraggable(elementName, false);
- Enable
- Draggable sizer object
- Enable
sizer.setDraggable(); // sizer.setDraggable(true);
- Disalbe
sizer.setDraggable(false);
- Enable
Pin game object¶
sizer.pin(gameObject);
Note
Method sizer.add
is override in each sizer class usually.
Draw bounds¶
- Draw bounds on a graphics game object
sizer.drawBounds(graphics, color);
graphics
: Graphics game objectcolor
: Default value is0xffffff
- Draw bounds and display name of child
sizer.drawBounds(graphics, { // color: 0xffffff, // name: false, // name: true, // name: { // createTextCallback: function(scene) { // return scene.add.text(0, 0, ''); // }, // createTextCallbackScope: undefined, // align: 'left-top' // } });
graphics
: Graphics game objectcolor
: Default value is0xffffff
name
:false
: Don't display child name, default valuetrue
: Display child name with default text game object, aligned at left-top of child bounds.- Plain object :
name.createTextCallback
: Callback of creating customized text game object for child namefunction(scene, child, childBoundsRect) { // return scene.add.text(0, 0, ''); }
name.createTextCallbackScope
: Callback scope ofname.createTextCallback
, default isundefined
name.align
:'left-top'
, orPhaser.Display.Align.TOP_LEFT
: Align text game object at left-top. Default value'center'
, orPhaser.Display.Align.CENTER
: Align text game object at center'left'
, orPhaser.Display.Align.LEFT_CENTER
: Align text game object at left-center'right'
, orPhaser.Display.Align.RIGHT_CENTER
: Align text game object at right-center'top'
, orPhaser.Display.Align.RIGHT_CENTER
: Align game text object at top-center'bottom'
, orPhaser.Display.Align.BOTTOM_CENTER
: Align game text object at bottom-center'left-bottom'
, orPhaser.Display.Align.BOTTOM_LEFT
: Align text game object at left-bottom'right-top'
, orPhaser.Display.Align.TOP_RIGHT
: Align text game object at right-top'right-bottom'
, orPhaser.Display.Align.BOTTOM_RIGHT
: Align text game object at right-bottom
- Text game objects of these children's name will be attached on graphics game object,
graphics.clear()
, orgraphics.destroy()
will also destroy these text game objects
Anchor¶
sizer.setAnchor({
// 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'
- Percentage of visible width/height :
For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center :
{
left: 'left+10',
centerY: 'center'
}
Get child¶
- Get child by specific key
- Add child
sizer.addChildrenMap(key, child);
- Get child
var child = sizer.getElement(key);
- Add child
- Get child by name
var child = sizer.getByName(name); // var child = sizer.getByName(name, recursive);
recursive
: Settrue
to search all children recursively.
Get parent¶
- Get parent sizer
var parentSizer = sizer.getParentSizer();
- Get topmost sizer
var topmostSizer = sizer.getTopmostSizer();
Is in touching¶
var isTouching = sizer.isInTouching();
Other properties¶
This game object inherits from ContainerLite.