Two child sprites - Input does not work correctly

[Maras]

I am making pop up screen. The idea was that I will simply use empty sprite and add child sprite - background with input enabled, to override the buttons which are under this popup.

 

On top of this background is text and close button. But the button does not work as long as the background or parent sprite have input enabled.

 

There are many ways how to make workaround, but it does not seems right. (Easiest is just to have the close button on top of the parent and remove it along with the parent).

 

Is there a way how to do it with the close button as a child, but still overriding buttons under this parent sprite?

 

Thanks!

[rich]

Basically just give the child a higher Input Priority ID. Here's a fully working pop-up window example (using assets from the Phaser Examples repo)

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });function preload() {    game.load.image('background', 'assets/pics/bubble-on.png');    game.load.image('close', 'assets/sprites/orb-red.png');}var popup;var tween;function create() {    game.stage.backgroundColor = '#4b0049';    //  You can drag the pop-up window around    popup = game.add.sprite(game.world.centerX, game.world.centerY, 'background');    popup.anchor.set(0.5);    popup.inputEnabled = true;    popup.input.enableDrag();    //  Position the close button to the top-right of the popup sprite (minus 8px for spacing)    var pw = (popup.width / 2) - 30;    var ph = (popup.height / 2) - 8;    //  And click the close button to close it down again    var closeButton = game.make.sprite(pw, -ph, 'close');    closeButton.inputEnabled = true;    closeButton.input.priorityID = 1;    closeButton.events.onInputDown.add(closeWindow, this);    //  Add the "close button" to the popup window image    popup.addChild(closeButton);    //  Hide it awaiting a click    popup.scale.set(0);    //  Pop the window open    game.input.onDown.add(openWindow, this);}function openWindow() {    if ((tween && tween.isRunning) || popup.scale.x === 1)    {        return;    }        //  Create a tween that will pop-open the window, but only if it's not already tweening or open    tween = game.add.tween(popup.scale).to( { x: 1, y: 1 }, 1000, Phaser.Easing.Elastic.Out, true);}function closeWindow() {    if (tween.isRunning || popup.scale.x === 0)    {        return;    }    //  Create a tween that will close the window, but only if it's not already tweening or closed    tween = game.add.tween(popup.scale).to( { x: 0, y: 0 }, 500, Phaser.Easing.Elastic.In, true);}function render() {    game.debug.text("Click to open window + drag + close", 32, 32);}

[Maras]

That's embarassing.

 

I used priority, but I also asigned it to background incorrectly (button got priority 1, background 2). I tried to swap these values, but perhaps the TypeScript was not compiled yet, so it did not worked when I tried it.

 

Anyway, thank you very much!