Question

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

这是我的方法：

＆＃13;

(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);
})();

＆＃13;

<!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>

＆＃13;

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

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

Answer 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>

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

1 个答案: