excalibur 0.32.0-alpha.1569 → 0.32.0-alpha.1571

package/build/esm/excalibur.development.js

@@ -1,4 +1,4 @@
-/*! excalibur - 0.32.0-alpha.1569+2be34eb - 2025-11-26
+/*! excalibur - 0.32.0-alpha.1571+1b94394 - 2025-11-26
 https://github.com/excaliburjs/Excalibur
 Copyright (c) 2025 Excalibur.js <https://github.com/excaliburjs/Excalibur/graphs/contributors>
 Licensed BSD-2-Clause
@@ -6404,13 +6404,22 @@ const _BoundingBox = class _BoundingBox2 {
     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];
@@ -6858,9 +6867,9 @@ class DynamicTree {
     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);
@@ -7794,7 +7803,7 @@ class CircleCollider extends Collider {
     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();
   }
 }
@@ -8560,9 +8569,9 @@ class EdgeCollider extends Collider {
   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 {
@@ -11296,11 +11305,118 @@ class SpriteSheet {
     });
   }
 }
-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() {
@@ -11309,17 +11425,23 @@ class DebugText {
       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
       });
     });
   }
@@ -11329,9 +11451,23 @@ class DebugText {
    * @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();
     }
   }
 }
@@ -11495,8 +11631,8 @@ class RenderTarget {
     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();
@@ -11791,6 +11927,7 @@ class GraphicsSystem extends System {
           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) {
@@ -11803,14 +11940,15 @@ class GraphicsSystem extends System {
                 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();
         }
       }
     }
@@ -12636,6 +12774,30 @@ class ExcaliburGraphicsContext2DCanvasDebug {
     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);
   }
@@ -12788,7 +12950,15 @@ class ExcaliburGraphicsContext2DCanvas {
     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()));
@@ -14482,101 +14652,17 @@ _Material.BuiltInUniforms = [
   "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;
@@ -14591,7 +14677,8 @@ class LineRenderer {
     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({
@@ -14600,7 +14687,8 @@ class LineRenderer {
       shader: this._shader,
       attributes: [
         ["a_position", 2],
-        ["a_color", 4]
+        ["a_color", 4],
+        ["a_lengthSoFar", 1]
       ]
     });
   }
@@ -14610,27 +14698,62 @@ class LineRenderer {
     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++] = 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++] = finalEnd.x;
-    vertexBuffer[this._vertexIndex++] = finalEnd.y;
+    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) {
@@ -14649,18 +14772,20 @@ class LineRenderer {
     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;
@@ -14719,7 +14844,7 @@ class PointRenderer {
     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) {
@@ -14745,6 +14870,169 @@ class PointRenderer {
     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 {
@@ -16056,7 +16344,9 @@ class ExcaliburGraphicsContextWebGLDebug {
     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
@@ -16069,25 +16359,61 @@ class ExcaliburGraphicsContextWebGLDebug {
     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 {
@@ -16116,7 +16442,6 @@ class ExcaliburGraphicsContextWebGL {
     this._disposed = false;
     this._imageToWidth = /* @__PURE__ */ new Map();
     this._imageToHeight = /* @__PURE__ */ new Map();
-    this.debug = new ExcaliburGraphicsContextWebGLDebug(this);
     this._totalPostProcessorTime = 0;
     const {
       canvasElement,
@@ -16242,8 +16567,9 @@ class ExcaliburGraphicsContextWebGL {
     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({
@@ -16291,6 +16617,7 @@ class ExcaliburGraphicsContextWebGL {
       antialias: this.multiSampleAntialiasing,
       samples: this.samples
     });
+    this.debug = new ExcaliburGraphicsContextWebGLDebug(this);
   }
   register(renderer) {
     this._renderers.set(renderer.type, renderer);
@@ -21358,12 +21685,12 @@ class QuadTree {
     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 });
     }
   }
 }
@@ -25256,7 +25583,7 @@ class TileMap extends Entity {
       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();
@@ -25793,17 +26120,17 @@ class IsometricMap extends Entity {
       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) {
@@ -26548,8 +26875,6 @@ class DebugSystem extends System {
     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;
@@ -26584,7 +26909,6 @@ class DebugSystem extends System {
       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) {
@@ -26620,13 +26944,6 @@ class DebugSystem extends System {
           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) {
@@ -26666,7 +26983,6 @@ class DebugSystem extends System {
       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) {
@@ -26693,16 +27009,25 @@ class DebugSystem extends System {
             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);
             }
@@ -26741,14 +27066,13 @@ class DebugSystem extends System {
       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) {
@@ -28767,6 +29091,20 @@ class DebugConfig {
        */
       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
@@ -28788,7 +29126,6 @@ class DebugConfig {
     };
     this.transform = {
       showAll: false,
-      debugZIndex: 1e7,
       showPosition: false,
       showPositionLabel: false,
       positionColor: Color.Yellow,
@@ -28810,8 +29147,8 @@ class DebugConfig {
       showOwner: false,
       showGeometry: true,
       geometryColor: Color.Green,
-      geometryLineWidth: 1,
-      geometryPointSize: 0.5
+      geometryLineWidth: 2,
+      geometryPointSize: 2
     };
     this.physics = {
       showAll: false,
@@ -28819,7 +29156,7 @@ class DebugConfig {
       showCollisionNormals: false,
       collisionNormalColor: Color.Cyan,
       showCollisionContacts: true,
-      contactSize: 2,
+      contactSize: 10,
       collisionContactColor: Color.Red
     };
     this.motion = {
@@ -28865,6 +29202,7 @@ class DebugConfig {
     };
     this._engine = engine;
     this.colorBlindMode = new ColorBlindFlags(this._engine);
+    Debug.registerDebugConfig(this);
   }
   /**
    * Switch the current excalibur clock with the {@apilink TestClock} and return
@@ -30189,6 +30527,7 @@ const _Engine = class _Engine2 {
       this._suppressPlayButton = true;
     }
     this._logger = Logger.getInstance();
+    this.debug = new DebugConfig(this);
     if (this._logger.defaultLevel === LogLevel.Debug) {
       detector.logBrowserFeatures();
     }
@@ -30352,7 +30691,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);
@@ -33098,7 +33436,7 @@ class Semaphore {
     this._count += count;
   }
 }
-const EX_VERSION = "0.32.0-alpha.1569+2be34eb";
+const EX_VERSION = "0.32.0-alpha.1571+1b94394";
 polyfill();
 export {
   ActionCompleteEvent,