Phaser3: Detecting sprite collision

Question

Using Phaser 3 and I'm having trouble detecting collision between two sprites. I've been up and down the docs and several examples, mostly outdated from Phaser 2, and for some reason it just isn't working.

What I have going is an array of mapTiles and a player character. Right now, I have walls , floors , and doors all being passed to the collider just for testing purposes and nothing is happening.

As you can see in the code below I do have a collider working with the this.enemies array so I'm not sure why it isn't working with the this.mapTiles . Also, when checking the types of my mapTiles they are each labeled as Sprite and my enemies are apparently labeled as ArcadeSprite , could this be the issue?

Dungeon.js

import 'phaser';

import {
  Enemy,
  MapGenerator,
  PlayerCharacter
} from '../game_objects/index'

class DungeonScene extends Phaser.Scene {
  constructor() {
    super({ key: 'DUNGEON' });
    this.mapTiles = []
    this.walls = []
    this.player = null
    this.enemies = []
    this.entities = []
  }

  preload() {
    this.load.spritesheet('sprites', 'src/arial10x10.png', { frameWidth: 10, frameHeight: 10 })
  }

  create() {
    this.createMap()
    this.player = new PlayerCharacter('PC', this, 9, 9, 'sprites', 32, { health: 100, atk: 10 }, [])
    this.enemies = [
      new Enemy('E1', this, 64, 64, 'sprites', 100, { health: 100, atk: 10 }, [])
    ]

    this.keyboard = this.input.keyboard.addKeys('W, A, S, D')

    // this works but not by default; aka it requires a callback to do anything
    // which is odd because examples show it working without a callback
    this.physics.add.collider(this.player, this.enemies, () => {
      this.scene.restart()
    })
    // DOES NOT WORK
    this.physics.add.overlap(this.player, this.mapTiles, () => console.log('overlap'))
    // DOES NOT WORK
    this.physics.add.collider(this.player, this.mapTiles, () => console.log('collider'))
  }

  createMap() {
    const mapGenerator = new MapGenerator(this, 39, 39, 9, 9)
    mapGenerator.create()
    this.mapTiles = mapGenerator.mapTiles
  }
}

Edit

I decided to cut down some code and also give a small 3 line example of what's not working.

This is one with just two sprites and still is not working. This small example would be placed in my scenes create method.

this.foo = this.add.sprite(10, 10, 'sprites', 32)
this.bar = this.add.sprite(30, 30, 'sprites', 2)
this.physics.add.collider(this.foo, this.bar)

Answer 1

The collision is not working in your because the sprites do not have physics bodies.

As you noted, the mapTiles are type Sprite where as enemies are ArcadeSprite meaning they have a physics body.

The difference in creating them is the factory used.

this.add.sprite(...) uses the GameObject factory (Sprites are GameObjects) and this.physics.add.sprite(...) uses the physics Arcade factory, which creates a sprite, and gives it a physics body.

So, in your code for the minimal example change your calls for creating sprites to do it with the physics factory using this.physics.add.sprite(...) and it should work.

I don't know what your map generator code looks like, but I'm assuming it will be a similar fix.