Layering moving polygons

[unpollito]

Hi all,

 

I've been trying to achieve a certain effect. I have two polygons, one of which is still while the other moves, and when they overlap, I want to have the still polygon on top. However, it always seems to be the moving polygon that remains on top.

 

I've been trying to use groups following the example here, to no avail. Here is (most of) the offending code:

var LayerTest = {	preload: function ()	{	},	create: function ()	{		game.world.setBounds(-SIZE_X / 2, -SIZE_Y / 2, SIZE_X / 2, SIZE_Y / 2);		var center_group = game.add.group();		center_group.z = 1;		var center_hexagon_graphics = new Phaser.Graphics(game, 0, 0);		var center_hexagon_poly = buildRegularPolygon(0, 0, 6, 40);		center_hexagon_graphics.beginFill(CENTER_COLOR);		center_hexagon_graphics.drawPolygon(center_hexagon_poly);		center_hexagon_graphics.endFill();		center_group.add(center_hexagon_graphics);		var moving_group = game.add.group();		moving_group.z = 0;		moving_graphics = new Phaser.Graphics(game, 0, 0);		moving_group.add(moving_graphics);	},	update: function ()	{		var moving_poly = new Phaser.Polygon([			new Phaser.Point(-SIZE_X / 2 + tick, -10),			new Phaser.Point(-SIZE_X / 2 + tick, 10),			new Phaser.Point(20 - SIZE_X / 2 + tick, 10),			new Phaser.Point(20 - SIZE_X / 2 + tick, -10),		]);		moving_graphics.clear();		moving_graphics.beginFill(ALT_COLOR);		moving_graphics.drawPolygon(moving_poly);		moving_graphics.endFill();		tick++;	}};

This particular example creates a regular hexagon around (0,0), and a small yellow square in the left side of the screen that then moves right and overlaps with the hexagon. Even though I set moving_group.z to 0 and center_group.z to 1, it always paints the small square on top.

 

I also tried to do without the groups, setting the z indices on the graphics directly, but it didn't make a difference.

 

Any help will be much appreciated.

layer-test.zip

[unpollito]

In case anyone has the same problem, StackOverflow gave me the solution.

 

The key to have groups in layers is to add the groups in order: the group I add in the first place is always going to be shown in the bottom. One of the Phaser examples shows that you can edit the z-indices for a group, but this is misleading IMHO. Phaser doesn't seem to care about a group having a certain z value; if it's added last, it's painted on top of everything else.