Refactor debug draw to use PIXI layer system only

- Removed separate canvas overlay system
- Integrated PlanckDebugDraw with PIXI.Graphics
- Debug draw now renders directly to debugLayer.graphics
- Simplified Engine.js by removing camera position methods
- All physics debug visualization now uses the layer system
- Cleaner, more integrated architecture
- Debug checkbox controls single PIXI layer visibility
This commit is contained in:
Karl Pannek 2025-07-18 23:08:32 +02:00
parent e784b27848
commit 925419d801
2 changed files with 69 additions and 142 deletions

View file

@ -29,77 +29,22 @@ function (Parent, Settings, domController, Box2D, nc, PlanckDebugDraw, debugLaye
this.setupDebugDraw();
}
// Show/hide the debug canvas overlay
if (this.debugCanvas) {
this.debugCanvas.style.display = this.debugMode ? 'block' : 'none';
}
debugLayer.container.visible = this.debugMode;
};
Engine.prototype.setupDebugDraw = function () {
// set debug draw for Planck.js
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.pointerEvents = 'none';
canvas.style.zIndex = '1000';
document.body.appendChild(canvas);
this.debugDraw = new PlanckDebugDraw(canvas);
this.debugCanvas = canvas;
// Use the PIXI debug layer instead of creating a canvas overlay
this.debugDraw = new PlanckDebugDraw(debugLayer.graphics);
};
Engine.prototype.renderDebug = function () {
if (this.debugDraw) {
if (this.debugDraw && this.debugMode) {
this.debugDraw.clear();
// Get camera position from the game view
var cameraPos = this.getCameraPosition();
var zoom = this.getCameraZoom();
// Apply camera transformations to debug draw
this.debugDraw.setTransform(cameraPos, zoom);
this.debugDraw.drawWorld(this.world);
}
};
Engine.prototype.getCameraPosition = function() {
// Get camera position from the view system
// This needs to match the layer positioning logic
if (this.gameController && this.gameController.view && this.gameController.view.layerManager) {
var layerManager = this.gameController.view.layerManager;
var tileLayer = layerManager.getLayerById('tile'); // Use tile layer as reference
if (tileLayer) {
return {
x: tileLayer.position.current.x,
y: tileLayer.position.current.y,
zoom: tileLayer.zoom.current
};
}
}
// Fallback to default position
return { x: 0, y: 0, zoom: 1 };
};
Engine.prototype.getCameraZoom = function() {
if (this.gameController && this.gameController.view && this.gameController.view.layerManager) {
var layerManager = this.gameController.view.layerManager;
var tileLayer = layerManager.getLayerById('tile');
if (tileLayer) {
return tileLayer.zoom.current;
}
}
return 1;
};
Engine.prototype.setGameController = function(gameController) {
this.gameController = gameController;