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:
- Why do i have this weird offset in the first image with the blue line?
- Why is PIXI bounds not working for objects rotated around 45 degrees (or anywhere between the 90 degrees intervals)?
Thanks in advance!