

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 after sizer.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.
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 via
```
var child = sizer.getElement(key);
```

Minimum size¶

Get

var minWidth = sizer.minWidth;
var minHeight = sizer.minHeight;

Set

sizer.setMinSize(width, height);

or

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

sizer.setDirty();
// sizer.setDirty(true);

or

sizer.dirty = true;

Clear

sizer.setDirty(false);

or

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

sizer.left = leftBound;
sizer.right = rightBound;
sizer.top = topBound;
sizer.bottom = bottomBound;
sizer.centerX = centerXBound;
sizer.centerY = centerYBound;

or

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

sizer.popUp(duration);
// sizer.popUp(duration, undefined, ease);

or

sizer.popUpPromise(duration)
    .then(function() {
        // ....
    })

ease : Ease function, default is 'Cubic'.

Pop-up width only

sizer.popUp(duration, 'x');
// sizer.popUp(duration, 'x', ease);

or

sizer.popUpPromise(duration, 'x')
    .then(function() {
        // ....
    })

Pop-up height only

sizer.popUp(duration, 'y');
// sizer.popUp(duration, 'y', ease);

or

sizer.popUpPromise(duration, 'y')
    .then(function() {
        // ....
    })

Pop-up via config

sizer.popUp({
    duration: undefined,
    orientation: undefined,
    ease: undefined,
})

or

sizer.popUpPromise(config)
    .then(function() {
        // ....
    })

orientation : undefined, x, or y

Scale-down destroy

Scale-down width and height

sizer.scaleDownDestroy(duration);
// sizer.scaleDownDestroy(duration, undefined, ease);

or

sizer.scaleDownDestroyPromise(duration)
    .then(function() {
        // ....
    })

ease : Ease function, default is 'Linear'.

Scale-down width only

sizer.scaleDownDestroy(duration, 'x');
// sizer.scaleDownDestroy(duration, 'x', ease);

or

sizer.scaleDownDestroyPromise(duration, 'x');
    .then(function() {
        // ....
    })

Scale-down height only

sizer.scaleDownDestroy(duration, 'y');
// sizer.scaleDownDestroy(duration, 'y', ease);

or

sizer.scaleDownDestroyPromise(duration, 'y')
    .then(function() {
        // ....
    })

Scale-down without destroy

Scale-down width and height

sizer.scaleDown(duration);
// sizer.scaleDown(duration, undefined, ease);

or

sizer.scaleDownPromise(duration, undefined, ease)
    .then(function() {
        // ....
    })

Scale-down width only

sizer.scaleDowny(duration, 'x');
// sizer.scaleDowny(duration, 'x', ease);

or

sizer.scaleDownPromise(duration, 'x', ease)
    .then(function() {
        // ....
    })

Scale-down height only

sizer.scaleDown(duration, 'y');
// sizer.scaleDown(duration, 'y', ease);

or

sizer.scaleDownPromise(duration, 'y', ease)
    .then(function() {
        // ....
    })

Events

Pop-up complete

sizer.on('popup.complete', function(sizer) { });

Scale-down, scale-down destroy complete

sizer.on('scaledown.complete', function(sizer) { });

Fade¶

Fade-in

sizer.fadeIn(duration);

or

sizer.fadeIn(duration, endAlpha);

or

sizer.fadeIn(duration, {start:0, end:1});

or

sizer.fadeInPromise(duration)
    .then(function(){
        // ...
    })

Fade-out destroy

sizer.fadeOutDestroy(duration);

or

sizer.fadeOutDestroyPromise(duration)
    .then(function(){
        // ...
    })

Fade-out without destroy

sizer.fadeOut(duration);

or

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) { });

Ease move¶

Move from
```
sizer.moveFrom(duration, x, y);
// sizer.moveFrom(duration, x, y, ease);
```
or
```
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

sizer.moveFromDestroy(duration, x, y);
// sizer.moveFrom(duration, x, y, ease);

or

sizer.moveFromDestroyPromise(duration, x, y, ease)
    .then(function(){
        // ...
    })

Move to
```
sizer.moveTo(duration, x, y);
// sizer.moveTo(duration, x, y, ease);
```
or
```
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

sizer.moveToDestroy(duration, x, y);
// sizer.moveTo(duration, x, y, ease);

or

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) { });

Drag top-most sizer¶

Draggable child

Enable

sizer.setDraggable(child);
// sizer.setDraggable(child, true)

or

sizer.setDraggable(elementName);
// sizer.setDraggable(elementName, true)

Disable

sizer.setDraggable(child, false);

or

sizer.setDraggable(elementName, false);

Draggable sizer object

Enable

sizer.setDraggable();
// sizer.setDraggable(true);

Disalbe
```
sizer.setDraggable(false);
```

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 object
- color : Default value is 0xffffff
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 object
- color : Default value is 0xffffff
- name :
  - false : Don't display child name, default value
  - true : 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 name
      function(scene, child, childBoundsRect) { // return scene.add.text(0, 0, ''); }
    - name.createTextCallbackScope : Callback scope of name.createTextCallback, default is undefined
    - name.align :
      - 'left-top', or Phaser.Display.Align.TOP_LEFT : Align text game object at left-top. Default value
      - 'center', or Phaser.Display.Align.CENTER : Align text game object at center
      - 'left', or Phaser.Display.Align.LEFT_CENTER : Align text game object at left-center
      - 'right', or Phaser.Display.Align.RIGHT_CENTER : Align text game object at right-center
      - 'top', or Phaser.Display.Align.RIGHT_CENTER : Align game text object at top-center
      - 'bottom', or Phaser.Display.Align.BOTTOM_CENTER : Align game text object at bottom-center
      - 'left-bottom', or Phaser.Display.Align.BOTTOM_LEFT : Align text game object at left-bottom
      - 'right-top', or Phaser.Display.Align.TOP_RIGHT : Align text game object at right-top
      - 'right-bottom', or Phaser.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(), or graphics.destroy() will also destroy these text game objects

Hide¶

Set invisible, won't layout it
```
sizer.hide();
```
or
```
sizer.hide(gameObject);
```
Set visible, will layout it
```
sizer.show();
```
or
```
sizer.show(gameObject);
```

Padding¶

Set inner padding

Set inner padding via config

sizer.setInnerPadding({
    left: leftPadding, 
    right: rightPadding,
    top: topPadding,
    bottom: bottomPadding
});

Set inner padding via single number
```
sizer.setInnerPadding(value);
```
Set specific inner padding
```
sizer.setInnerPadding(key, value);
```
- key : 'left', 'right', 'top', 'bottom'

Get inner padding
- Get inner padding values
```
var innerPadding = sizer.getInnerPadding();
```
- Get specific inner padding
```
var value = sizer.getInnerPadding(key);
```
  - key : 'left', 'right', 'top', 'bottom'

Set outter padding

Set outter padding via config

sizer.setOutterPadding({
    left: leftPadding, 
    right: rightPadding,
    top: topPadding,
    bottom: bottomPadding
});

Set outter padding via single number
```
sizer.setOutterPadding(value);
```
Set specific outter padding
```
sizer.setOutterPadding(key, value);
```
- key : 'left', 'right', 'top', 'bottom'

Get outter padding
- Get outter padding values
```
var innerPadding = sizer.getOutterrPadding();
```
- Get specific outter padding
```
var value = sizer.getOutterPadding(key);
```
  - key : 'left', 'right', 'top', 'bottom'

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'

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);
```

Get child by name

var child = sizer.getByName(name);
// var child = sizer.getByName(name, recursive);

recursive : Set true 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.