Jump to content

Layering moving polygons


Recommended Posts

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. :)


Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...