bounds of pixi.graphic unexpected behavior

[unrealnl]

Hi,

I was playing around with a selection tool in my application and i wanted to highlight the current selected objects with a simple outline.
However i noticed very strange behavior that i will illustrate below:

this image was created using the (debug) code that you can find below, some observations and info:

• using sprite position + sprite width / height etc, has a weird offset that can see by comparing the blue line to the green line.
• using getbounds from PIXI and getbounds from box2d give the same result, yay!
• my graphic is drawn using coordinates around (0,0), so can be negative and positive coordinates

body = this.selectedPhysicsBodies[i];
fixture = body.GetFixtureList();
while(fixture != null){
	aabb.Combine(aabb, fixture.GetAABB());
	fixture = fixture.GetNext();
}


//BLUE LINE
var sprite = body.myGraphic;
this.graphics.lineStyle(2, 0x0000FF, 1);
this.graphics.moveTo(sprite.x-sprite.width/2, sprite.y-sprite.height/2);
this.graphics.lineTo(sprite.x+sprite.width/2, sprite.y-sprite.height/2);
this.graphics.lineTo(sprite.x+sprite.width/2, sprite.y+sprite.height/2);
this.graphics.lineTo(sprite.x-sprite.width/2, sprite.y+sprite.height/2);
this.graphics.lineTo(sprite.x-sprite.width/2, sprite.y-sprite.height/2);

bounds = sprite.getBounds(true);

//GREEN LINE
this.graphics.lineStyle(3, 0x00FF00, 1);
this.graphics.moveTo(sprite.x+bounds.x, sprite.y+bounds.y);
this.graphics.lineTo(sprite.x+bounds.x+bounds.width, sprite.y+bounds.y);
this.graphics.lineTo(sprite.x+bounds.x+bounds.width, sprite.y+bounds.y+bounds.height);
this.graphics.lineTo(sprite.x+bounds.x, sprite.y+bounds.y+bounds.height);
this.graphics.lineTo(sprite.x+bounds.x, sprite.y+bounds.y);


//RED LINE
var lowerBoundPixi = getPIXIPointFromWorldPoint(aabb.lowerBound);
var upperBoundPixi = getPIXIPointFromWorldPoint(aabb.upperBound);

this.graphics.lineStyle(1, 0xFF0000, 1);
this.graphics.moveTo(lowerBoundPixi.x, lowerBoundPixi.y);
this.graphics.lineTo(upperBoundPixi.x, lowerBoundPixi.y);
this.graphics.lineTo(upperBoundPixi.x, upperBoundPixi.y);
this.graphics.lineTo(lowerBoundPixi.x, upperBoundPixi.y);
this.graphics.lineTo(lowerBoundPixi.x, lowerBoundPixi.y);

 

So we already found that using sprite position + width/height etc gives a weird result, but it will get funkier:

 

Here you can find an object rotated 90 degree, some observations:

• blue line has become irrelevant as it doesn't account for rotation
• PIXI bounds are exactly the same as box2d bounds, again yay!

 

 

But look at this! This is an object rotation around 45 degrees, observations:

• Uhh PIXI are you drunk?

I tried to debug what is going on here, but i cant seem to figure it out. I tried also to just use positive coordinates in my drawing but didn't seem to change a thing.

Any idea's what's going on here with any of these 2:

1. Why do i have this weird offset in the first image with the blue line?
2. Why is PIXI bounds not working for objects rotated around 45 degrees (or anywhere between the 90 degrees intervals)?

Thanks in advance!

 

 

 

 

[ivan.popelyshev]

We had a bug about it: https://github.com/pixijs/pixi.js/pull/4176

Please use the latest version.

And even if it wont help, I agree that getBounds() has many problems, so yes, PIXI behaves like a drunk sometimes. I also advice to use getBounds() and not to use getLocalBounds() , width and height, because they actually change the transform.

[unrealnl]

Thanks! Yeah i'm just pointing this out so that it might be fixed for future users and to save some headaches for people.
I was spending way to much time on this. Also any idea on problem 1? Ps. im using the latest version. (4.5.4)

[ivan.popelyshev]

position + width/height is a bad idea, because anchors and if there are any children, getLocalBounds() will change the transform and affect everything.

Also, getBounds(skipBounds=true) should be called only if you are sure that transform is up-to-date. For example, you called some functions like toLocal, toGLobal or getBounds() before and didnt change coords, didnt call getLocalBounds/width/height after it. Or if it global updateTransform() was called, (from renderer.render).

It is all because of lazy transform computation, it saves a lot of CPU time. For example, if you change position.x, position.y, then scale.x, scale.y and other things, you dont want to compute matrix after each operation right? So PIXI does it only when necessary, and with skipUpdate=true it assumes that you know that transform is OK at this particular moment of time.

[ivan.popelyshev]

I think its time for you to look at the sources: https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js#L194 , https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L343 

PIXI is not a black box, its an open-source. One I was a hero that wanted to fix all issues with bounds, but only a part of my PR's were merged, my solution was too heavy, I spent too much time on it and I dont care anymore. If you are ready to fix it and make more tests, I'll bless you and fight for your PR's.

[unrealnl]

Thanks for the info! I played both with .getBounds(true) and with .getBounds(false) with similar results.
Anyways if its not worth further investigation on PIXI end, i leave it like that :)!

Ps. small FYI: your twitter link below your avatar does not work, only if i copy the link and remove the '@'  ;)!

[ivan.popelyshev]

Thank you!  https://github.com/pixijs/pixi.js/pull/3711  - that was one of possible fixes that were rejected. I hope to have time in a month or three to remake it.

[ivan.popelyshev]

Did you try to update to latest version? I already pointed to issue that was fixed not so long ago.

[unrealnl]

I'm running the latest version 4.5.4

[ivan.popelyshev]

Can you run last example with "getBounds(false)" instead?

[unrealnl]

Its exactly the same result, below you can see what i was trying to accomplish:

[ivan.popelyshev]

How do you get the sprite? Do you use generateTexture?

[unrealnl]

No, im using the Graphics drawing API to draw the object in a new graphics object.

[ivan.popelyshev]

So its about PIXI.Graphics bounds and not the Sprite, right?

[unrealnl]

Yes this is correct.

[Taz]

Here's a function I hacked up from pixie src that's getting the proper bounds even when rotated. It applies the world transform before calculating bounds. The function PIXI.Graphics.getPolyBounds() is right at the top of the CodePen. As far as I can tell so far it’s working well.. IDK if it's the best way but hopefully can be useful..

 

[ivan.popelyshev]

Ok, it turns out bug is fixed in 4.5.5, please test it.

[unrealnl]

Hi,

After looking again at this issue, i still have to conclude that its not working for complexer shapes.
@Tazi tried your polygonbounds, but also there i get weird results when rotating, see here:

 

The Pen can be found here:

 

@ivan.popelyshev
I'm currently running version 4.7.0 and the normal getBounds() is giving me similar results.
Do note that my graphic is inside a container.
The setup is 
Stage > Container > Graphic
The Container is only being scaled and positioned.

Hope you can help me out!

Best

[ivan.popelyshev]

Ok, i've got it. Pixi stores local bounds, and rotates them => bounds are bigger than needed.

https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/Graphics.js#L861

https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/Graphics.js#L927

I dont know when will I have time to make better implementation. I'll try today but no guarantees.

[Kaehler]

I have a similar problem, i am using graphics that are placed on the stage and rotated, and it provides me with some interesting results, i have tried Taz's implementation but it still seems to give me the wrong bounds.

 

Taz getPolyBounds

Graphics.getBounds(true)

 

Both returns incorrect bounds of the graphics object. 

[Hooman Askari]

It's 2019 and Pixi.js 5 is out and still, it behaves weird when an item is rotated.

[ivan.popelyshev]

@Hooman Askari time to start rallying up people to fix it! Lets start with examples on https://pixiplayground.com