Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

sprite bounds with rotation (collision)


jonforum
 Share

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 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.

Sans-titre-1.thumb.png.cdce9b7a1573976c47b7e9d45cb7a7a7.png

Link to comment
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.

Link to comment
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

 

Link to comment
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

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
    };

 

 

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...