flipY seems to displace tiles to an incorrect position when displayed.
var x = - halfWidth;
var y = - halfHeight;
if (element.flipX)
{
width *= -1;
x += frameWidth;
}
if (element.flipY)
{
height *= -1;
x += frameHeight;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Phaser Tile flipY Bug</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@4.1.0/dist/phaser.js"></script>
</head>
<body>
<script>
const config = {
type: Phaser.WEBGL,
width: 640,
height: 480,
scene: {
create
}
};
new Phaser.Game(config);
function create()
{
// Create a 2-tile, 16x16 tileset.
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 16;
const ctx = canvas.getContext('2d');
// Tile 0: empty
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, 16, 16);
// Tile 1: asymmetric shape so vertical flipping is obvious.
ctx.fillStyle = '#00ff00';
ctx.fillRect(16, 0, 16, 4);
ctx.fillRect(16, 0, 4, 16);
canvas.toBlob(blob =>
{
const url = URL.createObjectURL(blob);
this.textures.addImage(
'tiles',
new Image()
);
const image = new Image();
image.onload = () =>
{
this.textures.remove('tiles');
this.textures.addImage('tiles', image);
runTest(this);
};
image.src = url;
});
}
function runTest(scene)
{
const map = scene.make.tilemap({
data: [
[1, 1]
],
tileWidth: 16,
tileHeight: 16
});
const tileset = map.addTilesetImage(
'tiles',
'tiles',
16,
16,
0,
0
);
const layer = map.createLayer(
0,
tileset,
60,
40
);
// Flip only the right tile vertically.
const tile = layer.getTileAt(1, 0);
tile.flipY = true;
// Expected tile boundaries.
const graphics = scene.add.graphics();
graphics.lineStyle(1, 0xff0000);
graphics.strokeRect(60, 40, 16, 16);
graphics.strokeRect(76, 40, 16, 16);
scene.add.text(
60,
70,
'flipY should not change tile position',
{
fontSize: '12px',
color: '#ffffff'
}
);
}
</script>
</body>
</html>
Version
Description
flipY seems to displace tiles to an incorrect position when displayed.
src/renderer/webgl/renderNodes/transformer/TransformerTile.js:
verified that changing
x+= frameHeight;toy+= frameHeight;under flipY fixes the issue.Example Test Code
Additional Information