

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

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

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.