My goal is to animate two polygons: one that remains stationary and another that changes shape while moving. The challenge is to ensure that the stationary polygon always stays on top when overlapping.
This is my proposed solution:
(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>I have created a pink square at the center and a yellow rectangle that moves from the left side of the screen towards the center. Despite organizing them into groups with different z-index values, the moving group consistently appears on top. Adjusting z-index directly for each graphics object also does not yield the desired outcome.
The objective is to keep the moving group (yellow rectangle) behind the stationary one.