WebGL stroke of a Polygon drops a vertex when its origin-shifted position equals the previous raw vertex

Open Beginner friendly
#7,361 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
computer-graphics

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.

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.

Dominant language
JavaScript
Stars
40.3k
Forks
7.2k
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from phaserjs/phaser

All issues in phaserjs/phaser

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.