excalibur 0.32.0-alpha.1570 → 0.32.0-alpha.1572

package/build/dist/excalibur.js

@@ -1,4 +1,4 @@
-/*! excalibur - 0.32.0-alpha.1570+3b683c5 - 2025-11-26
+/*! excalibur - 0.32.0-alpha.1572+72a3430 - 2025-11-28
 https://github.com/excaliburjs/Excalibur
 Copyright (c) 2025 Excalibur.js <https://github.com/excaliburjs/Excalibur/graphs/contributors>
 Licensed BSD-2-Clause
@@ -6408,13 +6408,22 @@ Check your bundler settings to make sure this is not the case! Excalibur has ESM
       const intersect = this.intersect(bb);
       return _BoundingBox2.getSideFromIntersection(intersect);
     }
+    /**
+     * Draw a debug bounding box
+     * @param ex
+     * @param color
+     * @deprecated
+     */
+    draw(ex, options = { color: Color.Yellow }) {
+      ex.debug.drawRect(this.left, this.top, this.width, this.height, options);
+    }
     /**
      * Draw a debug bounding box
      * @param ex
      * @param color
      */
-    draw(ex, color = Color.Yellow) {
-      ex.debug.drawRect(this.left, this.top, this.width, this.height, { color });
+    debug(ex, options = { color: Color.Yellow }) {
+      ex.debug.drawRect(this.left, this.top, this.width, this.height, options);
     }
   };
   _BoundingBox._SCRATCH_INTERSECT = [0, 0, 0, 0];
@@ -6862,9 +6871,9 @@ Check your bundler settings to make sure this is not the case! Excalibur has ESM
       const helper = (currentNode) => {
         if (currentNode) {
           if (currentNode.isLeaf()) {
-            currentNode.bounds.draw(ex, Color.Green);
+            currentNode.bounds.debug(ex, { color: Color.Green });
           } else {
-            currentNode.bounds.draw(ex, Color.White);
+            currentNode.bounds.debug(ex, { color: Color.White });
           }
           if (currentNode.left) {
             helper(currentNode.left);
@@ -7798,7 +7807,7 @@ Check your bundler settings to make sure this is not the case! Excalibur has ESM
       ex.translate(pos.x, pos.y);
       ex.rotate(rotation);
       ex.scale(scale.x, scale.y);
-      ex.drawCircle((_d = this.offset) != null ? _d : Vector.Zero, this._naturalRadius, Color.Transparent, color, lineWidth);
+      ex.debug.drawCircle((_d = this.offset) != null ? _d : Vector.Zero, this._naturalRadius, Color.Transparent, color, lineWidth);
       ex.restore();
     }
   }
@@ -8564,9 +8573,9 @@ Check your bundler settings to make sure this is not the case! Excalibur has ESM
     debug(ex, color) {
       const begin = this._getTransformedBegin();
       const end = this._getTransformedEnd();
-      ex.drawLine(begin, end, color, 2);
-      ex.drawCircle(begin, 2, color);
-      ex.drawCircle(end, 2, color);
+      ex.debug.drawLine(begin, end, { color, lineWidth: 2 });
+      ex.debug.drawCircle(begin, 2, color);
+      ex.debug.drawCircle(end, 2, color);
     }
   }
   class PolygonCollider extends Collider {
@@ -11300,11 +11309,118 @@ Read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL
       });
     }
   }
-  const debugFont = "data:image/png;base64,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";
+  const debugFont2 = "data:image/png;base64,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";
+  const _Debug = class _Debug2 {
+    static registerDebugConfig(config) {
+      _Debug2.config = config;
+    }
+    static draw(debugDrawCall) {
+      this._drawCalls.push(debugDrawCall);
+    }
+    static drawPoint(point2, options) {
+      _Debug2.draw((ctx) => {
+        ctx.debug.drawPoint(point2, options);
+      });
+    }
+    static drawLine(start, end, options) {
+      _Debug2.draw((ctx) => {
+        ctx.debug.drawLine(start, end, options);
+      });
+    }
+    static drawLines(points, options) {
+      if (points.length > 1) {
+        _Debug2.draw((ctx) => {
+          for (let i = 0; i < points.length - 1; i++) {
+            ctx.debug.drawLine(points[i], points[i + 1], options);
+          }
+        });
+      }
+    }
+    static drawText(text, pos) {
+      _Debug2.draw((ctx) => {
+        ctx.debug.drawText(text, pos);
+      });
+    }
+    static drawPolygon(points, options) {
+      if (points.length > 1) {
+        _Debug2.draw((ctx) => {
+          const firstPoint = points[0];
+          const polygon = [...points, firstPoint];
+          for (let i = 0; i < polygon.length - 1; i++) {
+            ctx.debug.drawLine(polygon[i], polygon[i + 1], options);
+          }
+        });
+      }
+    }
+    static drawCircle(center, radius, options) {
+      const { color, strokeColor, width } = {
+        color: Color.Black,
+        strokeColor: void 0,
+        width: void 0,
+        ...options
+      };
+      _Debug2.draw((ctx) => {
+        ctx.debug.drawCircle(center, radius, color, strokeColor, width);
+      });
+    }
+    static drawBounds(boundingBox, options) {
+      _Debug2.draw((ctx) => {
+        ctx.debug.drawRect(boundingBox.left, boundingBox.top, boundingBox.width, boundingBox.height, options);
+      });
+    }
+    static drawRay(ray, options) {
+      const { distance, color } = {
+        color: Color.Blue,
+        distance: 10,
+        ...options
+      };
+      _Debug2.draw((ctx) => {
+        ctx.z = _Debug2.config.settings.z.ray;
+        const start = ray.pos;
+        const end = ray.pos.add(ray.dir.scale(distance));
+        ctx.debug.drawLine(start, end, { color });
+      });
+    }
+    static flush(ctx) {
+      ctx.save();
+      ctx.z = _Debug2.z;
+      for (const drawCall of _Debug2._drawCalls) {
+        drawCall(ctx);
+      }
+      ctx.restore();
+      _Debug2.clear();
+    }
+    static clear() {
+      _Debug2._drawCalls.length = 0;
+    }
+  };
+  _Debug._drawCalls = [];
+  _Debug.z = Infinity;
+  _Debug.config = {
+    // add some defaults
+    settings: {
+      text: {
+        foreground: Color.Black,
+        background: Color.Transparent,
+        border: Color.Transparent
+      },
+      z: {
+        text: Number.POSITIVE_INFINITY,
+        point: Number.MAX_SAFE_INTEGER - 1,
+        ray: Number.MAX_SAFE_INTEGER - 1,
+        dashed: Number.MAX_SAFE_INTEGER - 2,
+        solid: Number.MAX_SAFE_INTEGER - 3
+      }
+    }
+  };
+  let Debug = _Debug;
   class DebugText {
     constructor() {
-      this.fontSheet = debugFont;
+      this.fontSheet = debugFont2;
       this.size = 16;
+      this.foregroundColor = Debug.config.settings.text.foreground;
+      this.backgroundColor = Debug.config.settings.text.background;
+      this.borderColor = Debug.config.settings.text.border;
       this.load();
     }
     load() {
@@ -11313,17 +11429,23 @@ Read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL
         this._spriteSheet = SpriteSheet.fromImageSource({
           image: this._imageSource,
           grid: {
-            rows: 4,
+            rows: 8,
             columns: 16,
-            spriteWidth: 16,
-            spriteHeight: 16
+            spriteWidth: 6 * 2 - 2,
+            // hack to avoid sample bleed
+            spriteHeight: 12 * 2
+          },
+          spacing: {
+            // hack to avoid sample bleed
+            originOffset: { x: 2, y: 0 },
+            margin: { x: 2, y: 0 }
           }
         });
         this._spriteFont = new SpriteFont({
-          alphabet: `0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ,!'&."?-()+# `,
-          caseInsensitive: true,
+          alphabet: " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~?",
+          caseInsensitive: false,
           spriteSheet: this._spriteSheet,
-          spacing: -6
+          spacing: 2
         });
       });
     }
@@ -11333,9 +11455,23 @@ Read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL
      * @param text
      * @param pos
      */
-    write(ctx, text, pos) {
+    write(ctx, text, pos, foreground, background) {
       if (this._imageSource.isLoaded()) {
+        const pos1 = ctx.getTransform().getPosition();
+        ctx.save();
+        ctx.resetTransform();
+        ctx.z = Debug.config.settings.z.text;
+        ctx.translate(pos1.x, pos1.y);
+        const bounds = this._spriteFont.measureText(text);
+        const color = foreground != null ? foreground : this.foregroundColor;
+        const bg = background != null ? background : this.backgroundColor;
+        ctx.save();
+        ctx.z = Debug.config.settings.z.solid;
+        ctx.drawRectangle(pos, bounds.width, bounds.height, bg, this.borderColor, 1);
+        ctx.restore();
+        ctx.tint = color;
         this._spriteFont.render(ctx, text, null, pos.x, pos.y);
+        ctx.restore();
       }
     }
   }
@@ -11499,8 +11635,8 @@ Read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL
       gl.bindTexture(gl.TEXTURE_2D, null);
     }
   }
-  const lineVertexSource = "#version 300 es\nin vec2 a_position;\nin vec4 a_color;\n\nout lowp vec4 v_color;\n\nuniform mat4 u_matrix;\n\nvoid main() {\n   // Set the vertex position using the ortho transform matrix\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n\n   // Passthrough the color\n   v_color = a_color;\n}";
-  const lineFragmentSource = "#version 300 es\nprecision mediump float;\n\n// Color\nin lowp vec4 v_color;\n\nout vec4 fragColor;\n\nvoid main() {\n  fragColor = v_color;\n}";
+  const lineVertexSource = "#version 300 es\nin vec2 a_position;\nin vec4 a_color;\nin float a_lengthSoFar;\n\nout lowp vec4 v_color;\nout float v_lengthSoFar;\n\nuniform mat4 u_matrix;\n\nvoid main() {\n   // Set the vertex position using the ortho transform matrix\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n\n   // Passthrough the color\n   v_color = a_color;\n\n   // Passthrough the line length so far\n   v_lengthSoFar = a_lengthSoFar;\n}\n";
+  const lineFragmentSource = "#version 300 es\nprecision mediump float;\n\n// Color\nin lowp vec4 v_color;\nin float v_lengthSoFar;\n\nout vec4 fragColor;\n\nuniform bool u_dashed;\n\nvoid main() {\n  fragColor = v_color;\n  if (u_dashed) {\n    fragColor.a = smoothstep(0.5, 0.55, fract(v_lengthSoFar / 10.0)); // 10 pixel dashes\n    fragColor.rgb *= fragColor.a;\n  }\n}\n";
   class Line extends Graphic {
     constructor(options) {
       super();
@@ -11795,6 +11931,7 @@ Read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL
             graphic.flipVertical = oldFlipVertical;
           }
           if (((_b = this._engine) == null ? void 0 : _b.isDebug) && this._engine.debug.graphics.showBounds) {
+            this._graphicsContext.save();
             const offset2 = vec(offsetX, offsetY);
             if (graphic instanceof GraphicsGroup) {
               for (const member of graphic.members) {
@@ -11807,14 +11944,15 @@ Read more here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL
                   pos = member.offset;
                 }
                 if (graphic.useAnchor) {
-                  g == null ? void 0 : g.localBounds.translate(offset2.add(pos)).draw(this._graphicsContext, this._engine.debug.graphics.boundsColor);
+                  g == null ? void 0 : g.localBounds.translate(offset2.add(pos)).debug(this._graphicsContext, { color: this._engine.debug.graphics.boundsColor, dashed: true });
                 } else {
-                  g == null ? void 0 : g.localBounds.translate(pos).draw(this._graphicsContext, this._engine.debug.graphics.boundsColor);
+                  g == null ? void 0 : g.localBounds.translate(pos).debug(this._graphicsContext, { color: this._engine.debug.graphics.boundsColor, dashed: true });
                 }
               }
             } else {
-              graphic == null ? void 0 : graphic.localBounds.translate(offset2).draw(this._graphicsContext, this._engine.debug.graphics.boundsColor);
+              graphic == null ? void 0 : graphic.localBounds.translate(offset2).debug(this._graphicsContext, { color: this._engine.debug.graphics.boundsColor, dashed: true });
             }
+            this._graphicsContext.restore();
           }
         }
       }
@@ -12640,6 +12778,30 @@ Read https://excaliburjs.com/docs/imagesource for more information.`
       this._ex.__ctx.closePath();
       this._ex.__ctx.restore();
     }
+    drawCircle(pos, radius, color, stroke, thickness) {
+      this._ex.__ctx.save();
+      this._ex.__ctx.beginPath();
+      if (stroke) {
+        this._ex.__ctx.strokeStyle = stroke.toString();
+      }
+      if (thickness) {
+        this._ex.__ctx.lineWidth = thickness;
+      }
+      this._ex.__ctx.fillStyle = color.toString();
+      this._ex.__ctx.arc(
+        this._ex.snapToPixel ? ~~(pos.x + pixelSnapEpsilon$1) : pos.x,
+        this._ex.snapToPixel ? ~~(pos.y + pixelSnapEpsilon$1) : pos.y,
+        radius,
+        0,
+        Math.PI * 2
+      );
+      this._ex.__ctx.fill();
+      if (stroke) {
+        this._ex.__ctx.stroke();
+      }
+      this._ex.__ctx.closePath();
+      this._ex.__ctx.restore();
+    }
     drawText(text, pos) {
       this._debugText.write(this._ex, text, pos);
     }
@@ -12792,7 +12954,15 @@ Read https://excaliburjs.com/docs/imagesource for more information.`
       this.__ctx.scale(x, y);
     }
     getTransform() {
-      throw new Error("Not implemented");
+      const domMatrix = this.__ctx.getTransform();
+      const affine = new AffineMatrix();
+      affine.data[0] = domMatrix.a;
+      affine.data[1] = domMatrix.b;
+      affine.data[2] = domMatrix.c;
+      affine.data[3] = domMatrix.d;
+      affine.data[4] = domMatrix.e;
+      affine.data[5] = domMatrix.f;
+      return affine;
     }
     multiply(_m) {
       this.__ctx.setTransform(this.__ctx.getTransform().multiply(_m.toDOMMatrix()));
@@ -14486,101 +14656,17 @@ void main() {
     "u_screen_texture"
   ];
   let Material = _Material;
-  const _Debug = class _Debug2 {
-    static registerGraphicsContext(ctx) {
-      _Debug2._ctx = ctx;
-    }
-    static draw(debugDrawCall) {
-      this._drawCalls.push(debugDrawCall);
-    }
-    static drawPoint(point2, options) {
-      _Debug2.draw((ctx) => {
-        ctx.debug.drawPoint(point2, options);
-      });
-    }
-    static drawLine(start, end, options) {
-      _Debug2.draw((ctx) => {
-        ctx.debug.drawLine(start, end, options);
-      });
-    }
-    static drawLines(points, options) {
-      if (points.length > 1) {
-        _Debug2.draw((ctx) => {
-          for (let i = 0; i < points.length - 1; i++) {
-            ctx.debug.drawLine(points[i], points[i + 1], options);
-          }
-        });
-      }
-    }
-    static drawText(text, pos) {
-      _Debug2.draw((ctx) => {
-        ctx.debug.drawText(text, pos);
-      });
-    }
-    static drawPolygon(points, options) {
-      if (points.length > 1) {
-        _Debug2.draw((ctx) => {
-          const firstPoint = points[0];
-          const polygon = [...points, firstPoint];
-          for (let i = 0; i < polygon.length - 1; i++) {
-            ctx.debug.drawLine(polygon[i], polygon[i + 1], options);
-          }
-        });
-      }
-    }
-    static drawCircle(center, radius, options) {
-      const { color, strokeColor, width } = {
-        color: Color.Black,
-        strokeColor: void 0,
-        width: void 0,
-        ...options
-      };
-      _Debug2.draw((ctx) => {
-        ctx.drawCircle(center, radius, color, strokeColor, width);
-      });
-    }
-    static drawBounds(boundingBox, options) {
-      _Debug2.draw((ctx) => {
-        ctx.debug.drawRect(boundingBox.left, boundingBox.top, boundingBox.width, boundingBox.height, options);
-      });
-    }
-    static drawRay(ray, options) {
-      const { distance, color } = {
-        color: Color.Blue,
-        distance: 10,
-        ...options
-      };
-      _Debug2.draw((ctx) => {
-        const start = ray.pos;
-        const end = ray.pos.add(ray.dir.scale(distance));
-        ctx.debug.drawLine(start, end, { color });
-      });
-    }
-    static flush(ctx) {
-      ctx.save();
-      ctx.z = _Debug2.z;
-      for (const drawCall of _Debug2._drawCalls) {
-        drawCall(ctx);
-      }
-      ctx.restore();
-      _Debug2.clear();
-    }
-    static clear() {
-      _Debug2._drawCalls.length = 0;
-    }
-  };
-  _Debug._drawCalls = [];
-  _Debug.z = Infinity;
-  let Debug = _Debug;
-  class LineRenderer {
+  class DebugLineRenderer {
     constructor() {
-      this.type = "ex.line";
+      this.type = "ex.debug-line";
       this.priority = 0;
       this._maxLines = 10922;
       this._vertexIndex = 0;
       this._lineCount = 0;
       this._startScratch = vec(0, 0);
       this._endScratch = vec(0, 0);
+      this._lengthSoFar = 0;
+      this._currentlyDashed = false;
     }
     initialize(gl, context) {
       this._gl = gl;
@@ -14595,7 +14681,8 @@ void main() {
       this._shader.setUniformMatrix("u_matrix", this._context.ortho);
       this._vertexBuffer = new VertexBuffer({
         gl,
-        size: 6 * 2 * this._maxLines,
+        size: 7 * 6 * this._maxLines,
+        // 7 floats per vert, 6 verts per line
         type: "dynamic"
       });
       this._layout = new VertexLayout({
@@ -14604,7 +14691,8 @@ void main() {
         shader: this._shader,
         attributes: [
           ["a_position", 2],
-          ["a_color", 4]
+          ["a_color", 4],
+          ["a_lengthSoFar", 1]
         ]
       });
     }
@@ -14614,27 +14702,62 @@ void main() {
       this._context = null;
       this._gl = null;
     }
-    draw(start, end, color) {
-      if (this._isFull()) {
+    draw(start, end, color, width = 2, dashed = false) {
+      if (this._isFull() || this._currentlyDashed !== dashed) {
+        this._currentlyDashed = dashed;
         this.flush();
       }
       this._lineCount++;
       const transform = this._context.getTransform();
       const finalStart = transform.multiply(start, this._startScratch);
       const finalEnd = transform.multiply(end, this._endScratch);
+      const dir = finalEnd.sub(finalStart);
+      const dist = finalStart.distance(finalEnd);
+      const normal = dir.normal();
+      const halfWidth = width / 2;
       const vertexBuffer = this._vertexBuffer.bufferData;
-      vertexBuffer[this._vertexIndex++] = finalStart.x;
-      vertexBuffer[this._vertexIndex++] = finalStart.y;
+      vertexBuffer[this._vertexIndex++] = finalStart.x - normal.x * halfWidth;
+      vertexBuffer[this._vertexIndex++] = finalStart.y - normal.y * halfWidth;
       vertexBuffer[this._vertexIndex++] = color.r / 255;
       vertexBuffer[this._vertexIndex++] = color.g / 255;
       vertexBuffer[this._vertexIndex++] = color.b / 255;
       vertexBuffer[this._vertexIndex++] = color.a;
-      vertexBuffer[this._vertexIndex++] = finalEnd.x;
-      vertexBuffer[this._vertexIndex++] = finalEnd.y;
+      vertexBuffer[this._vertexIndex++] = this._lengthSoFar;
+      vertexBuffer[this._vertexIndex++] = finalStart.x + normal.x * halfWidth;
+      vertexBuffer[this._vertexIndex++] = finalStart.y + normal.y * halfWidth;
       vertexBuffer[this._vertexIndex++] = color.r / 255;
       vertexBuffer[this._vertexIndex++] = color.g / 255;
       vertexBuffer[this._vertexIndex++] = color.b / 255;
       vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = this._lengthSoFar;
+      vertexBuffer[this._vertexIndex++] = finalEnd.x - normal.x * halfWidth;
+      vertexBuffer[this._vertexIndex++] = finalEnd.y - normal.y * halfWidth;
+      vertexBuffer[this._vertexIndex++] = color.r / 255;
+      vertexBuffer[this._vertexIndex++] = color.g / 255;
+      vertexBuffer[this._vertexIndex++] = color.b / 255;
+      vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = this._lengthSoFar + dist;
+      vertexBuffer[this._vertexIndex++] = finalEnd.x - normal.x * halfWidth;
+      vertexBuffer[this._vertexIndex++] = finalEnd.y - normal.y * halfWidth;
+      vertexBuffer[this._vertexIndex++] = color.r / 255;
+      vertexBuffer[this._vertexIndex++] = color.g / 255;
+      vertexBuffer[this._vertexIndex++] = color.b / 255;
+      vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = this._lengthSoFar + dist;
+      vertexBuffer[this._vertexIndex++] = finalStart.x + normal.x * halfWidth;
+      vertexBuffer[this._vertexIndex++] = finalStart.y + normal.y * halfWidth;
+      vertexBuffer[this._vertexIndex++] = color.r / 255;
+      vertexBuffer[this._vertexIndex++] = color.g / 255;
+      vertexBuffer[this._vertexIndex++] = color.b / 255;
+      vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = this._lengthSoFar;
+      vertexBuffer[this._vertexIndex++] = finalEnd.x + normal.x * halfWidth;
+      vertexBuffer[this._vertexIndex++] = finalEnd.y + normal.y * halfWidth;
+      vertexBuffer[this._vertexIndex++] = color.r / 255;
+      vertexBuffer[this._vertexIndex++] = color.g / 255;
+      vertexBuffer[this._vertexIndex++] = color.b / 255;
+      vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = this._lengthSoFar + dist;
     }
     _isFull() {
       if (this._lineCount >= this._maxLines) {
@@ -14653,18 +14776,20 @@ void main() {
       this._shader.use();
       this._layout.use(true);
       this._shader.setUniformMatrix("u_matrix", this._context.ortho);
-      gl.drawArrays(gl.LINES, 0, this._lineCount * 2);
+      this._shader.setUniformBoolean("u_dashed", this._currentlyDashed);
+      gl.drawArrays(gl.TRIANGLES, 0, this._lineCount * 6);
       GraphicsDiagnostics.DrawnImagesCount += this._lineCount;
       GraphicsDiagnostics.DrawCallCount++;
       this._vertexIndex = 0;
       this._lineCount = 0;
+      this._lengthSoFar = 0;
     }
   }
   const pointVertexSource = "#version 300 es\nin vec2 a_position;\nin vec4 a_color;\nin float a_size;\nout lowp vec4 v_color;\nuniform mat4 u_matrix;\n\nvoid main() {\n  gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n  gl_PointSize = a_size * 2.0;\n  v_color = a_color;\n}";
   const pointFragmentSource = '#version 300 es\n\nprecision mediump float;\nin lowp vec4 v_color;\n\nout vec4 fragColor;\n\nvoid main() {\n  float r = 0.0, delta = 0.0, alpha = 1.0;\n  vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n  r = dot(cxy, cxy);\n\n  delta = fwidth(r);\n  alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);\n  // "premultiply" the color by alpha\n  vec4 color = v_color;\n  color.a = color.a * alpha;\n  color.rgb = color.rgb * color.a;\n  fragColor = color;\n}';
-  class PointRenderer {
+  class DebugPointRenderer {
     constructor() {
-      this.type = "ex.point";
+      this.type = "ex.debug-point";
       this.priority = 0;
       this._maxPoints = 10922;
       this._pointCount = 0;
@@ -14723,7 +14848,7 @@ void main() {
       vertexBuffer[this._vertexIndex++] = color.g / 255;
       vertexBuffer[this._vertexIndex++] = color.b / 255;
       vertexBuffer[this._vertexIndex++] = color.a * opacity;
-      vertexBuffer[this._vertexIndex++] = size * Math.max(transform.getScaleX(), transform.getScaleY());
+      vertexBuffer[this._vertexIndex++] = size;
     }
     _isFull() {
       if (this._pointCount >= this._maxPoints) {
@@ -14749,6 +14874,169 @@ void main() {
       this._vertexIndex = 0;
     }
   }
+  const frag$4 = "#version 300 es\nprecision highp float;\n\n// UV coord\nin vec2 v_uv;\n\n// Color coord to blend with image\nin lowp vec4 v_color;\n\n// Stroke color if used\nin lowp vec4 v_strokeColor;\n\n// Stroke thickness if used\nin lowp float v_strokeThickness;\n\nin float v_radius;\n\n// Opacity\nin float v_opacity;\n\nout vec4 fragColor;\n\nvoid main() {\n  // make (0, 0) the center the uv \n  vec2 uv = v_uv * 2.0 - 1.0;\n\n  vec4 color = v_color;\n  vec4 strokeColor = v_strokeColor;\n\n  float dist = 1.0 - length(uv);\n  float radius = dist * v_radius; // 0 is the edge\n\n  // Fade based on fwidth\n  float fade = fwidth(dot(uv, uv)) / 2.0;\n\n  float fill = smoothstep(-fade, fade, radius);\n\n  float stroke = \n    smoothstep(0.0, fade, radius) -\n    smoothstep(v_strokeThickness, v_strokeThickness + fade, radius);\n\n  strokeColor.a = stroke;\n  strokeColor.rgb *= strokeColor.a;\n\n  // vec4 finalColor = strokeColor;\n\n  color.a *= fill * (1.0 - stroke);\n  color.rgb *= color.a;\n\n  vec4 finalColor = mix(vec4(0.0), (color + strokeColor), fill);\n  finalColor.rgb = finalColor.rgb * v_opacity;\n  finalColor.a = finalColor.a * v_opacity;\n\n  fragColor = finalColor;\n}\n";
+  const vert$4 = "#version 300 es\nin vec2 a_position;\n\n// UV coordinate\nin vec2 a_uv;\nout vec2 v_uv;\n\n// Opacity \nin float a_opacity;\nout float v_opacity;\n\nin vec4 a_color;\nout vec4 v_color;\n\nin vec4 a_strokeColor;\nout vec4 v_strokeColor;\n\nin float a_strokeThickness;\nout float v_strokeThickness;\n\nin float a_radius;\nout float v_radius;\n\nuniform mat4 u_matrix;\n\n\nvoid main() {\n   // Set the vertex position using the ortho transform matrix\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n\n   // Pass through UV coords\n   v_uv = a_uv;\n   // Pass through the Opacity to the fragment shader\n   v_opacity = a_opacity;\n   // Pass through the color to the fragment shader\n   v_color = a_color;\n   // Pass through the stroke color to the fragment shader\n   v_strokeColor = a_strokeColor;\n   // Pass through the stroke thickenss to the fragment shader\n   v_strokeThickness = a_strokeThickness;\n   v_radius = a_radius;\n}\n";
+  class DebugCircleRenderer {
+    constructor() {
+      this.type = "ex.debug-circle";
+      this.priority = 0;
+      this._maxCircles = 10922;
+      this._circleCount = 0;
+      this._vertexIndex = 0;
+    }
+    initialize(gl, context) {
+      this._gl = gl;
+      this._context = context;
+      this._shader = new Shader({
+        graphicsContext: context,
+        fragmentSource: frag$4,
+        vertexSource: vert$4
+      });
+      this._shader.compile();
+      this._shader.use();
+      this._shader.setUniformMatrix("u_matrix", context.ortho);
+      this._buffer = new VertexBuffer({
+        gl,
+        size: 15 * 4 * this._maxCircles,
+        type: "dynamic"
+      });
+      this._layout = new VertexLayout({
+        gl,
+        shader: this._shader,
+        vertexBuffer: this._buffer,
+        attributes: [
+          ["a_position", 2],
+          ["a_uv", 2],
+          ["a_opacity", 1],
+          ["a_color", 4],
+          ["a_strokeColor", 4],
+          ["a_strokeThickness", 1],
+          ["a_radius", 1]
+        ]
+      });
+      this._quads = new QuadIndexBuffer(gl, this._maxCircles, true);
+    }
+    dispose() {
+      this._buffer.dispose();
+      this._quads.dispose();
+      this._shader.dispose();
+      this._context = null;
+      this._gl = null;
+    }
+    _isFull() {
+      if (this._circleCount >= this._maxCircles) {
+        return true;
+      }
+      return false;
+    }
+    draw(pos, radius, color, stroke = Color.Transparent, strokeThickness = 0) {
+      if (this._isFull()) {
+        this.flush();
+      }
+      this._circleCount++;
+      const transform = this._context.getTransform();
+      const scale = transform.getScaleX();
+      const opacity = this._context.opacity;
+      const snapToPixel = this._context.snapToPixel;
+      const topLeft = transform.multiply(pos.add(vec(-radius, -radius)));
+      const topRight = transform.multiply(pos.add(vec(radius, -radius)));
+      const bottomRight = transform.multiply(pos.add(vec(radius, radius)));
+      const bottomLeft = transform.multiply(pos.add(vec(-radius, radius)));
+      if (snapToPixel) {
+        topLeft.x = ~~(topLeft.x + pixelSnapEpsilon);
+        topLeft.y = ~~(topLeft.y + pixelSnapEpsilon);
+        topRight.x = ~~(topRight.x + pixelSnapEpsilon);
+        topRight.y = ~~(topRight.y + pixelSnapEpsilon);
+        bottomLeft.x = ~~(bottomLeft.x + pixelSnapEpsilon);
+        bottomLeft.y = ~~(bottomLeft.y + pixelSnapEpsilon);
+        bottomRight.x = ~~(bottomRight.x + pixelSnapEpsilon);
+        bottomRight.y = ~~(bottomRight.y + pixelSnapEpsilon);
+      }
+      const uvx0 = 0;
+      const uvy0 = 0;
+      const uvx1 = 1;
+      const uvy1 = 1;
+      const vertexBuffer = this._layout.vertexBuffer.bufferData;
+      vertexBuffer[this._vertexIndex++] = topLeft.x;
+      vertexBuffer[this._vertexIndex++] = topLeft.y;
+      vertexBuffer[this._vertexIndex++] = uvx0;
+      vertexBuffer[this._vertexIndex++] = uvy0;
+      vertexBuffer[this._vertexIndex++] = opacity;
+      vertexBuffer[this._vertexIndex++] = color.r / 255;
+      vertexBuffer[this._vertexIndex++] = color.g / 255;
+      vertexBuffer[this._vertexIndex++] = color.b / 255;
+      vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = stroke.r / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.g / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.b / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.a;
+      vertexBuffer[this._vertexIndex++] = strokeThickness;
+      vertexBuffer[this._vertexIndex++] = radius * scale;
+      vertexBuffer[this._vertexIndex++] = bottomLeft.x;
+      vertexBuffer[this._vertexIndex++] = bottomLeft.y;
+      vertexBuffer[this._vertexIndex++] = uvx0;
+      vertexBuffer[this._vertexIndex++] = uvy1;
+      vertexBuffer[this._vertexIndex++] = opacity;
+      vertexBuffer[this._vertexIndex++] = color.r / 255;
+      vertexBuffer[this._vertexIndex++] = color.g / 255;
+      vertexBuffer[this._vertexIndex++] = color.b / 255;
+      vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = stroke.r / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.g / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.b / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.a;
+      vertexBuffer[this._vertexIndex++] = strokeThickness;
+      vertexBuffer[this._vertexIndex++] = radius * scale;
+      vertexBuffer[this._vertexIndex++] = topRight.x;
+      vertexBuffer[this._vertexIndex++] = topRight.y;
+      vertexBuffer[this._vertexIndex++] = uvx1;
+      vertexBuffer[this._vertexIndex++] = uvy0;
+      vertexBuffer[this._vertexIndex++] = opacity;
+      vertexBuffer[this._vertexIndex++] = color.r / 255;
+      vertexBuffer[this._vertexIndex++] = color.g / 255;
+      vertexBuffer[this._vertexIndex++] = color.b / 255;
+      vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = stroke.r / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.g / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.b / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.a;
+      vertexBuffer[this._vertexIndex++] = strokeThickness;
+      vertexBuffer[this._vertexIndex++] = radius * scale;
+      vertexBuffer[this._vertexIndex++] = bottomRight.x;
+      vertexBuffer[this._vertexIndex++] = bottomRight.y;
+      vertexBuffer[this._vertexIndex++] = uvx1;
+      vertexBuffer[this._vertexIndex++] = uvy1;
+      vertexBuffer[this._vertexIndex++] = opacity;
+      vertexBuffer[this._vertexIndex++] = color.r / 255;
+      vertexBuffer[this._vertexIndex++] = color.g / 255;
+      vertexBuffer[this._vertexIndex++] = color.b / 255;
+      vertexBuffer[this._vertexIndex++] = color.a;
+      vertexBuffer[this._vertexIndex++] = stroke.r / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.g / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.b / 255;
+      vertexBuffer[this._vertexIndex++] = stroke.a;
+      vertexBuffer[this._vertexIndex++] = strokeThickness;
+      vertexBuffer[this._vertexIndex++] = radius * scale;
+    }
+    hasPendingDraws() {
+      return this._circleCount !== 0;
+    }
+    flush() {
+      if (this._circleCount === 0) {
+        return;
+      }
+      const gl = this._gl;
+      this._shader.use();
+      this._layout.use(true);
+      this._shader.setUniformMatrix("u_matrix", this._context.ortho);
+      this._quads.bind();
+      gl.drawElements(gl.TRIANGLES, this._circleCount * 6, this._quads.bufferGlType, 0);
+      GraphicsDiagnostics.DrawnImagesCount += this._circleCount;
+      GraphicsDiagnostics.DrawCallCount++;
+      this._circleCount = 0;
+      this._vertexIndex = 0;
+    }
+  }
   const screenVertex = "#version 300 es\nin vec2 a_position;\n\nin vec2 a_texcoord;\nout vec2 v_texcoord;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n\n  // Pass the texcoord to the fragment shader.\n  v_texcoord = a_texcoord;\n}";
   const screenFragment = "#version 300 es\nprecision mediump float;\n\n// Passed in from the vertex shader.\nin vec2 v_texcoord;\n\n// The texture.\nuniform sampler2D u_texture;\n\nout vec4 fragColor;\n\nvoid main() {\n   fragColor = texture(u_texture, v_texcoord);\n}";
   class ScreenPassPainter {
@@ -16060,7 +16348,9 @@ void main() {
       this._debugText = new DebugText();
     }
     /**
-     * Draw a debugging rectangle to the context
+     * Draw a debugging rectangle to the graphics context
+     *
+     * Debugging draws are independent of scale/zoom
      * @param x
      * @param y
      * @param width
@@ -16073,25 +16363,61 @@ void main() {
       this.drawLine(vec(x, y + height), vec(x, y), { ...rectOptions });
     }
     /**
-     * Draw a debugging line to the context
+     * Draw a debugging line to the graphics context
+     *
+     * Debugging draws are independent of scale/zoom
      * @param start
      * @param end
      * @param lineOptions
      */
     drawLine(start, end, lineOptions) {
       var _a;
-      this._webglCtx.draw("ex.line", start, end, (_a = lineOptions == null ? void 0 : lineOptions.color) != null ? _a : Color.Black);
+      this._webglCtx.save();
+      this._webglCtx.z = (lineOptions == null ? void 0 : lineOptions.dashed) ? Debug.config.settings.z.dashed : Debug.config.settings.z.solid;
+      this._webglCtx.draw(
+        "ex.debug-line",
+        start,
+        end,
+        (_a = lineOptions == null ? void 0 : lineOptions.color) != null ? _a : Color.Black,
+        lineOptions == null ? void 0 : lineOptions.lineWidth,
+        lineOptions == null ? void 0 : lineOptions.dashed
+      );
+      this._webglCtx.restore();
     }
     /**
-     * Draw a debugging point to the context
+     * Draw a debugging point to the graphics context
+     *
+     * Debugging draws are independent of scale/zoom
      * @param point
      * @param pointOptions
      */
     drawPoint(point2, pointOptions = { color: Color.Black, size: 5 }) {
-      this._webglCtx.draw("ex.point", point2, pointOptions.color, pointOptions.size);
+      this._webglCtx.save();
+      this._webglCtx.z = Debug.config.settings.z.point;
+      this._webglCtx.draw("ex.debug-point", point2, pointOptions.color, pointOptions.size);
+      this._webglCtx.restore();
+    }
+    /**
+     * Draw a debugging circle to the graphics context
+     *
+     * Debugging draws are independent of scale/zoom
+     */
+    drawCircle(pos, radius, color, stroke, thickness) {
+      this._webglCtx.save();
+      this._webglCtx.z = Debug.config.settings.z.solid;
+      this._webglCtx.draw("ex.debug-circle", pos, radius, color, stroke, thickness);
+      this._webglCtx.restore();
     }
+    /**
+     * Draw some debugging text to the graphics context
+     *
+     * Debugging draws are independent of scale/zoom
+     */
     drawText(text, pos) {
+      this._webglCtx.save();
+      this._webglCtx.z = Debug.config.settings.z.text;
       this._debugText.write(this._webglCtx, text, pos);
+      this._webglCtx.restore();
     }
   }
   class ExcaliburGraphicsContextWebGL {
@@ -16120,7 +16446,6 @@ void main() {
       this._disposed = false;
       this._imageToWidth = /* @__PURE__ */ new Map();
       this._imageToHeight = /* @__PURE__ */ new Map();
-      this.debug = new ExcaliburGraphicsContextWebGLDebug(this);
       this._totalPostProcessorTime = 0;
       const {
         canvasElement,
@@ -16246,8 +16571,9 @@ void main() {
       this.register(new MaterialRenderer());
       this.register(new RectangleRenderer());
       this.register(new CircleRenderer());
-      this.register(new PointRenderer());
-      this.register(new LineRenderer());
+      this.lazyRegister("ex.debug-circle", () => new DebugCircleRenderer());
+      this.lazyRegister("ex.debug-point", () => new DebugPointRenderer());
+      this.lazyRegister("ex.debug-line", () => new DebugLineRenderer());
       this.lazyRegister("ex.particle", () => new ParticleRenderer());
       this.register(
         new ImageRendererV2({
@@ -16295,6 +16621,7 @@ void main() {
         antialias: this.multiSampleAntialiasing,
         samples: this.samples
       });
+      this.debug = new ExcaliburGraphicsContextWebGLDebug(this);
     }
     register(renderer) {
       this._renderers.set(renderer.type, renderer);
@@ -21362,12 +21689,12 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
       return 1 + Math.max(this.topLeft.getTreeDepth(), this.topRight.getTreeDepth(), this.bottomLeft.getTreeDepth(), this.bottomRight.getTreeDepth());
     }
     debug(ctx) {
-      this.bounds.draw(ctx, Color.Yellow);
+      this.bounds.debug(ctx, { color: Color.Yellow });
       if (this._isDivided) {
-        this.topLeft.bounds.draw(ctx, Color.Yellow);
-        this.topRight.bounds.draw(ctx, Color.Yellow);
-        this.bottomLeft.bounds.draw(ctx, Color.Yellow);
-        this.bottomRight.bounds.draw(ctx, Color.Yellow);
+        this.topLeft.bounds.debug(ctx, { color: Color.Yellow });
+        this.topRight.bounds.debug(ctx, { color: Color.Yellow });
+        this.bottomLeft.bounds.debug(ctx, { color: Color.Yellow });
+        this.bottomRight.bounds.debug(ctx, { color: Color.Yellow });
       }
     }
   }
@@ -25260,7 +25587,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
         gfx.z = 999;
         if (showColliderBounds) {
           for (let i = 0; i < this.tiles.length; i++) {
-            this.tiles[i].bounds.draw(gfx);
+            this.tiles[i].bounds.debug(gfx);
           }
         }
         gfx.restore();
@@ -25797,17 +26124,17 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
         for (let y = 0; y < this.rows + 1; y++) {
           const left = this.tileToWorld(vec(0, y));
           const right = this.tileToWorld(vec(this.columns, y));
-          gfx.drawLine(left, right, gridColor, gridWidth);
+          gfx.debug.drawLine(left, right, { color: gridColor, lineWidth: gridWidth });
         }
         for (let x = 0; x < this.columns + 1; x++) {
           const top = this.tileToWorld(vec(x, 0));
           const bottom = this.tileToWorld(vec(x, this.rows));
-          gfx.drawLine(top, bottom, gridColor, gridWidth);
+          gfx.debug.drawLine(top, bottom, { color: gridColor, lineWidth: gridWidth });
         }
       }
       if (showAll || showPosition) {
         for (const tile of this.tiles) {
-          gfx.drawCircle(this.tileToWorld(vec(tile.x, tile.y)), positionSize, positionColor);
+          gfx.debug.drawCircle(this.tileToWorld(vec(tile.x, tile.y)), positionSize, positionColor);
         }
       }
       if (showAll || showColliderGeometry) {
@@ -26552,8 +26879,6 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
       let colliderComp;
       const colliderSettings = this._engine.debug.collider;
       const physicsSettings = this._engine.debug.physics;
-      let graphics;
-      const graphicsSettings = this._engine.debug.graphics;
       let debugDraw;
       let body;
       const bodySettings = this._engine.debug.body;
@@ -26588,7 +26913,6 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
         if (tx.coordPlane === CoordPlane.Screen) {
           this._graphicsContext.translate(this._engine.screen.contentArea.left, this._engine.screen.contentArea.top);
         }
-        this._graphicsContext.z = txSettings.debugZIndex;
         this._applyTransform(entity);
         if (tx) {
           if (txSettings.showAll || txSettings.showPosition) {
@@ -26624,13 +26948,6 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
             this._graphicsContext.drawLine(Vector.Zero, tx.scale.add(Vector.Zero), txSettings.scaleColor, 2);
           }
         }
-        graphics = entity.get(GraphicsComponent);
-        if (graphics) {
-          if (graphicsSettings.showAll || graphicsSettings.showBounds) {
-            const bounds = graphics.localBounds;
-            bounds.draw(this._graphicsContext, graphicsSettings.boundsColor);
-          }
-        }
         debugDraw = entity.get(DebugGraphicsComponent);
         if (debugDraw) {
           if (!debugDraw.useTransform) {
@@ -26670,7 +26987,6 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
         if (tx.coordPlane === CoordPlane.Screen) {
           this._graphicsContext.translate(this._engine.screen.contentArea.left, this._engine.screen.contentArea.top);
         }
-        this._graphicsContext.z = txSettings.debugZIndex;
         motion = entity.get(MotionComponent);
         if (motion) {
           if (motionSettings.showAll || motionSettings.showVelocity) {
@@ -26697,16 +27013,25 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
               for (const collider2 of colliders) {
                 const bounds = collider2.bounds;
                 const pos = vec(bounds.left, bounds.top);
-                this._graphicsContext.debug.drawRect(pos.x, pos.y, bounds.width, bounds.height, { color: colliderSettings.boundsColor });
+                this._graphicsContext.debug.drawRect(pos.x, pos.y, bounds.width, bounds.height, {
+                  color: colliderSettings.boundsColor,
+                  dashed: true
+                });
                 if (colliderSettings.showAll || colliderSettings.showOwner) {
                   this._graphicsContext.debug.drawText(`owner id(${collider2.owner.id})`, pos);
                 }
               }
-              colliderComp.bounds.draw(this._graphicsContext, colliderSettings.boundsColor);
+              colliderComp.bounds.debug(this._graphicsContext, {
+                color: colliderSettings.boundsColor,
+                dashed: true
+              });
             } else if (collider) {
               const bounds = colliderComp.bounds;
               const pos = vec(bounds.left, bounds.top);
-              this._graphicsContext.debug.drawRect(pos.x, pos.y, bounds.width, bounds.height, { color: colliderSettings.boundsColor });
+              this._graphicsContext.debug.drawRect(pos.x, pos.y, bounds.width, bounds.height, {
+                color: colliderSettings.boundsColor,
+                dashed: true
+              });
               if (colliderSettings.showAll || colliderSettings.showOwner) {
                 this._graphicsContext.debug.drawText(`owner id(${colliderComp.owner.id})`, pos);
               }
@@ -26745,14 +27070,13 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
         this._graphicsContext.save();
         this._camera.draw(this._graphicsContext);
         if (cameraSettings.showAll || cameraSettings.showFocus) {
-          this._graphicsContext.drawCircle(this._camera.pos, 4, cameraSettings.focusColor);
+          this._graphicsContext.debug.drawCircle(this._camera.pos, 4, cameraSettings.focusColor);
         }
         if (cameraSettings.showAll || cameraSettings.showZoom) {
           this._graphicsContext.debug.drawText(`zoom(${this._camera.zoom})`, this._camera.pos);
         }
         this._graphicsContext.restore();
       }
-      this._graphicsContext.flush();
     }
     postupdate(engine, elapsed) {
       if (this._engine.isDebug) {
@@ -26891,7 +27215,9 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
           const collider = colliders[i];
           const maybePointer = this._entityToPointer.get(collider.owner);
           if (maybePointer && (maybePointer.useColliderShape || this.overrideUseColliderShape)) {
-            this._pointerEventDispatcher.addPointerToObject(collider.owner, pointerId);
+            if (collider.contains(pos.worldPos)) {
+              this._pointerEventDispatcher.addPointerToObject(collider.owner, pointerId);
+            }
           }
         }
         const graphics = this._graphicsHashGrid.query(pos.worldPos);
@@ -28771,6 +29097,20 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
          */
         prevFrame: new FrameStats()
       };
+      this.settings = {
+        text: {
+          foreground: Color.Black,
+          background: Color.Transparent,
+          border: Color.Transparent
+        },
+        z: {
+          text: Number.POSITIVE_INFINITY,
+          point: Number.MAX_SAFE_INTEGER - 1,
+          ray: Number.MAX_SAFE_INTEGER - 1,
+          dashed: Number.MAX_SAFE_INTEGER - 2,
+          solid: Number.MAX_SAFE_INTEGER - 3
+        }
+      };
       this.filter = {
         /**
          * Toggle filter on or off (default off) must be on for DebugDraw to use filters
@@ -28792,7 +29132,6 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
       };
       this.transform = {
         showAll: false,
-        debugZIndex: 1e7,
         showPosition: false,
         showPositionLabel: false,
         positionColor: Color.Yellow,
@@ -28814,8 +29153,8 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
         showOwner: false,
         showGeometry: true,
         geometryColor: Color.Green,
-        geometryLineWidth: 1,
-        geometryPointSize: 0.5
+        geometryLineWidth: 2,
+        geometryPointSize: 2
       };
       this.physics = {
         showAll: false,
@@ -28823,7 +29162,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
         showCollisionNormals: false,
         collisionNormalColor: Color.Cyan,
         showCollisionContacts: true,
-        contactSize: 2,
+        contactSize: 10,
         collisionContactColor: Color.Red
       };
       this.motion = {
@@ -28869,6 +29208,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
       };
       this._engine = engine;
       this.colorBlindMode = new ColorBlindFlags(this._engine);
+      Debug.registerDebugConfig(this);
     }
     /**
      * Switch the current excalibur clock with the {@apilink TestClock} and return
@@ -30193,6 +30533,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
         this._suppressPlayButton = true;
       }
       this._logger = Logger.getInstance();
+      this.debug = new DebugConfig(this);
       if (this._logger.defaultLevel === LogLevel.Debug) {
         detector.logBrowserFeatures();
       }
@@ -30356,7 +30697,6 @@ Read more about this issue at https://excaliburjs.com/docs/performance`
         };
         mergeDeep(this.physics, options.physics);
       }
-      this.debug = new DebugConfig(this);
       this.director = new Director(this, options.scenes);
       this.director.events.pipe(this.events);
       this._initialize(options);
@@ -33102,7 +33442,7 @@ Read more about this issue at https://excaliburjs.com/docs/performance`
       this._count += count;
     }
   }
-  const EX_VERSION = "0.32.0-alpha.1570+3b683c5";
+  const EX_VERSION = "0.32.0-alpha.1572+72a3430";
   polyfill();
   exports2.ActionCompleteEvent = ActionCompleteEvent;
   exports2.ActionContext = ActionContext;