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

Scale

  • Pop-up
    • Pop-up width and height
      sizer.popUp(duration);
      // sizer.popUp(duration, undefined, ease);
      
      or
      sizer.popUpPromise(duration)
          .then(function() {
              // ....
          })
      
    • 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() {
              // ....
          })
      
    • 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);
    
  • 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
    1. Add child
      sizer.addChildrenMap(key, child);
      
    2. 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.