Phaser：如何在图层中对多边形进行分组？答案

【问题标题】：Phaser: how to group polygons in layers?Phaser：如何在图层中对多边形进行分组？
【发布时间】：2015-11-30 00:32:28
【问题描述】：

我想要两个多边形，一个是静止的，一个是移动并改变其形状的。当它们重叠时，我希望固定多边形保持在顶部。

这是我的方法：

(function() {
  "use strict";

  var SIZE_X = 400;
  var SIZE_Y = 300;
  var CENTER_COLOR = 0xFF33FF;
  var ALT_COLOR = 0xFFFF33;

  var moving_graphics;
  var tick = 0;

  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_graphics = new Phaser.Graphics(game, 0, 0);
      center_graphics.beginFill(CENTER_COLOR);
      center_graphics.drawPolygon(new Phaser.Polygon([
        new Phaser.Point(-30, -30),
        new Phaser.Point(-30, 30),
        new Phaser.Point(30, 30),
        new Phaser.Point(30, -30)
      ]));
      center_graphics.endFill();
      center_group.add(center_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() {
      moving_graphics.clear();
      moving_graphics.beginFill(ALT_COLOR);
      moving_graphics.drawPolygon(new Phaser.Polygon([
        new Phaser.Point(-SIZE_X / 2 + tick - tick % 40, -10),
        new Phaser.Point(-SIZE_X / 2 + tick - tick % 40, 10),
        new Phaser.Point(20 - SIZE_X / 2 + tick, 10),
        new Phaser.Point(20 - SIZE_X / 2 + tick, -10)
      ]));
      moving_graphics.endFill();
      tick++;
    }
  };

  var game = new Phaser.Game(SIZE_X, SIZE_Y, Phaser.AUTO, '', LayerTest);
})();

<!doctype html>
<html lang="en">

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>
</head>

<body>
</body>

</html>

我在中心创建一个粉红色正方形，然后在屏幕左侧创建一个黄色矩形，然后向中心移动。然而，即使我已将它们添加到组中并且中心组具有更高的 z-index，移动组始终设置在顶部。如果我不使用组，直接为每个图形对象设置z-index，最终的结果是一样的。

我希望移动组（黄色矩形）保持在另一个组的后面。

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

在添加中心组之前添加移动组。

(function() {
  "use strict";

  var SIZE_X = 400;
  var SIZE_Y = 300;
  var CENTER_COLOR = 0xFF33FF;
  var ALT_COLOR = 0xFFFF33;

  var moving_graphics;
  var tick = 0;

  var LayerTest = {
    preload: function() {},
    create: function() {
      game.world.setBounds(-SIZE_X / 2, -SIZE_Y / 2, SIZE_X / 2, SIZE_Y / 2);

      var moving_group = game.add.group();
      moving_graphics = new Phaser.Graphics(game, 0, 0);
      moving_group.add(moving_graphics);
      
      var center_group = game.add.group();
      var center_graphics = new Phaser.Graphics(game, 0, 0);
      center_graphics.beginFill(CENTER_COLOR);
      center_graphics.drawPolygon(new Phaser.Polygon([
        new Phaser.Point(-30, -30),
        new Phaser.Point(-30, 30),
        new Phaser.Point(30, 30),
        new Phaser.Point(30, -30)
      ]));
      center_graphics.endFill();
      center_group.add(center_graphics);

    },
    update: function() {
      moving_graphics.clear();
      moving_graphics.beginFill(ALT_COLOR);
      moving_graphics.drawPolygon(new Phaser.Polygon([
        new Phaser.Point(-SIZE_X / 2 + tick - tick % 40, -10),
        new Phaser.Point(-SIZE_X / 2 + tick - tick % 40, 10),
        new Phaser.Point(20 - SIZE_X / 2 + tick, 10),
        new Phaser.Point(20 - SIZE_X / 2 + tick, -10)
      ]));
      moving_graphics.endFill();
      tick++;
    }
  };

  var game = new Phaser.Game(SIZE_X, SIZE_Y, Phaser.AUTO, '', LayerTest);
})();

<!doctype html>
<html lang="en">

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>
</head>

<body>
</body>

</html>

【讨论】：

如此简单，我没有想到这一点。谢谢！