Phaser:如何在图层中对多边形进行分组?

解脂

我想要两个多边形,一个多边形固定,另一个多边形移动并改变其形状。当它们重叠时,我希望固定的多边形停留在顶部。

这是我的方法:

(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,则最终结果是相同的。

我希望移动组(黄色矩形)保留在另一个组的后面。

emackey

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何按特定类别对geopandas中的多边形进行分组和联合?

如何在具有多边形的多边形Python中的多边形中打洞

如何在GeoTools的单个图层中围绕所有多边形绘制一条线?

如何在Postgis中检测其他(许多)多边形内的多边形

如何在MATLAB中掩盖图像中的多边形?

如何在PDFBOX中绘制填充的多边形?

如何在 postgresql 中创建多边形

如何在 Mapbox 中显示多个绘制的多边形

如何在solr 4.10中的多边形内搜索

如何在多边形传单中绘制文本

如何在JavaScript中向多边形添加图案?

如何在SDL中绘制多边形?

如何在ggplot中应用多边形遮罩层

如何在CSS中制作多边形div

如何在MATLAB中识别多个相交的多边形?

如何在Java中填充多边形?

如何从图层内的多边形获取坐标

传单:如何仅在多边形内显示图层

在单个图层中更改任何多边形的颜色

在小叶图层组中查找图层为多边形的特定图层

如何在MySQL数据库中插入多边形并检查传递的多边形是否在其中?

UWP 地图图层多边形错误

如何在WPF中识别多边形为三角形

如何选择一个多边形并将其用作Folium中其他图层的剪贴蒙版?

如何限制图层中的多边形数量?

如何在Spring-Data-Solr中进行多边形空间搜索

如何在SPDF中使用距离对多边形进行子集化

如何在PostgreSQL中分割具有重叠多边形并计算重叠的多边形?

如何在 MySQL 中使用多边形存储多边形坐标