Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An implementation of the Box2D debug draw functionality for pixi.js
// Gets a JSDraw instance which renders to a PIXI graphics object.
// graphics: an instance of PIXI.Graphics
// scale: the scaling factor to convert from Box2D coordinates to screen pixels
function getPIXIDebugDraw(graphics, scale) {
function getColorFromDebugDrawCallback(color) {
var col = Box2D.wrapPointer(color, Box2D.b2Color);
var red = (col.get_r() * 255 * 255 * 255)|0;
var green = (col.get_g() * 255 * 255)|0;
var blue = (col.get_b() * 255)|0;
return red + green + blue;
}
function drawSegment(graphics, vert1, vert2, color) {
var vert1V = Box2D.wrapPointer(vert1, Box2D.b2Vec2);
var vert2V = Box2D.wrapPointer(vert2, Box2D.b2Vec2);
graphics.lineStyle(1, color, 1);
graphics.moveTo(vert1V.get_x() * scale, vert1V.get_y() * scale);
graphics.lineTo(vert2V.get_x() * scale, vert2V.get_y() * scale);
}
function drawPolygon(graphics, vertices, vertexCount, fill, color) {
graphics.lineStyle(1, color, 1);
if (fill) {
graphics.beginFill(color, 0.5);
}
for(tmpI=0;tmpI<vertexCount;tmpI++) {
var vert = Box2D.wrapPointer(vertices+(tmpI*8), Box2D.b2Vec2);
if ( tmpI === 0 )
graphics.moveTo(vert.get_x() * scale, vert.get_y() * scale);
else
graphics.lineTo(vert.get_x() * scale, vert.get_y() * scale);
}
if (fill) {
graphics.endFill();
}
}
function drawCircle(graphics, center, radius, axis, fill, color) {
var centerV = Box2D.wrapPointer(center, Box2D.b2Vec2);
var axisV = Box2D.wrapPointer(axis, Box2D.b2Vec2);
graphics.lineStyle(1, color, 1);
if (fill) {
graphics.beginFill(color, 0.5);
}
graphics.arc(centerV.get_x() * scale, centerV.get_y() * scale, radius * scale, 0, 2 * Math.PI, false);
if (fill) {
graphics.endFill();
}
if (fill) {
//render axis marker
var vert2V = new Box2D.b2Vec2(centerV.get_x(), centerV.get_y());
vert2V.op_add(new Box2D.b2Vec2(axisV.get_x() * radius, axisV.get_y() * radius));
graphics.moveTo(centerV.get_x() * scale, centerV.get_y() * scale);
graphics.lineTo(vert2V.get_x() * scale, vert2V.get_y() * scale);
}
}
function drawAxes(graphics, x, y, angle) {
var sin = Math.sin(angle);
var cos = Math.cos(angle);
var newX = x * scale;
var newY = y * scale;
function transform(x, y) { return { x: x * cos + y * sin, y: -x * sin + y * cos }; }
var origin = transform(newX, newY);
var xAxis = transform(newX + 100, newY);
var yAxis = transform(newX, newY + 100);
graphics.lineStyle(2, 'rgb(192,0,0)', 1);
graphics.moveTo(origin.x, origin.y);
graphics.lineTo(xAxis.x, xAxis.y);
graphics.lineStyle(2, 'rgb(0,192,0)', 1);
graphics.moveTo(origin.x, origin.y);
graphics.lineTo(yAxis.x, yAxis.y);
}
function drawTransform(transform) {
var trans = Box2D.wrapPointer(transform, Box2D.b2Transform);
var pos = trans.get_p();
var rot = trans.get_q();
drawAxes(graphics, pos.get_x(), pos.get_y(), rot.GetAngle());
}
var debugDraw = new Box2D.JSDraw();
debugDraw.DrawSegment = function(vert1, vert2, color) {
drawSegment(graphics, vert1, vert2, getColorFromDebugDrawCallback(color));
};
debugDraw.DrawPolygon = function(vertices, vertexCount, color) {
drawPolygon(graphics, vertices, vertexCount, false, getColorFromDebugDrawCallback(color));
};
debugDraw.DrawSolidPolygon = function(vertices, vertexCount, color) {
drawPolygon(graphics, vertices, vertexCount, true, getColorFromDebugDrawCallback(color));
};
debugDraw.DrawCircle = function(center, radius, color) {
drawCircle(graphics, center, radius, Box2D.b2Vec2(0,0), false, getColorFromDebugDrawCallback(color));
};
debugDraw.DrawSolidCircle = function(center, radius, axis, color) {
drawCircle(graphics, center, radius, axis, true, getColorFromDebugDrawCallback(color));
};
debugDraw.DrawTransform = function(transform) {
drawTransform(graphics, transform);
};
return debugDraw;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.