Width of sprite with two elements equals 1

[Retri]

When I add two elements to a sprite the width becomes 1 and the anchor position is ruined.

Shouldn't the width be the widest of the paper.png/text (assuming they're aligned ontop of eachother)?

What am I doing wrong?

var paper_back = new PIXI.Sprite();var paper_tex = PIXI.Texture.fromImage("/pics/paper.png");var text = new PIXI.Text("Text", {font:"24px Arial", fill:"#333333"});text.anchor.x = 0.5;text.position.x = 360;text.position.y = 40;paper_back.addChild(new PIXI.Sprite(paper_tex));paper_back.addChild(text);stage.addChild(paper_back);

paper_back.width is 1

[Retri]

No one?

I expected this behavior to be like in actionscript, so I'm still a bit confused.

[Neso]

Have you tried using a container? I didn't have any issues in regards of adjusting size when I am using containers.

[kartung]

hi Retri,

 

depending on how you think, this is probably an error in Pixi (v 2.2.8).

 

There are two possible places that might fix this.  The first:

PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index){    if(index >= 0 && index <= this.children.length)    {        if(child.parent)        {            child.parent.removeChild(child);        }        child.parent = this;        this.children.splice(index, 0, child);        if(this.stage)child.setStageReference(this.stage);//INSERT THIS    child.updateTransform();//END INSERT        return child;    }    else    {        throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length);    }}

the above code makes sure added children have their transforms updated correctly.

 

the other is in the computation of the actual size of the sprite (based on children).  I have fixed it (I hope) for graphics, not for sprite, but the code should be the same:

PIXI.Graphics.prototype.updateLocalBounds = function(){    var minX = Infinity;    var maxX = -Infinity;    var minY = Infinity;    var maxY = -Infinity;    if(this.graphicsData.length)    {        var shape, points, x, y, w, h;        for (var i = 0; i < this.graphicsData.length; i++) {            var data = this.graphicsData[i];            var type = data.type;            var lineWidth = data.lineWidth;            shape = data.shape;                       if(type === PIXI.Graphics.RECT || type === PIXI.Graphics.RREC)            {                x = shape.x - lineWidth/2;                y = shape.y - lineWidth/2;                w = shape.width + lineWidth;                h = shape.height + lineWidth;                minX = x < minX ? x : minX;                maxX = x + w > maxX ? x + w : maxX;                minY = y < minY ? y : minY;                maxY = y + h > maxY ? y + h : maxY;            }            else if(type === PIXI.Graphics.CIRC)            {                x = shape.x;                y = shape.y;                w = shape.radius + lineWidth/2;                h = shape.radius + lineWidth/2;                minX = x - w < minX ? x - w : minX;                maxX = x + w > maxX ? x + w : maxX;                minY = y - h < minY ? y - h : minY;                maxY = y + h > maxY ? y + h : maxY;            }            else if(type === PIXI.Graphics.ELIP)            {                x = shape.x;                y = shape.y;                w = shape.width + lineWidth/2;                h = shape.height + lineWidth/2;                minX = x - w < minX ? x - w : minX;                maxX = x + w > maxX ? x + w : maxX;                minY = y - h < minY ? y - h : minY;                maxY = y + h > maxY ? y + h : maxY;            }            else            {                // POLY                points = shape.points;                                for (var j = 0; j < points.length; j+=2)                {                    x = points[j];                    y = points[j+1];                    minX = x-lineWidth < minX ? x-lineWidth : minX;                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;                    minY = y-lineWidth < minY ? y-lineWidth : minY;                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;                }            }        }    }    else    {        minX = 0;        maxX = 0;        minY = 0;        maxY = 0;    }    // INSERT HERE    var my_bounds = PIXI.DisplayObjectContainer.prototype.getBounds.call(this);    // if there is some drawing, then consider it along with children    if (this.graphicsData.length)    {    minX = Math.min(minX,  my_bounds.left());    maxX = Math.max(maxX,  my_bounds.right());    minY = Math.min(minY,  my_bounds.top());    maxY = Math.max(maxY,  my_bounds.bottom());    }    else // just use children objects    {    minX = my_bounds.left();    maxX = my_bounds.right();    minY = my_bounds.top();    maxY = my_bounds.bottom();    }    //END INSERT    var padding = this.boundsPadding;        this._localBounds.x = minX - padding;    this._localBounds.width = (maxX - minX) + padding * 2;    this._localBounds.y = minY - padding;    this._localBounds.height = (maxY - minY) + padding * 2;};

you will notice that I have updated retangle to have left,right,top,bottom helper functions:

// INSERT/** * Sometimes it is useful to just ask for the top, bottom, left, right of a rectangle * so add these functions to the PIXI.Rectangle class */PIXI.Rectangle.prototype.left     = function () { return this.x; };PIXI.Rectangle.prototype.right    = function () { return this.x + this.width; };PIXI.Rectangle.prototype.top      = function () { return this.y; };PIXI.Rectangle.prototype.bottom   = function () { return this.y + this.height; };//END INSERT

I am new to pixi (shoutout to the devs, as I have been very impressed with the ability to translate AS3 programs into pixi) so take my advice with a grain of salt.

 

cheers

 

 

 

 

[xerver]

In pixi v2 Sprite doesn't consider its children when calculating size. If you want a container, use a container PIXI.DisplayObjectContainer. Sprite is for rendering textures, the fact that it has children is there for convenience.

[Retri]

Thanks for the answers!