[Phaser 3] Position of matter sprite's image not correct in container

[hongha1412]

Hi folks,
Im developing a side scrolling game using phaser 3 and matter js as physics engine
Currently im facing an issue:

• I have created a custom Phaser.GameObjects.Container to display character in game
• The above container will contains multiple part to of character, ex: body, hair, outfit, weapon...
• All above parts type is Phaser.Physics.Matter.Sprite to support animation
• When i add matter sprite into phaser container, the position of sprite image relative to container, but the position of matter body is not (and it is using sprite's position)

For example:

// Assume that x = 100, y =100
const container = new CharacterContainer(scene, x, y);
const hat = new Hat(scene, 0, 0, texture); // Hat extends Phaser.Physics.Matter.Sprite, the second and third parameter is x and y position of it and relative to above container's position
container.add(hat);

With above code, after add body into container, the hat's image will display at (100, 100) of scene, but the physics body's position is at (0, 0) of scene

I have tried several methods to set offset of render image / physics body but all of them not works.
Is there anyway to match matter physics body position with its sprite image position?

[Calcue-dev]

Do you have a codepen or something?