← Back to Portfolio

🐛 Debugging

Hit Box Visualization

Project Evidence Required

Draw / visualize collision boundaries to refine detection.

Assessment Method

Demo: Toggle hit box display, adjust collision rectangles

What it is

Hit box visualization means rendering the collision shape of every game object directly onto the canvas, usually as a colored outline overlay. It’s a debug-only mode toggled by a flag or keypress.

Why it matters

Collision bugs are often invisible until you can see the actual geometry. A sprite that looks fine might have a hit box that’s 2 pixels too wide, causing false collisions. Visualizing it makes the bug obvious.

How GateGame implements it

When gameEnv.debug is true, every entity’s draw() adds a ctx.strokeRect() call after its sprite. This outlines each hit box in red on top of the rendered sprite. The same technique reveals the spline barriers’ actual click-paths so you can see exactly where the maze walls sit.

Code Example

draw() {
  // Render the sprite as normal
  this.ctx.drawImage(this.spriteSheet, sx, sy, sw, sh,
    this.x, this.y, this.width, this.height);

  // Debug overlay: outline the hit box
  if (this.gameEnv.debug) {
    this.ctx.strokeStyle = 'red';
    this.ctx.lineWidth   = 2;
    this.ctx.strokeRect(this.x, this.y, this.width, this.height);
  }
}

Key Takeaway

If a collision bug isn’t obvious, draw the hit boxes. Most of the time the geometry tells you exactly what’s wrong.

---