marklovers / kaplay

🦖 A JavaScript game library
https://kaplayjs.com
MIT License
247 stars 17 forks source link

fix: Polygons are filled incorrectly #139

Closed MeowcaTheoRange closed 4 weeks ago

MeowcaTheoRange commented 4 weeks ago

Describe the bug

How KAPLAY renders polygons right now can cause concave objects to look strange, due to the fact that KAPLAY renders polygon fill by creating triangles attached to the first point. For convex objects, this is fine, but for complex concave polygons, this can cause overlapping triangles or increased opacity within/outside of the shape, which can usually only be fixed by changing which point is first, or by splitting one polygon up into many different polygons.

Version

KAPLAY 3001.0.0

To Reproduce

  1. add() a GameObj with a complex concave polygon shape.

Expected behavior

Polygons are filled based on their bounds, maybe with triangles tessellated across the shape to make the final polygon, much like how most 3D objects are created and rendered.

Screenshots

What it looks like now: image What it renders: image

What it should look like, achieved by splitting the polygon into multiple and drawing them manually: image What it renders: image What it should ideally render: image

mflerackers commented 4 weeks ago

Kaplay has polygon triangulation, but it is currently behind an experimental triangulate: true flag in the drawPolygon options.