Phaser 3, function doesn't exist/not defined

Question

I have a npc class which has a method called chase that is referenced inside the update function. when chase is called it says its not a function or it's not defined. I have another method being referenced in the same way that works.

chase()
{
    this.Phaser.Physics.moveToObject(NPC_spr, player_spr, 100);
    this.anims.play('NPC',true);
}

chase method in npcClass.js

bullet_ary = bulletGroup.getChildren();

for (let bullet_spr of bullet_ary)
{
     bullet_spr.updateMe();
}

NPC_ary = npcGroup.getChildren()

for (let npc_spr of NPC_ary)
{
    npc_spr.chase();
}

chase is called at npc_spr.chase(); which is in the update function, this creates an error while above the bullet_spr.updateMe() works. updateMe is also a method.

what I expected to happen was for the method to be called like the one above for the bullets. I have tried many different ways of rewriting it but everything results in the not defined or not a function error.

Error in console - Uncaught TypeError: npc_spr.chase is not a function

npcGroup code

npcGroup = this.add.group({key: 'NPC'});

npcGroup.createMultiple({key: 'NPC', repeat: 10 })

 npcGroup.children.iterate(function(child)
{
child.setPosition(Phaser.Math.Between(0,  config.height, 0), Phaser.Math.Between(0,  config.width, 0));
})

Answer 1

I think the problem is that you are creating simple "Sprite" GameObjects and not from you Custom NPC class (except if you built a custom plugin, that adds that functionality). Since the group create function should create usually only sprite GameObject, if you don't define the classType.

So the solution would have to be, simply alter this line:

npcGroup = this.add.group({key: 'NPC'});

too look like this:

npcGroup = this.add.group({key: 'NPC', classType: NPC });

Then the error should disappear.

Here a short working Demo:
(showcasing the difference between "custom class group" and "sprite group")

The custom sprite rotates.

console.clear();
document.body.style = 'margin:0;';

class NPC extends Phaser.GameObjects.Sprite {
    constructor (scene, x, y) {
        super(scene, x, y);

        this.setTexture('NPC');
        this.setPosition(x, y);
    }

    // just to show some difference
    preUpdate (time, delta){
        super.preUpdate(time, delta);
        this.rotation += 0.01;
    }

}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    },
}; 

function createNPCTextureForDemo(scene) {
  let graphics  = scene.make.graphics();
  graphics.fillStyle(0xffffff);
  graphics.fillRect(0, 0, 20, 20);
  graphics.generateTexture('NPC', 20, 20);
}

function create () {

    createNPCTextureForDemo(this);
    this.add.text(10,10, 'Group created with "classType" => CustomSprite')
        .setScale(1.25)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
    
   let classGroup = this.add.group({classType: NPC, quantity:0 });
   classGroup.createMultiple({key:'NPC', quantity: 3, setXY: {x: 50, y: 50, stepX: 25} });
        
   this.add.text(10, 90, 'Group created without "classType" => Sprite')
        .setScale(1.25)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});

   let noClassGroup = this.add.group();
   noClassGroup.createMultiple({key:'NPC', quantity: 3, setXY: {x: 50, y: 150, stepX: 25}  });

}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>