Physics.Arcade.Group won't show child texture

Phaser 3
1

Hi, there! First time posting in the new forum.

I’m going with an OOP approach with Phaser 3 but I can’t assign texture to children elements in a group. The debug: true draws just an outline. Here’s my code:

src/Sprites/EnemyGroup.js:

import 'phaser';

export default class EnemyGroup extends Phaser.Physics.Arcade.Group {

constructor(world, scene, config) {
	super(world, scene, config);
    }
}

In the src/Scenes/GameScene.js:

import 'phaser';
import EnemyGroup from '../Sprites/EnemyGroup';

export default class GameScene extends Phaser.Scene {
    constructor () {
       super('Game');
    }

 // assets is at the same level as src
  preload () {
     this.load.image('enemy', 'assets/enemy.png');
  }

  create () {
     var config = { key: 'enemy', frameQuantity: 10, visible: false, active: false, max: 10, setXY: {x: this.width + 30, y: this.height - 65} };
     this.enemies = new EnemyGroup(this.physics.world, this, config);
  }
 .... // other code
 }

What am I missing? My guess is that something goes wrong with passing the key in the config to the new EnemyGroup(). The issue arises when I try to use EnemyGroup as a separate file. If I write my code directly in the GameScene file, it works. Like so:

this.enemies = this.physics.add.group({ key: 'enemy', frameQuantity: 10, visible: false, active: false, max: 10, setXY: {x: this.width + 30, y: this.height - 65} });
2

If you use { visible: false } then you won’t see any sprites/textures. Is that what you want?

3

Actually, no. I have a method that makes the children of the group visible and active when they’re on screen. The method is called in the update(). Setting visible to true does not help. I’m also using the webpack project template. Probably should’ve mentioned that.
Everything is ok except for the texture. There are no console errors.

var config = { key: 'enemy', frameQuantity: 10, visible: false, active: false, max: 10, setXY: {x: this.width + 30, y: this.height - 65} };
this.enemies = new EnemyGroup(this.physics.world, this, config);

should do the same as:

this.enemies = this.physics.add.group(config);

The first calls function PhysicsGroup(world, scene, children, config) which returns Group.call(this, scene, children, config);
The second calls function group(children, config) which returns this.sys.updateList.add(new PhysicsGroup(this.world, this.world.scene, children, config)); which ultimately leads to PhysicsGroup()

EDIT: Oh, man! It was the Z-index. I had:

this.enemies = new EnemyGroup(this.physics.world, this, config);   
this.background = this.add.tileSprite(400, 300, 0, 0, 'bg');
this.enemies2 = this.physics.add.group(config);

The background was hiding the EnemyGroup().

NOTE TO SELF and anyone else reading this: If something does not work, try replicating it on a new bare minimum scene with just the things you need. Writing piles of code, commenting lines results in a confusing and hardly readable mess despite the formatting (grayed out commented lines)! And DON’T FORGET THE Z-INDEX!