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