# Setting display origin and "shape" origin for a matter sprite
**URL:** https://phaser.discourse.group/t/setting-display-origin-and-shape-origin-for-a-matter-sprite/3628
**Category:** Phaser 3
**Created:** [August 31, 2019, 3:09pm UTC](https://phaser.discourse.group/t/setting-display-origin-and-shape-origin-for-a-matter-sprite/3628 "2019-08-31T15:09:07Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@nagyv](https://phaser.discourse.group/u/nagyv)
#### Post date: [August 31, 2019, 3:09pm UTC](https://phaser.discourse.group/t/setting-display-origin-and-shape-origin-for-a-matter-sprite/3628/1 "2019-08-31T15:09:07Z")
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.
I achieve the above setup with this code:
```javascript
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?
---
### Author:  [@nagyv](https://phaser.discourse.group/u/nagyv)
#### Post date: [August 31, 2019, 7:19pm UTC](https://phaser.discourse.group/t/setting-display-origin-and-shape-origin-for-a-matter-sprite/3628/2 "2019-08-31T19:19:19Z")
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](http://labs.phaser.io/edit.html?src=src%5Cphysics%5Cmatterjs%5Coffset%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:
```javascript
// @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?
---
### Author:  [@yannick](https://phaser.discourse.group/u/yannick)
#### Post date: [September 1, 2019, 5:37pm UTC](https://phaser.discourse.group/t/setting-display-origin-and-shape-origin-for-a-matter-sprite/3628/3 "2019-09-01T17:37:39Z")
I once had a similar issue with my [2d car example](https://phaser.discourse.group/t/1097).
Here is the snipped I used to fixe it.
```javascript
// 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 🙂
---
### Author:  [@yannick](https://phaser.discourse.group/u/yannick)
#### Post date: [September 1, 2019, 8:38pm UTC](https://phaser.discourse.group/t/setting-display-origin-and-shape-origin-for-a-matter-sprite/3628/4 "2019-09-01T20:38:30Z")
Here is also another example. Hope this helps 🙂
[http://labs.phaser.io/edit.html?src=src\physics\matterjs\advanced%20shape%20creation.js](http://labs.phaser.io/edit.html?src=src%5Cphysics%5Cmatterjs%5Cadvanced%20shape%20creation.js)
```javascript
// 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)
```
---
### Author:  [@ReverendCatch](https://phaser.discourse.group/u/ReverendCatch)
#### Post date: [September 22, 2019, 4:48pm UTC](https://phaser.discourse.group/t/setting-display-origin-and-shape-origin-for-a-matter-sprite/3628/5 "2019-09-22T16:48:25Z")
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.