我想要两个多边形，一个多边形固定，另一个多边形移动并改变其形状。当它们重叠时，我希望固定的多边形停留在顶部。
这是我的方法：
(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，则最终结果是相同的。
我希望移动组（黄色矩形）保留在另一个组的后面。
最佳答案
在添加中心组之前，先添加移动组。
(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>关于javascript - Phaser:如何在图层中对多边形进行分组？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33984759/