Skip to content

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

Size of sizer

  • Size
    var width = sizer.width;
    var height = sizer.height;
    
  • Display size
    var displayWidth = sizer.displayWidth;
    var displayHeight = sizer.displayHeight;
    
  • Inner size
    var innerWidth = sizer.innerWidth;
    var innerHeight = sizer.innerHeight;
    
  • Minimum size
    var minWidth = sizer.minWidth;
    var minHeight = sizer.minHeight;
    
  • Minimum inner size
    var minInnerWidth = sizer.minInnerWidth;
    var minInnerHeight = sizer.minInnerHeight;
    

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);
    // sizer.moveFrom({x, y, duration, ease});
    // sizer.moveFrom({x, y, speed, ease});
    
    or
    sizer
        .moveFromPromise(duration, x, y, ease)
        // .moveFromPromise({x, y, duration, ease})
        // .moveFromPromise({x, y, speed, 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.
    • speed : Get duration according to speed and distance between current sizer position to {x, y}
    • ease : 'Linear', 'Cubic', 'Elastic', 'Bounce', 'Back' ...
  • Move-from destroy
    sizer.moveFromDestroy(duration, x, y);
    // sizer.moveFrom(duration, x, y, ease);
    // sizer.moveFrom({x, y, duration, ease});
    // sizer.moveFrom({x, y, speed, ease});
    
    or
    sizer
        .moveFromDestroyPromise(duration, x, y, ease)
        // .moveFromDestroyPromise({x, y, duration, ease})
        // .moveFromDestroyPromise({x, y, speed, ease})
        .then(function(){
            // ...
        })    
    
  • Move to
    sizer.moveTo(duration, x, y);
    // sizer.moveTo(duration, x, y, ease);
    // sizer.moveTo({x, y, duration, ease});
    // sizer.moveTo({x, y, speed, ease});
    
    or
    sizer
        .moveToPromise(duration, x, y, ease)
        // .moveToPromise({x, y, duration, ease})
        // .moveToPromise({x, y, speed, 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.
    • speed : Get duration according to speed and distance between current sizer position to {x, y}
    • ease : 'Linear', 'Cubic', 'Elastic', 'Bounce', 'Back' ...
  • Move-to destroy
    sizer.moveToDestroy(duration, x, y);
    // sizer.moveTo(duration, x, y, ease);
    // sizer.moveTo({x, y, duration, ease});
    // sizer.moveTo({x, y, speed, ease});
    
    or
    sizer
        .moveToDestroyPromise(duration, x, y, ease)
        // .moveToDestroyPromise({x, y, duration, ease})
        // .moveToDestroyPromise({x, y, speed, 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

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, will indent children position.
    • 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, will shrink layout size.
    • 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 outterPadding = sizer.getOutterrPadding();
      
    • Get specific outter padding
      var value = sizer.getOutterPadding(key);
      
      • key : 'left', 'right', 'top', 'bottom'
  • Set outter padding of child, will shrink layout size.
    • Set outter padding via config
      sizer.setChildOuterPadding(
          child,
          {
              left: leftPadding, 
              right: rightPadding,
              top: topPadding,
              bottom: bottomPadding
          }
      );
      
      • child : A string key or game object.
    • Set outter padding via single number
      sizer.setChildOuterPadding(child, value);
      
      • child : A string key or game object.
    • Set specific outter padding
      sizer.setChildOuterPadding(child, key, value);
      
      • child : A string key or game object.
      • key : 'left', 'right', 'top', 'bottom'
  • Get outter padding of child
    • Get outter padding values
      var outterPadding = sizer.getChildOutterPadding(child);
      
      • child : A string key or game object.
    • Get specific outter padding
      var value = sizer.getChildOutterPadding(child, key);
      
      • child : A string key or game object.
      • 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
    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();

Change properties of child

Add to layer

sizer.addToLayer(layer);
  • layer : Layer game object.

Events

Layout children

Note

Enable sizer events by set sizerEvents to true in config.

  • Fire 'sizer.postlayout' event to all children after layout.
    child.on('sizer.postlayout', function(child, sizer){
        var prevState = sizer.getChildPrevState(children[i]);
    })
    
    • prevState : Properties before layout.
      • prevState.x, prevState.y : Child position before layout.
      • prevState.width, prevState.height, prevState.displayWidth, prevState.displayHeight, prevState.scaleX, prevState.scaleY : Child size before layout.
  • Fire 'postlayout' event.
    sizer.on('postlayout', function(children, sizer) {
        for(var i=0, cnt=children.length; i<cnt; i++) {
            var prevState = sizer.getChildPrevState(children[i]);
            // ...
        }
    })
    

Remove child

Note

Enable sizer events by set sizerEvents to true in config.

  • Fire 'sizer.remove' event to removed without destroyed child.
    child.on('sizer.remove', function(child, sizer){
    
    })
    
  • Fire 'remove' event.
    sizer.on('remove', function(child, sizer){
    
    })
    

Add child

Note

Enable sizer events by set sizerEvents to true in config.

  • Fire 'sizer.add' event to added child.
    child.on('sizer.add', function(child, sizer){
    
    })
    
  • Fire 'add' event.
    sizer.on('add', function(child, sizer){
    
    })
    

Broadcast event

Fire event to sizer itself and all children

sizer.broadcastEvent(eventName, parameter0, parameter1, ...);

Receive event

child.on(eventName, function(parameter0, parameter1, ...) {

}, scope);

Other properties

This game object inherits from ContainerLite.