Hi folks.
I'm having a bit of problem with interactivity using PIXI.js. I have my root container set to a scale of 2 so that all my sprites etc which are children of this container are also scaled. I'm doing this using code like this:
this.rootStage.scale.x = 2;
this.rootStage.scale.y = 2;
where this.rootStage is a PIXI.Container. This seems to work fine for rendering, however when trying to use interaction on one of the child sprites of this root container like so:
sprite.interactive = true;
sprite.buttonMode = true;
sprite.on('mouseover', this.onMouseOver);
the 'mouseover' callback only triggers when the mouse is in a position where the unscaled sprite would be. In other words the hit detection for mouse interaction doesn't seem to be paying attention to the scaling of the parent container. Am I doing this right and is there a way to fix this?
Many thanks
Update:
I've discovered the issue. I have another container between the root and the sprite so the setup looks something like this 'rootStage -> mapContainer -> sprite'. The problem seems to be with using 'cacheAsBitmap = true' on the mapContainer. If I turn this off then the interaction with the sprite seems to work correctly. What is the correct way to get sprite interaction to work when using cacheAsBitmap?