sprite bounds with rotation (collision)

[jonforum]

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 ab = a._boundsMap._pad

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:
            if(e._boundsMap._pad.contains(x, y)) {
                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();

_boundsMap._pad = _boundsMap.clone()

_boundsMap._pad.pad(-_boundsMap.width/3,-_boundsMap.height/3);

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
   6. _pad:Rectangle
      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.

[ivan.popelyshev]

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.

[jonforum]

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

 

[ivan.popelyshev]

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

[jonforum]

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

TilesMap.addChild(InObjSprite);

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;
        };
        _boundsMap._pad = _boundsMap.clone()
        _boundsMap._pad.pad(-_boundsMap.width/3,-_boundsMap.height/3);
        TilesMap.scale.set(memScale,memScale);
        return _boundsMap;
    };

    //#endregion



    // add mouse obj to map
    function add_toMap(restoreXY){
        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
    };