Virtual Container

[Gerente]

Container and DisplayObject do not have their own size, its depends of its children, so If you add a Child and use anchor  property and others properties related with size it will not work.

What would be the best practice to do a simple layout like HEAD, BODY and FOOT? where I can define and limit the size of each "area" and all their children?

I thinking in create a new class that inherit Container and overwrite the width and height properties to be static but I'm not sure it will be considered in the anchor logic.

Any advice?, here an example how it does not work https://jsfiddle.net/fyt7zhvm/1/

[ivan.popelyshev]

That's exactly how you supposed to do that - invent your own Container. Dont forget that `width` and `height` are properties backed by `_width` and `_height`. Just extend pixi Container class and override those things.

Pixi container is based on Flash DispayObjectContainer.

[Gerente]

It does not seems that simple, there must be much more properties related.

Please check this, the containerHeader.getLocalBounds() should return width 300, but is recalculated as soon as I add the item inside. I don't want to block _width and _height with an empty property, it doesnt seems right.

Please check:

https://jsfiddle.net/fyt7zhvm/3/

Maybe I have to edit _boundsRect when call width and height property?. Im not sure what anchor is based on

Any idea?

 

[ivan.popelyshev]

Spend some more time figuring it out, look at Container sources and other places. Then I'll help. You're on the right way!

[Gerente]

Ok, I think I understand the problem now. When I use anchor of a sprite, it uses its own center as a pivot for the anchor , and not the parent.

That's why basically each solution is "move the sprite to X,Y and then use anchor to center it".

So I just figured out that what I'm looking for its a .dock property, that will align within the bounds of his parent. 

There is something like that? it makes sense?

I don't want to loose time creating one when probably there is something like that already.

Thanks Ivan Again!

[ivan.popelyshev]

Nope, pixi is made as simple as possible  Make it and share as a plugin.

Otherwise people could tell "oh another phaser with lots of !@#$ inside"

[Gerente]

I understand the concept of pixi, the base need to be minimal, and you can add plugins if you want to make it more powerful, but I still thinking that if you have an anchor and pivot,then dock sounds part of the same family; transform/positioning.

I'm not sure if can be done with a plugin because it changes the core positioning system, everywhere there is an anchor it would need to have a dock as well based on the parent. Might be easy to do by the developers but requires testing and that would be the slow part.

Thanks anyway for the info!

[themoonrat]

@Gerente You may be interested in https://github.com/pixijs/pixi-ui - which I think achieves some of what you are trying to achieve (it has the concept of being able to anchor a container to the edge of another container)

[Gerente]

Thank you themoonrat, I saw that component but its basically a bunch of classes that inherit from PIXI an redo the whole thing. What Im trying to acomplish it to still use the PIXI native clases but improved.

Something like:

PIXI.TransformStatic.prototype.dock = new PIXI.ObservablePoint(function (scope) {
    scope._localID++;
  }, this,0 , 0)
})

PIXI.TransformStatic.prototype.updateTransform = function (parentTransform) {
  if(this.dock !== undefined && this._localID !== this._currentLocalID){
    //dock Logic
  }
  //native code
}

That way,  every time You modify the "dock" Point, it would change the localID to update the transform and re-render the object.

Unfortunately, I don't have access to the transformStatic constructor, and WITHOUT creating a new Class and extending it I would like to be able to manage it like that.

The "this" word fails because is the "window" object, I have not be able to obtain the object context from the prototype definition.

Any idea how I could "extend" the prototype and have access to "this" context ?

 

 

 

[ivan.popelyshev]

Object.defineProperties(PIXI.TransformStatic.prototype,
    'dock': {
        'get': function() {
            if (!this._dock) {
                this._dock = new PIXI.ObservablePoint(...)
            } 
            return this._dock;
        }
    }
}

 

[Gerente]

Ok, I did a simple Dock function without having to modify too much code, any comment would be appreciated.

https://jsfiddle.net/pq2y39rf/2/

Basically it does add some properties to Container/Graphic and inheritors

Container.defaultWidth : define the width of the container no matter the content

Container.defaultHeigth : define the height of the container no matter the content

Container.dock : PIXI.ObservablePoint that will be used to position the current element based on the defaultWidth and defaultHeight of the parent

Container.margin: [top,right,bottom,left] margin applied to the position.

 

 

[ivan.popelyshev]

Added here: https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#width-and-height-are-evil