[Matter] Container Scaling and Offsets

Phaser 3
1

Why does calling setScale on a gameObject added from a container re-scale the display size of the container? For example, consider:

this.container = game.add.container(this.position.x,this.position.y);
[...create and position a bunch of sprites...]
this.container.add([sprite1,sprite2,sprite3]);
this.bounds = this.container.getBounds();
this.container.setSize(this.bounds.width,this.bounds.height);
this.physicsContainer = game.matter.add.gameObject(this.container);
this.container.scale = 0.5;
this.physicsContainer.setScale(0.25);

This re-sizes the display of the sprites in the container, where I don’t necessarily want that. I may want a container to to be bigger than its collision rect, but physicsContainer.setScale overrides anything I do for the container itself.

Intended? Workaround? Perhaps I should set the bounds manually on the physics rect, or use some other method to assign it’s size?

I’m new to matter and phaser3, so be gentle.

2

So, to reply to myself, I figured this out. However, another, bigger issue, is one described here:

It’s flagged as fixed, which it may be for single sprites, but there’s an issue assembling sprites into a container.

Even when using physicsEditor export directly, and doing nothing else but using a container (in a fashion shown in the OP). I imagine I need a render offset in the case of a container. The containers calculated centerOfMass is 0 so I can’t offset using that, it’s unassignable, and segmenting rendering and physics shapes in phaser3 is rather obfuscated, even in the documentation.

Here’s an example image:

example
example.png888×445 45.2 KB

The code is simple:

this.position = {x:800,y:800};
this.container = game.add.container(this.position.x,this.position.y);
this.collisionMesh = game.cache.json.get('support-collision-mesh');
this.body = game.add.sprite(0,0,'support-body');
this.container.add([this.body,anothersprite,anothersprite,etc]);
game.matter.add.gameObject(this.container, { shape: this.collisionMesh.body} );

I figured if I could set the displayOrigin on the container I could fix it, but the docs say do not touch, and the attributes are read-only. Even if I remove all the parts on the chopper, and just render the body inside a container, the result is similar, so I don’t think it’s the container size shifting this wrongly; it happens when body is the only sprite in the container as well.

Not sure where to go from here?

edit: this is phaser 3.19 by the way.

4

Maybe a container would help.

  this.player1 = this.add.container(this.centerX, this.centerY);
  this.player1.setSize(125, 125);
  var base = this.add.image(this.centerX - 500, this.centerY - 340, 'base1');
  var hat = this.add.image(this.centerX - 500, this.centerY - 340, 'hat1');
  this.player1.add(base);
  this.player1.add(hat);