Scaling sub-container in PixiJS doesn't preserve MatterJS bodies

[johnsbro]

I'm using Matter.js as my physics engine and Pixi as my renderer and under normal circumstances I've been able to get them to work smoothly.  However, I'm trying to do something where all of the objects *except* the player character are scaled down to look like the character is now above them.  The scaling works visually in Pixi, but I can't get the bodies from Matter.js to go with it, so there are these "ghost objects" that I can't see but if collide with them then the scaled down objects will be moved.

 

Does anyone have any tips for how to resolve this?  Let me know if I need to post a gif if that would help explain the problem.

[Taz]

Have you tried using "Body.scale(body, scaleFactorX, scaleFactorY)" to scale the Matter.js bodies by same factor?

[johnsbro]

Yes. but with that method the bodies scale in on themselves.  I even tried "Body.scale(body, scaleFactorX, scaleFactorY, {x: 0, y: 0 } )" so that it would match up but that didn't work either.

[Taz]

If the problem is cumulative scaling, what about storing scale factor and scaling by the reciprocal of the old scale factor before you scale by the new factor? That's the only thing I can think of but maybe the way they scale is too different

[johnsbro]

This is in the game loop:

```

below.scale.x *= .5
below.scale.y *= .5
for (let i = 0; i < below.children.length; i++){
      Body.scale(map, below.scale.x, below.scale.y, { x: 0, y: 0 })
}

```

below is a PIXI container and map is an array of Matter bodies

[ivan.popelyshev]

Why *= ?

[johnsbro]

I'm multiplying the scale by 1/2 each time to shrink it.  It's the same as "below.scale.x = below.scale.x * .5"