Removing bodies not working as expected

[ahmdsdk]

First of all thanks for this awesome library. I'm not sure what I'm doing wrong. I'm trying to create a simple game where some coins fall into the world from the top of the screen, and there is a body at the bottom which tries to catch those coins. Everything works fine but when I want to remove those falling bodies after they collide with the body catching them the falling body just freezes in it's place and isn't completely destroyed or removed from the scene. I tried the remove function also the Sleeping.set function but I still got the same result. I even tried to scale the body to 0.1 0.1 but then the body started bouncing off instead of being scaled down.

this is my code to remove the colliding bodies:

`componentDidMount() {
Matter.Events.on(engine, "collisionStart", event => {

  const { bodyA, bodyB } = event.pairs[0];

  console.log("event", event);

  console.log("colliding bodies", bodyA, bodyB);

  if (bodyB.label === "coin-1" || bodyB.label === "coin-2") Matter.Body.remove(world, bodyB);
});

};`

Can anyone help with what am I doing wrong, or how to solve this? Thanks in advance.

[ahmdsdk]

I added

Matter.Body.scale(bodyB, 0.1, 0.1, {x: bodyB.bounds.min.x-1000, y: bodyB.bounds.max.y});

before the remove function and now the bodies are disappearing as intended, but I'm not sure if this is a good workaround.

[bberak]

Hi @ahmdsdk,

Did you get this issue sorted? Also, are you using the GameEngine component or the GameLoop?

The reason I ask is because if you're using the GameEngine - all your logic should generally go in the Systems functions - and not in the entities themselves (ie the componentDidMount function).

Here is an example of how I removed bodies in the React Native Donkey Kong game: https://github.com/bberak/react-native-donkey-kong/blob/master/src/utils/barrels.js

[ahmdsdk]

Hello again @bberak

Thank you for replying.

I've been working while skimming through your Donkey Kong project.

I think I got this sorted by scaling them down to nothing, but I don't think that's a good way to do it. I will use the visible property and recycle the same bodies, which could improve the performance.

I'm using the GameEngine, and I'm removing the bodies in the Systems with a RemoveBodies function which looks for events that are triggered in the collisionStart in the componentDidMount, but only for when game is over, I will also do that for all collision events.

Again, thanks a lot for your reply.

[bberak]

Hi @ahmdsdk - don't mention it!

Glad you got this sorted at least. Interesting approach regarding the collision triggers in the componentDidMount function - just remember to clean up any event listeners in the componentWillUnmount function too.

[ahmdsdk]

Hi @bberak

I guess I thought that I got this sorted it out but it seems that this is actually what was causing the game to lag (I think). Btw, about clearing the event listeners I tried using DeviceEventEmitter with addListener and removing it in componentWillUnmout but it didn't seem to clean the Matter.Events. I guess now I have two issues regarding removing the bodies from the screen and cleaning the event listeners.

I have created an expo snack with how the I approached the game. I will keep trying to solve this, but I would appreciate any feedback or help. Thank you again.

EDIT:

I even tried Matter.Events.off in componentWillUnmount but it doesn't seem to work.

componentWillUnmount(){ Matter.Events.off(engine, 'collisionStart', () => { console.log("CLEARED EVENT"); }); }

[ahmdsdk]

Hello @bberak

I just figured out my mistakes. Sorry for wasting your time. I realized that I wasn't properly deleting the bodies after they have fallen out of the screen. I thought that Matter.World.remove(world, body); was enough to remove them from the world; although I realized it didn't I kept trying different ways, until I went through your RNDK repo and realized that you were actually deleting the item from the object entities. When I did that all the lagging stopped :D!

Excuse my ignorance but I have just started recently with Matter js and RNGE. I also decided not to go with the Matter.Events.on() subscription but instead followed your method using Matter.Query.ray(). Thanks again for your time.

On iOS release is working perfect now. I think both these issues have been solved and I can close them now. I'm going to check out the performance on android.

In the future I will fix the repo and the snack to represent the current fixes.

Many thanks again for this awesome library.