По аналогии с платформой создадим тело героя в Hero.js:

import * as Matter from 'matter-js';
// ...
export class Hero {
    constructor() {
        // ...
        this.createBody();
        App.app.ticker.add(this.update.bind(this));
    }

    // [07]
    createBody() {
        this.body = Matter.Bodies.rectangle(this.sprite.x + this.sprite.width / 2, this.sprite.y + this.sprite.height / 2, this.sprite.width, this.sprite.height, {friction: 0});
        Matter.World.add(App.physics.world, this.body);
        this.body.gameHero = this;
    }

    update() {
        this.sprite.x = this.body.position.x - this.sprite.width / 2;
        this.sprite.y = this.body.position.y - this.sprite.height / 2;
    }
}

Как и для платформы, мы создали прямоугольное тело в позиции героя с его размерами.

Затем добавили тело в движок и сохранили ссылку на героя в объекте body. Она понадобится при обработке столкновений, когда будут доступны сталкивающиеся тела.

Также мы создали update, добавленный в ticker PIXI и вызываемый на каждом кадре анимации. В нём спрайт героя принудительно получает позицию физического тела для синхронизации. Куда бы тело ни переместилось в результате физических взаимодействий, спрайт окажется там же.