Clickable group of arbitrary layered sprites

[DrewFin]

I am generating game objects that are made up sprite parts layered on top of each other. Creating a group for each of these objects and setting the position on the canvas, then setting each child sprite to 0,0 works great for moving everything around as a unit.

 

The problem I'm having now is that I need to be able to react to a click on the group. I could react to one of the sprites in the group using sprite.events.add.onInputDown(), but the sprites in use are determined at run-time, and so I would only want to react to clicks on one (presumably the top-most rendered?) sprite in the group. This is doable, but I'm wondering if there's a cleaner solution?

 

A Phaser group doesn't have any input events, but the underlying Pixi.js has the 'interactive', 'buttonmode' and 'hitarea' properties, and the 'mousedown' method. However, I'm not getting any reaction to those.

 

For reference: 

(TypeScript) newGroup.interactive = true;                newGroup.buttonMode = true;                newGroup.hitArea = new Phaser.Rectangle(0, 0, 32, 32);                newGroup.mousedown = (e: PIXI.InteractionData) => { alert("click"); }

I'm trying to determine of I'm doing something wrong, or if the Pixi.js DisplayObjectContainer doesn't actually have the built-in events I'm trying to use - or alternately, if there's some better way to accomplish clicking on a stacked group of sprites.

 

Thanks!