Jump to content

Virtual Container


Recommended Posts

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/

Link to comment
Share on other sites

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:


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

Any idea?


Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 4 weeks later...

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) {
  }, 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 ?




Link to comment
Share on other sites

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


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.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...