marklovers / kaplay

🦖 A JavaScript game library

Home Page:https://kaplayjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

fix: Polygons are filled incorrectly

MeowcaTheoRange opened this issue · comments

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

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