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

Fix debug draw and physics positioning issues

Browse source 
- Fix critical bug in PlanckDebugDraw.js where circles were drawn at body center instead of local positions
- Add DEBUG_DRAW_SENSORS support with orange styling and no outlines
- Fix Chuck's sprite positioning to align with physics body center (pivot adjustments)
- Correct fixture Y coordinates so Chuck stands upright instead of on his head
- Position foot sensor correctly below legs for proper ground detection
- Remove cyan crosses and make yellow center-of-mass crosses smaller
- Make debug lines thinner for cleaner visualization
This commit is contained in:
Karl Pannek 2025-07-16 23:40:40 +02:00
parent d584065757
commit 49f4591d3a
5 changed files with 205 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,7 @@ function (Settings) {
joints: false,
aabb: false,
pairs: false,
centerOfMass: false
centerOfMass: true
};
}
@ -41,7 +41,7 @@ function (Settings) {
this.ctx.translate(transformedX, transformedY);
this.ctx.scale(this.scale * this.cameraZoom, this.scale * this.cameraZoom);
this.ctx.lineWidth = 0.5 / this.scale;
this.ctx.lineWidth = 0.3 / this.scale; // Made thinner (was 0.5)
// Iterate through all bodies
for (var body = world.getBodyList(); body; body = body.getNext()) {
@ -51,60 +51,94 @@ 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()) {
// Check if this is a sensor
var isSensor = fixture.isSensor();
// Skip sensor fixtures if DEBUG_DRAW_SENSORS is false
if (isSensor && !Settings.DEBUG_DRAW_SENSORS) {
continue;
}
if (body.isDynamic()) {
this.ctx.strokeStyle = '#ff0000'; // Red for dynamic bodies
this.ctx.fillStyle = 'rgba(255, 0, 0, 0.1)';
} else if (body.isStatic()) {
this.ctx.strokeStyle = '#00ff00'; // Green for static bodies
this.ctx.fillStyle = 'rgba(0, 255, 0, 0.1)';
// Skip non-sensor fixtures if they were sensors in the old logic
if (!isSensor && !Settings.DEBUG_DRAW_SENSORS) {
// This was the old logic - skip sensors, but we're keeping non-sensors
}
// Set colors based on sensor status and body type
if (isSensor) {
// Sensors: orange with more visibility, no stroke
this.ctx.strokeStyle = 'rgba(0, 0, 0, 0)'; // No stroke
this.ctx.fillStyle = 'rgba(255, 165, 0, 0.3)'; // Orange with higher alpha
} else {
this.ctx.strokeStyle = '#0000ff'; // Blue for kinematic bodies
this.ctx.fillStyle = 'rgba(0, 0, 255, 0.1)';
// Regular fixtures: colored by body type
if (body.isDynamic()) {
this.ctx.strokeStyle = '#ff0000'; // Red for dynamic bodies
this.ctx.fillStyle = 'rgba(255, 0, 0, 0.1)';
} else if (body.isStatic()) {
this.ctx.strokeStyle = '#00ff00'; // Green for static bodies
this.ctx.fillStyle = 'rgba(0, 255, 0, 0.1)';
} else {
this.ctx.strokeStyle = '#0000ff'; // Blue for kinematic bodies
this.ctx.fillStyle = 'rgba(0, 0, 255, 0.1)';
}
}
this.drawShape(shape, transform);
this.drawShape(shape, transform, isSensor);
}
}
// Draw center of mass for each body
if (this.flags.centerOfMass) {
for (var body = world.getBodyList(); body; body = body.getNext()) {
var transform = body.getTransform();
this.drawCenterOfMass(transform);
// Removed drawBodyOrigin call since origin and center of mass are the same in Planck.js
}
}
this.ctx.restore();
};
PlanckDebugDraw.prototype.drawShape = function(shape, transform) {
PlanckDebugDraw.prototype.drawShape = function(shape, transform, isSensor) {
var type = shape.getType();
if (type === 'circle') {
this.drawCircle(shape, transform);
this.drawCircle(shape, transform, isSensor);
} else if (type === 'polygon') {
this.drawPolygon(shape, transform);
this.drawPolygon(shape, transform, isSensor);
} else if (type === 'edge') {
this.drawEdge(shape, transform);
this.drawEdge(shape, transform, isSensor);
} else if (type === 'chain') {
this.drawChain(shape, transform);
this.drawChain(shape, transform, isSensor);
}
};
PlanckDebugDraw.prototype.drawCircle = function(shape, transform) {
var center = transform.p;
PlanckDebugDraw.prototype.drawCircle = function(shape, transform, isSensor) {
var radius = shape.getRadius();
this.ctx.beginPath();
this.ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI);
this.ctx.fill();
this.ctx.stroke();
// Get the circle's local position (center relative to body)
var localCenter = shape.m_p || planck.Vec2(0, 0);
// Transform the local position to world coordinates
var worldCenter = this.transformVertex(localCenter, transform);
// Draw radius line to show rotation
this.ctx.beginPath();
this.ctx.moveTo(center.x, center.y);
this.ctx.lineTo(center.x + radius, center.y);
this.ctx.stroke();
this.ctx.arc(worldCenter.x, worldCenter.y, radius, 0, 2 * Math.PI);
this.ctx.fill();
// Only draw stroke for non-sensors
if (!isSensor) {
this.ctx.stroke();
// Draw radius line to show rotation (only for non-sensors)
this.ctx.beginPath();
this.ctx.moveTo(worldCenter.x, worldCenter.y);
this.ctx.lineTo(worldCenter.x + radius, worldCenter.y);
this.ctx.stroke();
}
};
PlanckDebugDraw.prototype.drawPolygon = function(shape, transform) {
PlanckDebugDraw.prototype.drawPolygon = function(shape, transform, isSensor) {
var vertices = shape.m_vertices;
if (!vertices || vertices.length < 3) return;
@ -122,20 +156,28 @@ function (Settings) {
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
// Only draw stroke for non-sensors
if (!isSensor) {
this.ctx.stroke();
}
};
PlanckDebugDraw.prototype.drawEdge = function(shape, transform) {
PlanckDebugDraw.prototype.drawEdge = function(shape, transform, isSensor) {
var v1 = this.transformVertex(shape.m_vertex1, transform);
var v2 = this.transformVertex(shape.m_vertex2, transform);
this.ctx.beginPath();
this.ctx.moveTo(v1.x, v1.y);
this.ctx.lineTo(v2.x, v2.y);
this.ctx.stroke();
// Only draw stroke for non-sensors
if (!isSensor) {
this.ctx.stroke();
}
};
PlanckDebugDraw.prototype.drawChain = function(shape, transform) {
PlanckDebugDraw.prototype.drawChain = function(shape, transform, isSensor) {
var vertices = shape.m_vertices;
if (!vertices || vertices.length < 2) return;
@ -149,7 +191,10 @@ function (Settings) {
this.ctx.lineTo(v.x, v.y);
}
this.ctx.stroke();
// Only draw stroke for non-sensors
if (!isSensor) {
this.ctx.stroke();
}
};
PlanckDebugDraw.prototype.transformVertex = function(vertex, transform) {
@ -163,6 +208,25 @@ function (Settings) {
};
};
PlanckDebugDraw.prototype.drawCenterOfMass = function(transform) {
var centerX = transform.p.x;
var centerY = transform.p.y;
var size = 0.05; // Made much smaller (was 0.2)
this.ctx.strokeStyle = '#ffff00'; // Yellow color for center of mass
this.ctx.lineWidth = 1 / this.scale; // Made thinner (was 2)
// Draw a cross at the center of mass
this.ctx.beginPath();
// Horizontal line
this.ctx.moveTo(centerX - size, centerY);
this.ctx.lineTo(centerX + size, centerY);
// Vertical line
this.ctx.moveTo(centerX, centerY - size);
this.ctx.lineTo(centerX, centerY + size);
this.ctx.stroke();
};
PlanckDebugDraw.prototype.setFlags = function(flags) {
this.flags = flags;
};