[4.0.0-rc.4] An object with interactive will block input of a container with filter no matter what

[ChrisCPI]

Version

• Phaser Version: 4.0.0-rc.4
• Operating system: All
• Browser: Google Chrome (all)

Description

I encountered an issue where, when you:

• Have a game object with interactive inside a container
• That entire container then has a filter applied to it
• A separate game object with interactive overlaps with that container at all

Then the latter game object will block any input to the container wherever they overlap, no matter what its depth is.

Example Test Code

https://phaser.io/sandbox/VRAP86wU

Additional Information

Explanation of the sandbox

The red rectangle on the left has no filter or anything. It behaves as expected.
The red rectangle on the right is inside a container which DOES have a filter (colormatrix hue).
The blue rectangle (which is BEHIND both rectangles) with interactive blocks the input of the container with filter.

[ChrisCPI]

Edited the title, as this issue still affects RC4.

[ChrisCPI]

Something I just discovered: Normally, the depth of the blue rectangle doesn't affect the issue. However, I found out that if the blue rectangle is created after the interactive has been set on the other rectangles (and explicitly has its depth set to be below the other rectangles), then the bug described in this issue goes away.

[ChrisCPI]

Yet another update: It seems what I noted above has more to do with in what order the interactives get set, because the bug will also be fixed if the block is still created first, but has setInteractive() called on it AFTER the other rectangles get their interactives set.

[ChrisCPI]

Alright, I'm almost certain that this issue is being caused (at least in part) by this:

phaser/src/input/InputPlugin.js

Lines 2883 to 2899 in a996562

	sortGameObjects: function (gameObjects, pointer)
	{
	if (gameObjects.length < 2 || !pointer.camera)
	{
	return gameObjects;
	}
	var list = pointer.camera.renderList;
	return gameObjects.sort(function (childA, childB)
	{
	var indexA = Math.max(list.indexOf(childA), 0);
	var indexB = Math.max(list.indexOf(childB), 0);
	return indexB - indexA;
	});
	},

When a container (or layer) is filtered, its children are not a part of the render list of the camera that pointer is associated with. So, when it tries to sort the game objects by the render order, when it comes to any objects in that list that's a child of that filtered parent, it can't find it, and so it always sorts lower than it should.

[ChrisCPI]

Updated diagnosis: I'm pretty sure at this point that the root cause of this is that the children of a filtered container/layer are only being added to the render list of the parent's filterCamera, and not the main camera that the parent is also a part of. I'm leaning towards believing that this is a bug, unless I'm given an explanation for otherwise.