Phaser 3 - Groups of Dynamic Sprites Not Colliding - phaser-framework

Question

I can’t get two groups of dynamic sprites or a dynamic sprite and a group of dynamic sprites to collide. I can get each to collide with groups of static sprites that make up the level, but not the dynamic ones.
If I setup a collider for the sprites themselves instead of the group, they work fine. Not sure what’s going on.
Here is a link to my code. Could someone take a look?
https://github.com/deusprogrammer/mega-man-clone/blob/master/src/scripts/scenes/mainScene.ts

Answer 1

The reason why the collisions doesn't work, is the physics - body of the group of enemies, seems to be interfering with, physics objects of the objects inside of the group.
Just replace the line 19 this.enemyGroup = this.physics.add.group(); (from the linked file) mainScene.ts, with this line this.enemyGroup = this.add.group(); and the collisions should work.
That line will only create a "simple" phaser group, without a physics body.
Here a running demo:
(I stripped your code, down to only essentials)
class MegaMan extends Phaser.Physics.Arcade.Sprite {
constructor(scene, x, y) {
super(scene, x, y, 'megaman');
scene.add.existing(this);
scene.physics.add.existing(this);
this.bulletGroup = scene.physics.add.staticGroup();
this.scale *= 2;
this.body.setSize(22, 22);
this.setOrigin(0.5, 0.5);
this.setCollideWorldBounds(true).setInteractive();
this.controls = {
up: this.scene.input.keyboard.addKey('W'),
down: this.scene.input.keyboard.addKey('S'),
left: this.scene.input.keyboard.addKey('A'),
right: this.scene.input.keyboard.addKey('D'),
jump: this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE),
shoot: this.scene.input.keyboard.addKey('J')
};
}
update() {
super.update();
// Controls
if (this.controls.right.isDown) {
this.setVelocityX(150);
} else if (this.controls.left.isDown) {
this.setVelocityX(-150);
} else {
this.setVelocityX(0);
}
// If player is jumping
if (this.controls.jump.isDown && this.body.touching.down) {
this.setVelocityY(-400);
}
if (this.controls.shoot.isDown && !this.isShooting) {
this.isShooting = true;
let megaBusterShot = this.scene.physics.add.sprite(this.x + 32, this.y, 'wood1');
this.bulletGroup.add(megaBusterShot);
megaBusterShot.body.allowGravity = false;
megaBusterShot
.refreshBody()
.setVelocityX(this.flipX ? 300 : -300);
setTimeout(() => {
this.isShooting = false;
}, 200);
}
}
onHit() {
console.log("OUCH");
}
}
class MetHat extends Phaser.Physics.Arcade.Sprite {
constructor(scene, x, y) {
super(scene, x, y, 'methat');
scene.add.existing(this);
scene.physics.add.existing(this);
this.scale *= 1.5;
this.state = "idle";
this.setCollideWorldBounds(true);
this.setInteractive();
this.refreshBody();
}
onCollision() {
if (this.body.touching.left) {
this.body.velocity.x = 200;
} else if (this.body.touching.right) {
this.body.velocity.x = -200;
}
}
onHit(weapon) {
this.destroy();
}
update() {
if (this.scene.game.loop.frame % 500 === 0 && this.body.touching.down && this.state === 'idle') {
this.state = 'standing';
// Make him start walking shortly after standing up
setTimeout(() => {
this.state = 'walking';
this.setVelocityX(-200);
}, 200);
// Make him idle again after 10 seconds.
setTimeout(() => {
this.state = 'idle';
this.setVelocityX(0);
}, 3000);
}
}
}
let assetMap = {
"W1": {},
"W2": {},
"W3": {
name: "wood3",
file: "https://github.com/deusprogrammer/mega-man-clone/raw/master/src/assets/img/wood3.png",
},
"W4": {
name: "wood4",
file: "https://github.com/deusprogrammer/mega-man-clone/raw/master/src/assets/img/wood4.png",
},
}
const levels = {
level1: {
tilemap: [
["W3", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "W3"],
["W3", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "W3"],
["W3", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "W3"],
["W3", " ", " ", " ", " ", "W4", "W4", " ", " ", " ", " ", "W3"],
["W3", " ", " ", " ", " ", "W4", "W4", " ", " ", " ", " ", "W3"],
["W4", "W4", "W4", "W4", "W4", "W4", "W4", "W4", "W4", "W4", "W4", "W4"],
],
blocksX: 12,
blocksY: 6,
nextLevel: 'level2'
}
}
class Level extends Phaser.GameObjects.GameObject {
constructor(scene, levelConfig) {
super(scene, 'level');
this.levelConfig = levelConfig;
scene.add.existing(this);
scene.physics.add.existing(this);
this.blocks = this.scene.physics.add.staticGroup();
for (let y = 0; y < this.levelConfig.blocksY; y++) {
for (let x = 0; x < this.levelConfig.blocksX; x++) {
let asset = assetMap[this.levelConfig.tilemap[y][x]];
if (!asset) {
continue;
}
let block = scene.physics.add.staticSprite(x * 32, y * 32, 'floor');
block.scale *= 2;
block.setOrigin(0, 0)
.setPushable(false)
.setImmovable(true)
.setGravity(0)
.refreshBody();
this.blocks.add(block);
}
}
}
}
class MainScene extends Phaser.Scene {
constructor() {
super({ key: 'MainScene' });
}
preload(){
let graphics;
graphics = this.make.graphics({x: 0, y: 0});
graphics.fillStyle(0xffffff, 1);
graphics.fillRect(0, 0, 22, 22);
graphics.generateTexture('megaman', 22, 22);
graphics.fillStyle(0xff0000, 1);
graphics.fillRect(0, 0, 22, 22);
graphics.generateTexture('methat', 22, 22);
graphics.fillStyle(0xcdcdcd, 1);
graphics.fillRect(0, 0, 16, 16);
graphics.generateTexture('floor', 16, 16);
}
create() {
this.player = new MegaMan(this, 60, 0);
this.level = new Level(this, levels['level1']);
this.enemyGroup = this.add.group();
this.enemyGroup.add(new MetHat(this, 300, 0));
// Doesn't work? Why?
this.physics.add.collider(this.player, this.enemyGroup, () => {
this.player.onHit();
});
this.physics.add.collider(this.player.bulletGroup, this.enemyGroup, (megaBusterShot, obj2) => {
let enemy = obj2;
megaBusterShot.destroy();
enemy.onHit(megaBusterShot);
});
// Works
this.physics.add.collider(this.player.bulletGroup, this.level.blocks, (megaBusterShot) => {
megaBusterShot.destroy();
});
this.physics.add.collider(this.enemyGroup, this.level.blocks, (obj) => {
let enemy = obj;
enemy.onCollision();
});
this.physics.add.collider(this.player, this.level.blocks);
}
update() {
this.player.update();
this.enemyGroup.children.each((enemy) => {
enemy.update();
})
}
}
const config = {
type: Phaser.AUTO,
backgroundColor: '#0000000',
scene: [MainScene],
width: 400,
height: 248,
physics: {
default: 'arcade',
arcade: {
debug: true,
gravity: { y: 600 }
}
}
}
const game = new Phaser.Game(config)
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I had a similar problem (https://stackoverflow.com/a/70944607/1679286), seems to be a problem with nesten Objects, that have physics bodies.