Setting display origin and "shape" origin for a matter sprite

Phaser 3
1

Hi,

I have loaded my sprites with custom shapes using the matter physics engine. I would like to place sprites in the “visible” center of the sprite thus I try to change the origin of the base sprites. This unfortunately, separates the collision shape and the real image, as you can see below.

good-positoni-bad-collision-area
good-positoni-bad-collision-area.png1088×950 96.9 KB

I achieve the above setup with this code:

const old = elem.displayOriginY
elem.displayOriginY = elem.height - 17
elem.y = elem.y + old - elem.displayOriginY

Where elem is the gray area.

How can I move both the origin and the collision area?

2

I’m trying to solve this, but still without luck.

I’ve found this example:
http://labs.phaser.io/edit.html?src=src\physics\matterjs\offset%20body.js

Unfortunately, the example does not work if the shape is given by PhysicsEditor, instead of fromVerts. Browsing through the Phaser codebase, my best current bet is the following class:

// @flow
import Phaser from 'phaser'

export default class Field extends Phaser.Physics.Matter.Sprite {
  constructor (index: number, world: Phaser.Physics.Matter.World, shapes: {[string]: {}}, collisionCategory: any, name:string, x: number, y: number, rotate: number = 0, displayOrigin?: {x:number, y:number}) {
    const label = `fields/${name}`
    super(world, x, y, 'fields-pieces', `fields/${name}.png`, {
      shape: shapes[name],
      label: label
    })
    this.name = label
    if (displayOrigin) {
      this.setOrigin(displayOrigin.x, displayOrigin.y)
      this.body.render.sprite.yOffset = displayOrigin.y
    }

    this.setData('type', 'field')
    this.setData('id', index)
    this.setRotation(rotate)
    this.setCollidesWith(collisionCategory)
  }
}

Adding or removing the line this.body.render.sprite.yOffset = displayOrigin.y changes nothing. What should I change to move the collision box?

3

I once had a similar issue with my 2d car example.
Here is the snipped I used to fixe it.

// get offset of center of mass
// and set the terrain to its correct position
// https://github.com/liabru/matter-js/issues/211#issuecomment-184804576
 let centerOfMass = Matter.Vector.sub(terrainBody.bounds.min, terrainBody.position)
 Matter.Body.setPosition(terrainBody, { x: Math.abs(centerOfMass.x) + x, y: Math.abs(centerOfMass.y) + y })

Hope it helps :slight_smile:

4

Here is also another example. Hope this helps :slight_smile:

http://labs.phaser.io/edit.html?src=src\physics\matterjs\advanced%20shape%20creation.js

// sprites are positioned at their center of mass
var ground = this.matter.add.sprite(0, 0, 'sheet', 'ground', {shape: shapes.ground});
ground.setPosition(0 + ground.centerOfMass.x, 0 + ground.centerOfMass.y);  // position (0,0)
5

Anyone figured this out with containers? Seems broken if you add sprites to a container and put a collision mesh on a container. There’s simply no way to offset it that I can find.