Trying to make a random sprite clickable - phaser-framework

Question

I would like to ask the gurus of stackoverflow as I know that most of the time I find my answers here, and I want to thank the community for all the vast information on this site, Im a bit stuck on a small little learning projeck I got going and any assistance would be greatly appreciated, this is my code below (I will explain the issue below the code):
this.load.atlas('enemies', 'enemies.png','enemies.json'); ####This goes on preload function
#####everything below I added to create function
var monsterData = [
{name: 'Aerocephal', image: 'aerocephal'},
{name: 'Arcana Drake', image: 'arcana_drake'},
{name: 'Aurum Drakueli', image: 'aurum-drakueli'},
{name: 'Bat', image: 'bat'},
{name: 'Daemarbora', image: 'daemarbora'},
{name: 'Deceleon', image: 'deceleon'},
{name: 'Demonic Essence', image: 'demonic_essence'},
{name: 'Dune Crawler', image: 'dune_crawler'},
{name: 'Green Slime', image: 'green_slime'},
{name: 'Nagaruda', image: 'nagaruda'},
{name: 'Rat', image: 'rat'},
{name: 'Scorpion', image: 'scorpion'},
{name: 'Skeleton', image: 'skeleton'},
{name: 'Snake', image: 'snake'},
{name: 'Spider', image: 'spider'},
{name: 'Stygian Lizard', image: 'stygian_lizard'}
];
var monsters = this.add.group();
var monster;
let currentmonster = Phaser.Utils.Array.GetRandom(monsterData);
monsterData.forEach(function(data) {
monster = monsters.create(400,300, 'enemies', currentmonster.image).setOrigin(0.5);
monster.details = data;
});
monster.on('pointerdown', function (pointer) {
this.setTint(0xff0000);
});
monster.on('pointerout', function (pointer) {
this.clearTint();
});
monster.on('pointerup', function (pointer) {
this.clearTint();
});
Basically my monsters do spawn as expected and they do change sprite every time I refresh the page, but the click function does not works, it simply wont click on it, and nothing happens, no errors on console nothing, am I approaching this incorrectly? please any suggestion is greatly appreciated.
my main functions look like the ones on this tutorial: Tutorial

Answer 1

You're missing the setInteractive() method that lets Phaser know a gameobject should listen for input events.
Modify this line:
monster = monsters.create(400,300, 'enemies', currentmonster.image).setOrigin(0.5);
To look like this instead:
monster = monsters.create(400,300, 'enemies', currentmonster.image).setOrigin(0.5).setInteractive();
You can read more about setInteractive in the Phaser 3 Docs for Sprite.