jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix Planck debug draw: add camera sync and hide sensors like Box2D

Browse source
This commit is contained in:
Karl Pannek 2025-07-16 21:15:37 +02:00
parent 955179eec9
commit d584065757
6 changed files with 109 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/Game/Client/GameController.js
View file

@ -32,6 +32,11 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, nc, reque
Parent.call(this, options);
// Set reference to this GameController in the physics engine for camera access
if (this.physicsEngine && this.physicsEngine.setGameController) {
this.physicsEngine.setGameController(this);
}
this.ncTokens = this.ncTokens.concat([
nc.on(nc.ns.client.game.gameStats.toggle, this.toggleGameStats, this)
]);

48
app/Game/Client/Physics/Engine.js
View file

@ -52,15 +52,59 @@ function (Parent, Settings, domController, Box2D, nc, PlanckDebugDraw, debugLaye
Engine.prototype.renderDebug = function () {
if (this.debugDraw) {
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;
};
Engine.prototype.update = function () {
Parent.prototype.update.call(this);
if(this.debugMode) {
this.world.DrawDebugData();
if(this.debugMode && this.debugDraw) {
this.debugDraw.drawWorld(this.world);
}
};

22
app/Game/Client/View/Pixi/PlanckDebugDraw.js
View file

@ -10,6 +10,8 @@ function (Settings) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.scale = Settings.RATIO;
this.cameraPos = { x: 0, y: 0 };
this.cameraZoom = 1;
this.flags = {
shapes: true,
joints: false,
@ -23,12 +25,23 @@ function (Settings) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
};
PlanckDebugDraw.prototype.setTransform = function(cameraPos, zoom) {
this.cameraPos = cameraPos;
this.cameraZoom = zoom || 1;
};
PlanckDebugDraw.prototype.drawWorld = function(world) {
if (!this.flags.shapes) return;
this.ctx.save();
this.ctx.scale(this.scale, this.scale);
this.ctx.lineWidth = 1 / this.scale;
// Apply camera transformations like the game layers do
var transformedX = this.cameraPos.x * this.cameraZoom + Settings.STAGE_WIDTH / 2;
var transformedY = this.cameraPos.y * this.cameraZoom + Settings.STAGE_HEIGHT / 2;
this.ctx.translate(transformedX, transformedY);
this.ctx.scale(this.scale * this.cameraZoom, this.scale * this.cameraZoom);
this.ctx.lineWidth = 0.5 / this.scale;
// Iterate through all bodies
for (var body = world.getBodyList(); body; body = body.getNext()) {
@ -38,6 +51,11 @@ function (Settings) {
for (var fixture = body.getFixtureList(); fixture; fixture = fixture.getNext()) {
var shape = fixture.getShape();
// Skip sensor fixtures to match old Box2D behavior
if (fixture.isSensor()) {
continue;
}
if (body.isDynamic()) {
this.ctx.strokeStyle = '#ff0000'; // Red for dynamic bodies
this.ctx.fillStyle = 'rgba(255, 0, 0, 0.1)';