[PIXI v3] Interactive Sprite below a TilingSprite Problem

[fsrojas]

Hello,

 

Let's say that i have an "Interactive" Sprite Button (sprite.interactive = true) ready for receiving click/touch events, and above of it there is a big TilingSprite (with the size of all screen) to create a Flash effect.

 

The tiling sprite is visible (tilingSprite.visible = true) and its alpha oscillate between 0.1 to 0.5. The problem is when i want to touch/click the Sprite button nothing happens... The only way to receive a touch/click event is by setting tilingSprite.visible = false.

 

Is there any way to set the interaction manager to "bypass" some elements like some TilingSprites or others?

[fsrojas]

var button = PIXI.Sprite.fromFrame("button.png");

button.anchor.x = 0.5;

button.anchor.y = 0.5;

button.position.x = defaultWidth*0.5;

button.position.y = defaultHeight*0.5;

button.interactive = button.buttonMode = true;

button.on("mousedown",button.mousedown);

button.mousedown = function(eventData)

{

//Button event

alert('mousedown!');

}

stage.addChild( button );

var textureWhite = PIXI.Texture.fromImage("white.png");

var tilingWhite = new PIXI.extras.TilingSprite(textureWhite, defaultWidth, defaultHeight);

tilingWhite.alpha = 0.2;

tilingWhite.position.x = 0;

tilingWhite.position.y = 0;

stage.addChild (tilingWhite);

//tilingWhite.visible = false;

[xerver]

Interesting case, there isn't currently a way to do this that I can think of.

I would post a feature request on GitHub:

https://github.com/GoodBoyDigital/pixi.js/issues

[Wanderer777]

button.buttonMode = true;

What does this do? It's not included in the V3 docs.

[xerver]

button.buttonMode = true;

What does this do? It's not included in the V3 docs.

 

 

Makes the cursor change when the object is hovered.