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

  • Scale up from 0 to current scale of game object.
    • Pop-up width and height
      sizer
          //.setScale(scaleX, scaleY)
          .popUp(duration);
      
      // sizer.popUp(duration, undefined, ease);
      
      or
      sizer
          //.setScale(scaleX, scaleY)
          .popUpPromise(duration)
          .then(function() {
              // ....
          })
      
    • Pop-up width only
      sizer
          //.setScaleX(scaleX)
          .popUp(duration, 'x');
      
      // sizer.popUp(duration, 'x', ease);
      
      or
      sizer
          //.setScaleX(scaleX)
          .popUpPromise(duration, 'x')
          .then(function() {
              // ....
          })
      
    • Pop-up height only
      sizer
          //.setScaleY(scaleY)
          .popUp(duration, 'y');
      
      // sizer.popUp(duration, 'y', ease);
      
      or
      sizer
          //.setScaleY(scaleY)
          .popUpPromise(duration, 'y')
          .then(function() {
              // ....
          })
      
    • Pop-up via config
      sizer
          //.setScale(scaleX, scaleY)
              .popUp({
              duration: undefined,
              orientation: undefined,
              ease: undefined,
          })
      
      or
      sizer
          //.setScale(scaleX, scaleY)
          .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, endAlpha)
        .then(function(){
            // ...
        })
    
    or
    sizer.fadeInPromise(duration, {start:0, end:1})
        .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) { });
      

Shake

  • Start
    sizer.shake(duration);
    // sizer.shake(duration, magnitude);
    
    or
    sizer.shakePromise(duration, magnitude)
        .then(function(){
            // ...
        })
    
  • Events
    • Shake complete
      sizer.on('shake.complete', function(sizer) { });
      

Ease data

  • Start
    sizer.easeDataTo(key, value, duration);
    // sizer.easeDataTo(key, value, duration, ease);
    // sizer.easeDataTo({ key, value, duration, ease });
    // sizer.easeDataTo({ key, value, speed, ease });
    
    or
    sizer.easeDataToPromise(key, value, duration, ease)
        .then(function(){
            // ...
        })
    
  • Stop
    sizer.stopEaseData(key);           // Set to end value
    // sizer.stopEaseData(key, false); // Stop at current value
    
    or
    sizer.stopAllEaseData();           // Set to end value
    // sizer.stopAllEaseData(false);   // Stop at current value
    
  • Events
    • Easing complete
      sizer.on('easedata.' + key + '.complete', function(sizer) { });
      
      sizer.on('easedata.complete', function(key, 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);
      

Click

  • Add click event
    sizer.onClick(callback, scope);
    // sizer.onClick(callback, scope, config);
    
    • config : See Button
    • callback :
      function(button, gameObject, pointer, event) {
      
      }
      
  • Turn off click event
    sizer.offClick(callback, scope);
    
  • Enable click event
    sizer.enableClick();
    
  • Disable click event
    sizer.disableClick();
    

Equal to

var click = scene.rexUI.add.click(sizer, config);
click.on('click', callback, scope);

Click outside

  • Add click-outside event
    sizer.onClickOutside(callback, scope);
    // sizer.onClickOutside(callback, scope, config);
    
    • config : See ClickOutside
    • callback :
      function(clickOutside, gameObject, pointer) {
      
      }
      
  • Turn off click-outside event
    sizer.offClickOutside(callback, scope);
    
  • Enable click-outside event
    sizer.enableClickOutside();
    
  • Disable click-outside event
    sizer.disableClickOutside();
    

Equal to

var clickOutside = scene.rexUI.add.clickOutside(sizer, config);
clickOutside.on('clickoutside', callback, scope);

Set children interactive

Applies click, tap, press, swipe behaviors on this sizer, to detect input events of children.

sizer.setChildrenInteractive({
    // click: {mode: 'release', clickInterval: 100},

    // over: undefined,

    // press: {time: 251, threshold: 9},

    // tap: {time: 250, tapInterval: 200, threshold: 9, tapOffset: 10, 
    //       taps: undefined, minTaps: undefined, maxTaps: undefined,},

    // swipe: {threshold: 10, velocityThreshold: 1000, dir: '8dir'},

    // inputEventPrefix: 'child.',
})
  • click : Configuration of Button behavior.
    • false : Don't install Button behavior.
  • over :
    • false : Don't fire over/out events
  • press : Configuration of Press behavior.
    • false : Don't install Press behavior.
  • tap : Configuration of Tap behavior.
    • false : Don't install Tap behavior.
  • swipe : Configuration of Swipe behavior.
    • false : Don't install Swipe behavior.
  • inputEventPrefix : Prefix string of each event, default is 'child.'.

Note

Input behaviors are installed to this Sizer game object, not each child. And it assumes that all children are not overlapped. Use Button if user needs to enable/disable input behaviors of each child individually.

Events

  • Click
    sizer.on('child.click', function(child, pointer, event) {
        // ...
    }, scope);
    
    • child : Triggered child game object.
    • pointer : Pointer object.
  • Pointer-over
    sizer.on('child.over', function(child, pointer, event) {
        // ...
    }, scope);
    
  • Pointer-out
    sizer.on('child.out', function(child, pointer, event) {
        // ...
    }, scope);
    
  • Press
    sizer.on('child.pressstart', function(child, pointer) { 
        // ...
    }, scope);
    
    sizer.on('child.pressend', function(child, pointer) { 
        // ...
    }, scope);
    
  • Tap
    sizer.on(tapEventName, function(child, pointer) { 
        // ...
    }, scope);
    
    • tapEventName : 'child.1tap', 'child.2tap', 'child.3tap', etc ...
  • Swipe
    sizer.on(swipeEventName, function(child, pointer) { 
        // ...
    }, scope);
    
    • swipeEventName : 'child.swipeleft', 'child.swiperight', 'child.swipeup', 'child.swipedown'.

Pin game object

sizer.pin(gameObject);

Note

Method sizer.add is override in each sizer class usually.

Draw bounds

  • Draw bounds of shown game object on a graphics game object
    sizer.drawBounds(graphics, color);
    
  • Draw bounds of shown game object, 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 outer padding, which is equal to padding parameter when adding this sizer to parent sizer.
    • Set outer padding via config
      sizer.setOuterPadding({
          left: leftPadding, 
          right: rightPadding,
          top: topPadding,
          bottom: bottomPadding
      });
      
    • Set outer padding via single number
      sizer.setOuterPadding(value);
      
    • Set specific outer padding
      sizer.setOuterPadding(key, value);
      
      • key : 'left', 'right', 'top', 'bottom'
  • Get outer padding
    • Get outer padding values
      var outerPadding = sizer.getOuterPadding();
      
    • Get specific outer padding
      var value = sizer.getOuterPadding(key);
      
      • key : 'left', 'right', 'top', 'bottom'
  • Set outer padding of child, which is equal to padding parameter when adding this sizer to parent sizer.
    • Set outer padding via config
      sizer.setChildOuterPadding(
          child,
          {
              left: leftPadding, 
              right: rightPadding,
              top: topPadding,
              bottom: bottomPadding
          }
      );
      
      • child : A string key or game object.
    • Set outer padding via single number
      sizer.setChildOuterPadding(child, value);
      
      • child : A string key or game object.
    • Set specific outer padding
      sizer.setChildOuterPadding(child, key, value);
      
      • child : A string key or game object.
      • key : 'left', 'right', 'top', 'bottom'
  • Get outer padding of child
    • Get outer padding values
      var outerPadding = sizer.getChildOuterPadding(child);
      
      • child : A string key or game object.
    • Get specific outer padding
      var value = sizer.getChildOuterPadding(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 ancestor sizer matched given name
    var parentSizer = sizer.getParentSizer(name);
    
  • Get topmost sizer
    var topmostSizer = sizer.getTopmostSizer();
    

Is in touching

var isTouching = sizer.isInTouching();

Change properties of child

Add to container

Note

container.add(sizer), or layer.add(sizer) won't add children of sizer.

Events

Dragging

  • Fire 'sizer.drag' on top-most sizer when dragging
    topmostSizer.on('sizer.drag', function(pointer, dragX, dragY) {
    
    })
    
  • Fire 'sizer.dragstart' on top-most sizer when dragging start.
    topmostSizer.on('sizer.dragstart', function(pointer, dragX, dragY) {
    
    })
    
  • Fire 'sizer.dragend' on top-most sizer when dragging dragend.
    topmostSizer.on('sizer.dragend', function(pointer, dragX, dragY, dropped) {
    
    })
    

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(child);
    })
    
    • 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.