WebGL stroke of a Polygon drops a vertex when its origin-shifted position equals the previous raw vertex
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 40.3k
- Forks
- 7.2k
- PR merge metrics
- No merged PRs in 30d
Description
Version: Phaser 4.2.1; the code is unchanged on master. Not present in 3.x, whose StrokePathWebGL has no duplicate-point check. WebGL renderer only (the Canvas renderer strokes the full path).
Repro:
// A 6px diamond, centred by the default origin. Its stroke reaches three of the four
// corners and cuts across the fill; the fill itself is whole.
this.add.polygon(400, 300, [3, 0, 6, 3, 3, 6, 0, 3], 0x7d9c55)
.setStrokeStyle(1, 0x000000)
.setScale(20);
Any centred diamond does it, whatever its size or the order of its corners.
Cause: in src/gameobjects/shape/StrokePathWebGL.js, the loop that builds pointPath skips a point it takes for a repeat of the previous one:
var x = path[i] - dx;
var y = path[i + 1] - dy;
if (i > 0)
{
if (x === path[i - 2] && y === path[i - 1])
{
// Duplicate point, skip it
continue;
}
}
x and y have the display origin (dx, dy) subtracted; path[i - 2] and path[i - 1] have not. So the test fires whenever a vertex lies exactly (dx, dy) past the previous one, which is true of one edge of every centred diamond, and it never catches a genuinely repeated vertex unless dx and dy are both zero.
Fix: compare against the previous shifted point, e.g. the last entry pushed to pointPath, or against path[i - 2] - dx and path[i - 1] - dy.
Workaround: a Rectangle turned 45° draws the same diamond with a closed stroke; its path never meets the condition.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/gameobjects/shape/StrokePathWebGL.js and inspect the loop that builds pointPath from the shifted coordinates. Reproduce the issue with the centred diamond example using the WebGL renderer, then verify that duplicate-point detection compares shifted points. Done means the diamond stroke includes all four corners, while genuinely repeated vertices are still skipped.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 84/100