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

Depth

sizer.moveDepthBelow(gameObject);

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() {
              // ....
          })
      
  • Scale up/down, then scale back (yoyo)
    • Scale up/down, then scale back width and height
      sizer
          //.setScale(scaleX, scaleY)
          .scaleYoyo(duration, peakValue);
      
      // sizer.scaleYoyo(duration, peakValue, repeat, undefined, ease);
      
      or
      sizer
          //.setScale(scaleX, scaleY)
          .scaleYoyoPromise(duration, peakValue, repeat)
          .then(function() {
              // ....
          })
      
      • peakValue : Scale to this peak value, then scale back
      • repeat : Yoyo repeat, default value is 0.
      • ease : Ease function, default is 'Cubic'.
    • Scale up/down, then scale back width only
      sizer
          //.setScaleX(scaleX)
          .scaleYoyo(duration, peakValue, 0, 'x');
      
      // sizer.popUp(duration, peakValue, repeat, 'x', ease);
      
      or
      sizer
          //.setScaleX(scaleX)
          .scaleYoyoPromise(duration, peakValue, repeat, 'x')
          .then(function() {
              // ....
          })
      
    • Scale up/down, then scale back height only
      sizer
          //.setScaleY(scaleY)
          .scaleYoyo(duration, peakValue, 0, 'y');
      
      // sizer.popUp(duration, peakValue, repeat, 'y', ease);
      
      or
      sizer
          //.setScaleY(scaleY)
          .scaleYoyoPromise(duration, peakValue, repeat, 'y')
          .then(function() {
              // ....
          })
      
    • Scale up/down via config
      sizer
          //.setScale(scaleX, scaleY)
          .scaleYoyo({
              duration: undefined,
              peakValue: 1.2,
              repeat: 0,
              orientation: undefined,
              ease: undefined,
          })
      
      or
      sizer
          //.setScale(scaleX, scaleY)
          .scaleYoyoPromise(config)
          .then(function() {
              // ....
          })
      
      • orientation : undefined, x, or y
  • Events
    • Pop-up complete
      sizer.on('popup.complete', function(sizer) { });
      
    • Scale-down, scale-down destroy complete
      sizer.on('scaledown.complete', function(sizer) { });
      
    • Scale up/down, then scale back (yoyo)
      sizer.on('scaleyoyo.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(){
            // ...
        })    
    
  • Move-stop
    sizer.moveStop();
    // sizer.moveStop(true);  // Set to end position
    
  • 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) { });
      

Set properties of child

sizer.setChildPosition(child, x, y);
sizer.setChildRotation(child, rotation);
sizer.setChildScale(child, scaleX, scaleY);
sizer.setChildDisplaySize(child, width, height);
sizer.setChildVisible(child, visible);
sizer.setChildAlpha(child, alpha);

Depth

  • Get depth of container
    var depth = container.depth;
    
  • Set depth of container
    container.setDepth(value, true);
    // container.depth = depth;
    
  • Set depth of container and all children
    container.setDepth(value);
    
  • Bring this container and its children to top
    container.bringToTop();
    
  • Swap depth with another container
    containerA.swapDepth(containerB);
    
  • Increase of container and all children
    container.incDepth(value);
    
  • Move game object below this container and all children
    container.moveDepthBelow(gameObject);
    
  • Move game object above this container and all children
    container.moveDepthAbove(gameObject);
    

Destroy

sizer.destroy();

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 child

  • Add click event
    sizer.onClick(child, callback, scope);
    // sizer.onClick(child, callback, scope, config);
    
  • Turn off click event
    sizer.offClick(child, callback, scope);
    
  • Enable click event
    sizer.enableClick(child);
    
  • Disable click event
    sizer.disableClick(child);
    

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

Click outside of child

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

In touching

Invoke callbeack if pointer is inside hitarea every tick.

  • Add in-touching event
    sizer.onTouching(callback, scope);
    // sizer.onClick(callback, scope, config);
    
  • Turn off in-touching event
    sizer.offTouching(callback, scope);
    
  • Enable in-touching event
    sizer.enableTouching();
    
  • Disable in-touching event
    sizer.disableTouching();
    

Equal to

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

In touching child

  • Add in-touching event
    sizer.onTouching(child, callback, scope);
    // sizer.onClick(child, callback, scope, config);
    
  • Turn off in-touching event
    sizer.offTouching(child, callback, scope);
    
  • Enable in-touching event
    sizer.enableTouching(child);
    
  • Disable in-touching event
    sizer.disableTouching(child);
    

Set children interactive

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

sizer.setChildrenInteractive({
    // down: undefined,
    // up: undefined,
    // over: undefined,

    // click: {mode: 'release', clickInterval: 100},

    // 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.',
})
  • down :
    • false : Don't fire (pointer-) down events
  • up :
    • false : Don't fire (pointer-) up events
  • over :
    • false : Don't fire (pointer-) over/out events
  • click : Configuration of Button behavior.
    • false : Don't install Button behavior.
  • 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

  • Pointer-down
    sizer.on('child.down', function(child, pointer, event) {
        // ...
    }, scope);
    
  • Pointer-up
    sizer.on('child.up', function(child, pointer, event) {
        // ...
    }, scope);
    
  • Pointer-over
    sizer.on('child.over', function(child, pointer, event) {
        // ...
    }, scope);
    
  • Pointer-out
    sizer.on('child.out', function(child, pointer, event) {
        // ...
    }, scope);
    
  • Click
    sizer.on('child.click', function(child, pointer, event) {
        // ...
    }, scope);
    
    • child : Triggered child game object.
    • pointer : Pointer object.
  • 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.

Un-pin game object

sizer.unpin(child);
// sizer.unpin(child, destroyChild);
- destroyChild : Set true to destroy child. Default is false.

Note

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

Draw bounds

  • Draw bounds of shown game object on a graphics game object
    sizer.drawBounds(graphics);
    // sizer.drawBounds(graphics, color);
    
  • Draw bounds of shown game object, and display name of child
    sizer.drawBounds(graphics, {
        // color: 0xffffff,
        // lineWidth: 2,
    
        // 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.
    • lineWidth : Default value is 1.
    • 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);
      
      • Remove children map :
        sizer.removeChildrenMap(key);
        
        or
        sizer.removeChildrenMap(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

  • Add to built-in container
    p3Container.add(sizer);
    
    or
    sizer.addToContainer(p3Container);
    
  • Add to Layer
    sizer.addToLayer(layer);
    
    • layer : Layer game object.

Note

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

Layer

A sizer can have a layer. Current children and new children will draw on this layer, instead of display list of scene.

  • Enable layer. Do nothing if layer is existed.
    sizer.enableLayer();
    
  • Get layer game object. Will enable layer if layer is not existed.
    var layer = sizer.getLayer();
    

Shader effects

Apply post-fx pipeline on layer of sizer.

Snapshot

  • Draw all visible children on a render-texture.
    var renderTexture = container.snapshot({
        renderTexture: undefined,
        padding: 0
    });
    
    • renderTexture : Draw on this render-texture
    • padding :
      • 0 : No extra padding space. Default value.
      • A number : Add extra padding space around this render-texture.
  • Draw all visible children on a texture
    container.snapshot({
        padding: 0,
        saveTexture: textureKey
    });
    

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.