How to make collision group collide with itself

[KostarSf]

Hi,
I found Excalibur recently and am still exploring its capabilities, but I already like it!
However, I have encountered some difficulties and one of them is to make the collision group collide with itself

For example, I have a collision group "asteroid" for asteroids and a collision group "player" for a player and I want asteroids to be able to collide with themselves and with the player only. How can this be achieved?

The example from documentation does not cover this aspect (https://excaliburjs.com/docs/collisiongroups)
If I give an asteroids collision group like this, then the asteroids will be able to collide with the player, but not with each other

const asteroidGroup = CollisionGroupManager.create("asteroid");

export class Asteroid extends CosmicBody {
  constructor() {
    super({
      // ...
      collisionGroup: asteroidGroup,
    });
  }

And if I combine collision groups then collisions won't work at all

export const asteroidGroup = CollisionGroupManager.create("asteroid");

export class Asteroid extends CosmicBody {
  constructor() {
    const asteroidsCanCollideWith = CollisionGroup.collidesWith([
      asteroidGroup,
      playerGroup,
    ]);

    super({
      // ...
      collisionGroup: asteroidsCanCollideWith,
    });
  }

  // ...
}

export const playerGroup = CollisionGroupManager.create("player");

export class Player extends CosmicBody {
  constructor() {
    const playerCanCollideWith = CollisionGroup.collidesWith([
      asteroidGroup,
      playerGroup,
    ]);

    super({
      // ...
      collisionGroup: playerCanCollideWith,
    });
  }

  // ...
}

If it's important, I use my own collision logic in the precollision event and all objects have a collision type CollisionType.Passive
It would be nice to get any suggestions, thank you.

[eonarheim]

Hi @KostarSf this is a great question!

I think the issue here is that both new groups playerCanCollideWith and asteroidsCanCollideWith are technically the same group. This feature in Excalibur is very confusing, each group is a category that won't self collide. There is a special built in group CollisionGroup.All that collides with everything.

In Excalibur things of the same group do not collide by default, here is an example that you can use to check:

const asteroidGroup = ex.CollisionGroupManager.create("asteroid");
const playerGroup = ex.CollisionGroupManager.create("player");

const asteroidsCanCollideWith = ex.CollisionGroup.collidesWith([
  asteroidGroup,
  playerGroup,
]);

const playerCanCollideWith = ex.CollisionGroup.collidesWith([
  asteroidGroup,
  playerGroup,
]);

console.log('asteroidsCanCollideWith:', asteroidsCanCollideWith.name); // ~(asteroid+player)
console.log('playerCanCollideWith:', playerCanCollideWith.name); //~(asteroid+player)
console.log('can collide?', asteroidsCanCollideWith.canCollide(playerCanCollideWith)); // false

However you can skip the CollisionGroupManager which helps create the bitmasks for groups, and manually craft your own. These use 32 bit integers to represent the "categories" (also called "layers" in other game engines), then there is a "mask" which indicates what things a "category" collides with with.

So, the way to thing about this is the "category" is a unique power of 2 in binary, the mask puts a 1 in for each category the group collides with. By default the CollisionGroupManger sets up groups with these powers of two, and masks that collide with everything but the self. Example: group 1 category = 0b0001 and mask 0b1110 which means group 1 collides with category 2, 3, and 4 but not 1.

This is how the canCollide works, basically if there is a 1 in the intersection between the mask and the category they can collide! 0 means they can't.

public canCollide(other: CollisionGroup): boolean {
    return (this.category & other.mask) !== 0 && (other.category & this.mask) !== 0;
  }

TLDR Possible solution

To make a group that collides with both players and asteroids, but not "other-group" you could craft a new CollisionGroup manually with the category and mask. This does mean you can't use the CollisionGroupManger safely without knowing the categories and masks that it generated.

So here is an example of a custom mask,

const asteroidGroup = new ex.CollisionGroup('asteroid', 0b0001, 0b1110);
const playerGroup = new ex.CollisionGroup('player', 0b0010, 0b1101);
const playerAndAsteroid = new ex.CollisionGroup('collided with player & asteroid but not other-group', 0b0100, 0b0111);
const otherGroup = new ex.CollisionGroup('other-group', 0b1000, 0b0111);

console.log('can collide playerAndAsteroid with playerAndAsteroid?', playerAndAsteroid.canCollide(playerAndAsteroid)); // true
console.log('can collide asteroid with player?', asteroidGroup.canCollide(playerGroup)); // true
console.log('can collide asteroid with playerAndAsteroid?', asteroidGroup.canCollide(playerAndAsteroid)); //true
console.log('can collide player with playerAndAsteroid?', playerGroup.canCollide(playerAndAsteroid)); // true
console.log('can collide other-group with playerAndAsteroid?', otherGroup.canCollide(playerAndAsteroid)); // false

Here's a table with the possible interactions for this example

category name	category number	mask	player	asteroid	player&asteroid	other-group	all
player	0b0001	0b1110	-	collides	collides	collides	collides
asteroid	0b0010	0b1101	collides	-	collides	collides	collides
player&asteroid	0b0100	0b0111	collides	collides	collides	-	collides
other-group	0b1000	0b0111	collides	collides	collides	-	collides
all	0b1111	0b1111	collides	collides	collides	collides	collides

[eonarheim]

Hi @KostarSf I wrote up some more docs on this subject https://excaliburjs.com/docs/collisiongroups/

Let me know if you have any questions!

[KostarSf]

Thank you for such detailed answer! I'm sorry I couldn't answer sooner. This information is very useful to me. I will experiment with collision masks.

So far, I don't have any questions on the topic. However, I would also like to clarify some thing about the particle system, but it seems to me that a new discussion needs to be created for this.

Thanks again!