Removing entities when using matterjs

[Demitor]

Hello!

I am trying out excalibur and have been looking through and experimenting with some of the examples. I really like it so far!
When trying out the example with matterjs, I wanted to try to remove the constraint from the 'constrainedBox' which has a constraint component attached.
I tried to just call this.removeComponent(...) which did not remove the component unless I used the force property. However, when it got removed nothing really happened in the scene. I figured that I could remove the entity/constraint in matterjs as well and this is my solution so far:
function implemented in block.ts

removeBodyConstraint(engine: Engine) {
        this.getComponents().forEach((component) => {
            if (component.type === 'matterjs.constraint') {
                // Get the Matter.js world instance
                const matterJsWorld = (engine.currentScene.world.systemManager.get(MatterJsSystem))?.matterEngine.world;
                const matterJsConstraint = matterJsWorld?.constraints;
                if (!matterJsWorld || !matterJsConstraint) {
                    return;
                }
                // Remove the constraint from the Matter.js world
                World.remove(matterJsWorld, matterJsConstraint);
                // Remove the component from the entity
                this.removeComponent(component);
            }
        });
    }

I just wanted to check if there is another simpler way of implementing removal of components/constraints when using another physics engine such as matterjs?

Thanks!

[eonarheim]

Hi @Demitor, great question!

The components have deferred removal, they won't be cleared until the end of the frame by default. The force parameter forces immediate removal 👍 The reason is sometimes immediate removal can cause some bugs across system lists

In order for the removal to have an effect on the matterjs world, you'll need to wire the MatterJsSystem to listen for component removals and clean up the Matter.js world. I didn't do the cleanup in the sample originally unfortunately. BUT I've updated the sample but the gist is in the system we listen for the components removal and cleanup.

Here is the sample! Press the "D" key to remove the constraint https://github.com/excaliburjs/sample-matterjs

export class MatterJsConstraintComponent extends Component<'matterjs.constraint'> {
    public readonly type = 'matterjs.constraint' as const;
    constraint: Matter.Constraint;
    removed$ = new Observable<MatterJsConstraintComponent>();

    constructor(public constraintDef: Matter.IConstraintDefinition) {
        super();
        this.constraint = Matter.Constraint.create(constraintDef)
    }

    onRemove(previousOwner: Entity): void {
        this.removed$.notifyAll(this);
    }

}

export class MatterJsSystem extends System<MatterJsBodyComponent | TransformComponent> {
   ...
     override notify(msg: AddedEntity | RemovedEntity) {
        // Add bodies to the matter world
        if (isAddedSystemEntity(msg)) {
            const matterJsComponent = msg.data.get(MatterJsBodyComponent);
            
            if (matterJsComponent) {
                Matter.Composite.add(this.matterEngine.world, matterJsComponent.matterJsBody);
            }

            // Optional component
            const matterJsConstraint = msg.data.get(MatterJsConstraintComponent);
            if (matterJsConstraint) {
                Matter.Composite.add(this.matterEngine.world, matterJsConstraint.constraint);
                // Listen for removal after we set up the component
                matterJsConstraint.removed$.subscribe(() => {
                    Matter.World.remove(this.matterEngine.world, matterJsConstraint.constraint);
                });
            }
        }
    }
    ...
}

[eonarheim]

[Demitor]

Thank you very much for your quick and elaborate response @eonarheim! 🙏
Your solution makes a lot of sense! I will play around with the examples a bit more to get a better understanding of the engine 😄