[4.0.0-rc.5] Blurry or wide single pixel line regression, works correctly in 3.x #7198
Description
Version
- Phaser Version: 4.0.0-rc.5
- Operating system: Windows 11 22631.5840 / Ubuntu 24.04
- Browser: (Chrome, Edge, Firefox)
Description
I'm trying to draw a one pixel thick line using the graphics object, my DPI ratio is at the standard 100%.
Please ensure your browser is zoomed out to 100% for the screenshots to appear correctly.
4.0.0-rc.5 (bad):
3.85.2 (good):
Example Test Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdn.phaser.io/sandbox/4.0.0-rc.5.min.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
-->
<style>
html, body {
font-family: system-ui;
background: #f06d06;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden; /* optional: prevent scrollbars */
}
#game-container {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="game-container"></div>
<script>
const CELL_SIZE = 32;
class RenderGrid {
constructor(scene) {
this.scene = scene;
this.graphics = scene.add.graphics();
this.draw();
}
draw() {
this.graphics.clear();
this.graphics.lineStyle(window.devicePixelRatio || 1, 0x888888, 1); // width, color, alpha
// Vertical lines
for (let x = 1; x <= this.scene.cameras.main.width; x += CELL_SIZE) {
this.graphics.lineBetween(x, 0, x, this.scene.cameras.main.height);
}
// Horizontal lines
for (let y = 0; y <= this.scene.cameras.main.height; y += CELL_SIZE) {
this.graphics.lineBetween(0, y, this.scene.cameras.main.width, y);
}
}
}
class Scene extends Phaser.Scene {
create() {
this.grid = new RenderGrid(this);
}
update() {}
}
const config = {
type: Phaser.AUTO,
width: "100%",
height: "100%",
backgroundColor: "#222222",
parent: "game-container",
scene: Scene,
render: {
//pixelArt: true, // enabling this appears to "fix" it
antialias: false,
},
scale: {
mode: Phaser.Scale.RESIZE,
autoCenter: Phaser.Scale.CENTER_BOTH
}
};
new Phaser.Game(config);
</script>
</body>
</html>Additional Information
Strangely enabling pixel art in 4.0.0-rc5 does "appear" to fix the issue, however there may be unintended consequences.