fix: Fixes for Tiled plugin (#2858)

* fix: Incorrect type on tilemap getTileByPoint * feat: Add convex poly warning suppression * change: Remove dep on Isometric map * fix: Infinite loop with certain polygon triangulations * Fix for colinear triangles * Pass through debug draw settings in composite * Add base elevation for Isometric map * Implement isometric map visibility and opacity * feat: add tileset offset
excaliburjs · Dec 31, 2023 · 37b13b5 · 37b13b5
1 parent 3e82bb0
commit 37b13b5
Show file tree

Hide file tree

Showing 24 changed files with 406 additions and 110 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,11 +15,18 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
+- Added ability to apply draw offset to `ex.IsometricMap` and `ex.Tilemap`
+- Added `visibility` and `opacity` to `ex.IsometricMap`
+- Added base elevation for `ex.IsometricMap` so multiple maps can sort correctly
+- Added method to suppress convex polygon warning for library code usage
+- Added more configuration options to debug draw flags, including isometric map controls
 - Added `actionstart` and `actioncomplete` events to the Actor that are fired when an action starts and completes
 
 
 ### Fixed
 
+- Fixed infinite loop :bomb: when certain degenerate polygons were attempted to be triangulated!
+- Fixed incorrect type on `ex.Tilemap.getTileByPoint()`
 - Fixed TS type on `GraphicsComponent` and allow `.material` to be null to unset, current workaround is using `.material = null as any`
 
 ### Updates
@@ -28,7 +35,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Changed
 
--
+- Tweaked debug draw to be less noisy by default
+- Removed dependency on `ex.IsometricMap` in the `ex.IsometricEntityComponent`, this allows for greater flexibility when using the component when a map may not be known or constructed.
 
 <!--------------------------------- DO NOT EDIT BELOW THIS LINE --------------------------------->
 <!--------------------------------- DO NOT EDIT BELOW THIS LINE --------------------------------->

diff --git a/sandbox/tests/polygon/index.html b/sandbox/tests/polygon/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Polygon Triangulate</title>
+</head>
+<body>
+  <script src="../../lib/excalibur.js"></script>
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/sandbox/tests/polygon/index.ts b/sandbox/tests/polygon/index.ts
@@ -0,0 +1,95 @@
+///<reference path="../../lib/excalibur.d.ts" />
+
+
+var game = new ex.Engine({
+  width: 800,
+  height: 600,
+  displayMode: ex.DisplayMode.FitScreenAndFill
+});
+game.toggleDebug();
+game.debug.collider.showBounds = false;
+
+var actor = new ex.Actor({pos: ex.vec(200, 100)});
+// var shape = ex.Shape.Polygon([
+//   ex.vec(0,0),
+//   ex.vec(-1.6875,-25.0625),
+//   ex.vec(6.3125,-25.0625),
+//   ex.vec(5.625,-33.125),
+//   ex.vec(21.5625,-32.8125),
+//   ex.vec(21.4375,-40.6875),
+//   ex.vec(29.1875,-41.9375),
+//   ex.vec(32.8125,-38.3125),
+//   ex.vec(33.0625,-21.8125),
+//   ex.vec(25.8125,-21.5625),
+//   ex.vec(24.125,10.375),
+//   ex.vec(-8.75,8.5),
+//   ex.vec(-11.8125,5.5625),
+//   ex.vec(-10.9375,-0.5625),
+//   ex.vec(-3.3125,-2.4375)
+// ]);
+
+// var points = [
+//     ex.vec(0,0),
+//     ex.vec(-1.6875,-25.0625),
+//     ex.vec(6.3125,-25.0625),
+//     ex.vec(5.625,-33.125),
+//     ex.vec(21.5625,-32.8125),
+//     ex.vec(21.4375,-40.6875),
+//     ex.vec(29.1875,-41.9375),
+//     ex.vec(32.8125,-38.3125),
+//     ex.vec(33.0625,-21.8125),
+//     ex.vec(25.8125,-21.5625),
+//     ex.vec(24.125,10.375),
+//     ex.vec(-8.75,8.5),
+//     ex.vec(-11.8125,5.5625),
+//     ex.vec(-10.9375,-0.5625),
+//     ex.vec(-3.3125,-2.4375)
+//   ]
+
+// var points = [
+//   ex.vec(200,100),
+//   ex.vec(300,320),
+//   ex.vec(400,100),
+//   ex.vec(500,300),
+//   ex.vec(350,300),
+//   ex.vec(300,500),
+//   ex.vec(250,300),
+//   ex.vec(100,300)];
+
+var points = [
+  ex.vec(343,392),
+  ex.vec(475,103),
+  ex.vec(245,151),
+  ex.vec(193,323),
+  ex.vec(91, 279),
+  ex.vec(51, 301),
+  ex.vec(25, 381),
+  ex.vec(80, 334),
+  ex.vec(142,418),
+  ex.vec(325,480),
+  ex.vec(340,564),
+  ex.vec(468,597)
+]
+
+var colinear = [
+  ex.vec(160, 80),
+  ex.vec(80, 40),
+  ex.vec(0, 0),
+];
+
+function triangleArea(a: ex.Vector, b: ex.Vector, c: ex.Vector) {
+  return Math.abs((a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - c.y)))/2
+}
+
+console.log('triangle area', triangleArea(ex.vec(160, 80),
+ex.vec(80, 40),
+ex.vec(0, 0)));
+
+var shape = ex.Shape.Polygon(points, ex.Vector.Zero, true);
+
+var triangulated = shape.triangulate();
+actor.collider.set(triangulated);
+game.add(actor);
+
+
+game.start();
diff --git a/src/engine/Collision/Colliders/CircleCollider.ts b/src/engine/Collision/Colliders/CircleCollider.ts
@@ -253,7 +253,8 @@ export class CircleCollider extends Collider {
     return new Projection(Math.min.apply(Math, scalars), Math.max.apply(Math, scalars));
   }
 
-  public debug(ex: ExcaliburGraphicsContext, color: Color) {
+  public debug(ex: ExcaliburGraphicsContext, color: Color, options?: { lineWidth: number }) {
+    const { lineWidth } = { ...{ lineWidth: 1 }, ...options };
     const tx = this._transform;
     const scale = tx?.globalScale ?? Vector.One;
     const rotation = tx?.globalRotation ?? 0;
@@ -262,7 +263,7 @@ export class CircleCollider extends Collider {
     ex.translate(pos.x, pos.y);
     ex.rotate(rotation);
     ex.scale(scale.x, scale.y);
-    ex.drawCircle((this.offset ?? Vector.Zero), this._naturalRadius, Color.Transparent, color, 2);
+    ex.drawCircle((this.offset ?? Vector.Zero), this._naturalRadius, Color.Transparent, color, lineWidth);
     ex.restore();
   }
 }
diff --git a/src/engine/Collision/Colliders/Collider.ts b/src/engine/Collision/Colliders/Collider.ts
@@ -113,7 +113,7 @@ export abstract class Collider implements Clonable<Collider> {
   abstract update(transform: Transform): void;
 
 
-  abstract debug(ex: ExcaliburGraphicsContext, color: Color): void;
+  abstract debug(ex: ExcaliburGraphicsContext, color: Color, options?: { lineWidth: number, pointSize: number }): void;
 
   abstract clone(): Collider;
 }
diff --git a/src/engine/Collision/Colliders/CompositeCollider.ts b/src/engine/Collision/Colliders/CompositeCollider.ts
@@ -236,10 +236,10 @@ export class CompositeCollider extends Collider {
     }
   }
 
-  public debug(ex: ExcaliburGraphicsContext, color: Color) {
+  public debug(ex: ExcaliburGraphicsContext, color: Color,  options?: { lineWidth: number, pointSize: number }) {
     const colliders = this.getColliders();
     for (const collider of colliders) {
-      collider.debug(ex, color);
+      collider.debug(ex, color, options);
     }
   }