Layout engine

[user471]

Is there any library which could do something like this.

I have three sprites and I want to place them horizontally with some margin.

So, instead of calculating their positions manually, I want to do something like this.

var stack = new HorizontalStack();stack.margin = 10;stack.addChild(sprite1);stack.addChild(sprite2);stack.addChild(sprite3);

If such thing doesn't exist, what would be the best way to implement this?

I guess I can inherit HorizontalStack from Container.

What would be the best place to recalculate children positions?

 

 

 

[ivan.popelyshev]

There's no reflow process, so you have to add it yourself. Its better to separate it from rendering and updateTransform(). Also, dont forget that container bounds are calculated based on childrens.

[bubamara]

yes, probably best method will be inherinting it from PIXI.Container

DEMO : http://enea.sk/pixijs-demos/horizontal-stack

HorizontalStack = function(margin) {	PIXI.Container.call(this);		this.margin     = margin || 20;	this.lastChildX = null;};HorizontalStack.prototype = Object.create(PIXI.Container.prototype);HorizontalStack.prototype.constructor = HorizontalStack;HorizontalStack.prototype.add = function(sprite) {	if (this.lastChildX !== null) {		sprite.position.x = this.lastChildX + this.margin;	} else {		sprite.position.x = 0;	}	sprite.position.y = 0;	this.addChild(sprite);	this.lastChildX = sprite.position.x;};

[user471]

thanks