Found here a similar problem, but without any reply.
Right is a hex image. Left the same, but with a red debug line, but the coordinates not match. It paints the red line on the left side -1px
const points = [16, 0, 32, 8, 32, 17, 16, 25, 15, 25, 0, 17, 0, 8]
const vectorPoints: Phaser.Math.Vector2[] = []
for (let i = 0; i < points.length; i += 2) {
vectorPoints.push(new Phaser.Math.Vector2(points[i]!, points[i + 1]!))
}
const debugGraphics = this.add.graphics()
debugGraphics.lineStyle(1, 0xff3333, 1)
debugGraphics.setPosition(10, 10)
debugGraphics.strokePoints(vectorPoints, true)
What did i do wrong?
config
antialias: false,
pixelArt: true,
roundPixels: true,
type: Phaser.WEBGL,
And my other problem is, when i use that coordinates to define the interactive shape, the shape is not exact
tile.setInteractive(new Geom.Polygon(points, Geom.Polygon.Contains)
Seems like something likely off with the vector coordinates, did you console this out:
new Phaser.Math.Vector2(points[i]!, points[i + 1]!)
to see what coordinates it’s actually giving ?
console.log is correct:
but 0,17 to 0,8 is painted at -1,17 to -1,8.
What works is this: 0.01
const points = [16, 0, 32, 8, 32, 17, 16, 25, 15, 25, 0.01, 17, 0.01, 8]
I don’t think that’s the point of writing it that way.
samme
May 21, 2026, 3:14pm
4
I think that might be unavoidable with WebGL pixel-art rendering. You could use a bitmap image instead.
You can verify with
this.input.enableDebug(tile)
When i set to non pixel rendering you can see it,that the “halve” pixel of the stroke is antialiased painted (what is in that mode correct), only in pixel art view it is wrong.
The mouse cursor is a little bit outside of the 1px stroke, and it activates the over effect
But not a huge problem, only when you play on this zoom level
I can live with that. I was only curious because the line stroke of the polygon was wrong.
