Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

bounds of pixi.graphic unexpected behavior

$
0
0

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:

example1.jpg.4f4564824c7d5a8e34c1d64754fde031.jpg

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:

rotation90.jpg.29cbf45dc9cebdebdbe16a5f6ae8899f.jpg

 

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!

 

rotation45.jpg.e063b81dbaa903c0abcd95bbb89c947b.jpg

 

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!

 

 

 

 


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>