# sprite bounds with rotation (collision)

## Recommended Posts

hi, Existe a way to compute bounds with rotation ? Because am trying use a little collision system with mouse and also other sprite, but i not sure how proceed for compute correctly the rotation of a sprite.
Example this is a hitCheck for 2 sprite

function hitCheck(a, b){
var bb = b._boundsMap
return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;
};

And this is how i check if my mouse are inside the bounds

``````        let isIN;
for (let i = 0, l=list.length; i < l; i++) {
const e = list[i];
//if(e.source.type === "light"){continue}; // bypass light TODO:
isIN = e;
if(e.source.spineData){
for (let i = 0, l = e.list_d.length; i < l; i++) {
e.list_d[i]._filters = [\$PME.filters[2]];
};
}else{
e.children[0]._filters = [\$PME.filters[2]];
};
subList = list.concat();
subList.splice(i, 1);
e.debugElements.cirOrigin.renderable = true;
e.debugElements.linePivot.renderable = true;
break;
};
};``````

This is how i compute the bounds, This is the only way how i can get the bounds working fine.

const mapX = Cage_Mouse.x;
const mapY = Cage_Mouse.y;
var _boundsMap =  objSprite._d.getBounds(true).clone();

the console.log for _boundsMap stored something like this.

_boundsMap:

1. Rectangle {x: 553, y: 293, width: 206, height: 267, type: 1, …}
1. height:267
2. type:1
3. width:206
4. x:553
5. y:293
1. height:89
2. type:1
3. width:68.66666666666666
4. x:621.6666666666666
5. y:382
6. bottom:(...)
7. left:(...)
8. right:(...)
9. top:(...)
10. __proto__:Object
7. bottom:(...)
8. left:(...)
9. right:(...)
10. top:(...)
11. __proto__:Object

Maybe I do it wrong? or if a good math guy can give me the math algorithm for  setup the x,ywidth,heigth correctly with rotation ?

Thank a lot for any suggestion or  new approach.

that picture can show my issue and maybe help to more understand. , in red is bounds without rotation, in green it the bounds with rotation that i need to get.

##### Share on other sites

You have to calculate local coordinates of mouse first (displayObject.toLocal), and use local bounds instead. Local bounds of sprite are calculated fast, however for spine it can be a slight problem, but i think getLocalBounds() should work, just beware that it changes transform and it leads to side effects.

You can see how i use toLocal inside "data.getLocalPosition" in https://pixijs.io/examples/#/layers/zorder.js

I'm sorry but im still too busy to answer properly.

##### Share on other sites

1 hour ago, ivan.popelyshev said:

You have to calculate local coordinates of mouse first (displayObject.toLocal), and use local bounds instead. Local bounds of sprite are calculated fast, however for spine it can be a slight problem, but i think getLocalBounds() should work, just beware that it changes transform and it leads to side effects.

You can see how i use toLocal inside "data.getLocalPosition" in https://pixijs.io/examples/#/layers/zorder.js

I'm sorry but im still too busy to answer properly.

awesome , it work thank

##### Share on other sites

36 minutes ago, ivan.popelyshev said:

Ok, I'm sorry, containsPoint accept global coords and if you override them, convert it to local: https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L385

It ok , your awser help me find the good way.
i replace the addChild before the getBounds

and a juste set the map scale to

const memScale = TilesMap.scale.x;

during the phase for get bounds.
It's not optimal, but it works very well in this context.

``````    //get reel bounds obj from map
function getReelBounds(objSprite,fromMap){
const mapX = ScrollX
const mapY = ScrollY
const pivX = objSprite.pivot && objSprite.pivot.x || 0;
const pivY = objSprite.pivot && objSprite.pivot.y || 0;
const memScale = TilesMap.scale.x;
TilesMap.scale.set(1,1); // i know am weird !! but its more easy
if(objSprite.source.type === "tile"){
var _boundsMap =  objSprite._d.getBounds().clone();
}else
if(objSprite.source.type === "light"){
var _boundsMap = objSprite.getBounds().clone();
}else{ // for spine TODO: wait popelyshev FIX

}
if(!fromMap){ // if exist allrealy on map, bound are ok.
_boundsMap.x+=mapX,
_boundsMap.y+=mapY;
};
TilesMap.scale.set(memScale,memScale);
return _boundsMap;
};

//#endregion

// add mouse obj to map
InObjSprite.x = Cage_Mouse.x;
InObjSprite.y = Cage_Mouse.y;
InObjSprite.parentGroup = DisplayGroup_Selected;
InObjSprite.zIndex = Cage_Mouse.y;
TilesMap.addChild(InObjSprite); // need befor for correct bounds
if(restoreXY){ // if was transfered, and right click restore to last position
//{pO:pO,sC:sC,pV:pV,rO:rO};
InObjSprite.position.set(InObjSprite.transfered.pO.x,InObjSprite.transfered.pO.y);
InObjSprite.scale.set(InObjSprite.transfered.sC.x,InObjSprite.transfered.sC.y);
InObjSprite.pivot.set(InObjSprite.transfered.pV.x,InObjSprite.transfered.pV.y);
InObjSprite.skew.set(InObjSprite.transfered.sK.x,InObjSprite.transfered.sK.y);
InObjSprite.rotation = InObjSprite.transfered.rO;
InObjSprite.zIndex = InObjSprite.y;
update_debugElements(InObjSprite)
}else{
//re-calculate all bound in objet for colision
InObjSprite._boundsMap = getReelBounds(InObjSprite);
};
render_debugElements(InObjSprite);

// if obj was transfered to mouse, don push again
if(!InObjSprite.transfered){ // push only if not transfer
if(InObjSprite.source.type === "light"){
TilesMap._objLight.push(InObjSprite);
}else{
TilesMap._objSprites.push(InObjSprite);
};
}else{
delete InObjSprite.transfered;
}
clear_mouseObj(); // clear Cage_Mouse
};``````

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.