mirror of
https://github.com/liabru/matter-js.git
synced 2024-11-27 09:50:52 -05:00
715 lines
No EOL
21 KiB
JavaScript
715 lines
No EOL
21 KiB
JavaScript
/**
|
|
* See [Demo.js](https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js)
|
|
* and [DemoMobile.js](https://github.com/liabru/matter-js/blob/master/demo/js/DemoMobile.js) for usage examples.
|
|
*
|
|
* @class Render
|
|
*/
|
|
|
|
// TODO: viewports
|
|
// TODO: two.js, pixi.js
|
|
|
|
var Render = {};
|
|
|
|
(function() {
|
|
|
|
/**
|
|
* Description
|
|
* @method create
|
|
* @param {object} options
|
|
* @return {render} A new renderer
|
|
*/
|
|
Render.create = function(options) {
|
|
var defaults = {
|
|
controller: Render,
|
|
element: null,
|
|
canvas: null,
|
|
options: {
|
|
width: 800,
|
|
height: 600,
|
|
background: '#fafafa',
|
|
wireframeBackground: '#222',
|
|
enabled: true,
|
|
wireframes: true,
|
|
showSleeping: true,
|
|
showDebug: false,
|
|
showBroadphase: false,
|
|
showBounds: false,
|
|
showVelocity: false,
|
|
showCollisions: false,
|
|
showAxes: false,
|
|
showPositions: false,
|
|
showAngleIndicator: false,
|
|
showIds: false,
|
|
showShadows: false
|
|
}
|
|
};
|
|
|
|
var render = Common.extend(defaults, options);
|
|
|
|
render.canvas = render.canvas || _createCanvas(render.options.width, render.options.height);
|
|
render.context = render.canvas.getContext('2d');
|
|
render.textures = {};
|
|
|
|
Render.setBackground(render, render.options.background);
|
|
|
|
if (Common.isElement(render.element)) {
|
|
render.element.appendChild(render.canvas);
|
|
} else {
|
|
Common.log('No "render.element" passed, "render.canvas" was not inserted into document.', 'warn');
|
|
}
|
|
|
|
return render;
|
|
};
|
|
|
|
/**
|
|
* Sets the background CSS property of the canvas
|
|
* @method setBackground
|
|
* @param {render} render
|
|
* @param {string} background
|
|
*/
|
|
Render.setBackground = function(render, background) {
|
|
if (render.currentBackground !== background) {
|
|
var cssBackground = background;
|
|
|
|
if (/(jpg|gif|png)$/.test(background))
|
|
cssBackground = 'url(' + background + ')';
|
|
|
|
render.canvas.style.background = cssBackground;
|
|
render.canvas.style.backgroundSize = "contain";
|
|
render.currentBackground = background;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Description
|
|
* @method world
|
|
* @param {engine} engine
|
|
*/
|
|
Render.world = function(engine) {
|
|
var render = engine.render,
|
|
world = engine.world,
|
|
canvas = render.canvas,
|
|
context = render.context,
|
|
options = render.options,
|
|
i;
|
|
|
|
if (options.wireframes) {
|
|
Render.setBackground(render, options.wireframeBackground);
|
|
} else {
|
|
Render.setBackground(render, options.background);
|
|
}
|
|
|
|
// clear the canvas with a transparent fill, to allow the canvas background to show
|
|
context.globalCompositeOperation = 'source-in';
|
|
context.fillStyle = "transparent";
|
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
|
context.globalCompositeOperation = 'source-over';
|
|
|
|
/*if (options.showShadows && !options.wireframes)
|
|
Render.bodyShadows(engine, world.bodies, context);*/
|
|
|
|
if (!options.wireframes || (engine.enableSleeping && options.showSleeping)) {
|
|
// fully featured rendering of bodies
|
|
Render.bodies(engine, world.bodies, context);
|
|
} else {
|
|
// optimised method for wireframes only
|
|
Render.bodyWireframes(engine, world.bodies, context);
|
|
}
|
|
|
|
if (options.showBounds)
|
|
Render.bodyBounds(engine, world.bodies, context);
|
|
|
|
if (options.showAxes || options.showAngleIndicator)
|
|
Render.bodyAxes(engine, world.bodies, context);
|
|
|
|
if (options.showPositions)
|
|
Render.bodyPositions(engine, world.bodies, context);
|
|
|
|
if (options.showVelocity)
|
|
Render.bodyVelocity(engine, world.bodies, context);
|
|
|
|
if (options.showIds)
|
|
Render.bodyIds(engine, world.bodies, context);
|
|
|
|
if (options.showCollisions)
|
|
Render.collisions(engine, engine.pairs.list, context);
|
|
|
|
Render.constraints(world.constraints, context);
|
|
|
|
if (options.showBroadphase && engine.broadphase.current === 'grid')
|
|
Render.grid(engine, engine.broadphase[engine.broadphase.current].instance, context);
|
|
|
|
if (options.showDebug)
|
|
Render.debug(engine, context);
|
|
};
|
|
|
|
/**
|
|
* Description
|
|
* @method debug
|
|
* @param {engine} engine
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.debug = function(engine, context) {
|
|
var c = context,
|
|
world = engine.world,
|
|
render = engine.render,
|
|
options = render.options,
|
|
space = " ";
|
|
|
|
if (engine.timing.timestamp - (render.debugTimestamp || 0) >= 500) {
|
|
var text = "";
|
|
text += "fps: " + Math.round(engine.timing.fps) + space;
|
|
|
|
if (engine.metrics.extended) {
|
|
text += "delta: " + engine.timing.delta.toFixed(3) + space;
|
|
text += "correction: " + engine.timing.correction.toFixed(3) + space;
|
|
text += "bodies: " + world.bodies.length + space;
|
|
|
|
if (engine.broadphase.controller === Grid)
|
|
text += "buckets: " + engine.metrics.buckets + space;
|
|
|
|
text += "\n";
|
|
|
|
text += "collisions: " + engine.metrics.collisions + space;
|
|
text += "pairs: " + engine.pairs.list.length + space;
|
|
text += "broad: " + engine.metrics.broadEff + space;
|
|
text += "mid: " + engine.metrics.midEff + space;
|
|
text += "narrow: " + engine.metrics.narrowEff + space;
|
|
}
|
|
|
|
render.debugString = text;
|
|
render.debugTimestamp = engine.timing.timestamp;
|
|
}
|
|
|
|
if (render.debugString) {
|
|
c.font = "12px Arial";
|
|
|
|
if (options.wireframes) {
|
|
c.fillStyle = 'rgba(255,255,255,0.5)';
|
|
} else {
|
|
c.fillStyle = 'rgba(0,0,0,0.5)';
|
|
}
|
|
|
|
var split = render.debugString.split('\n');
|
|
|
|
for (var i = 0; i < split.length; i++) {
|
|
c.fillText(split[i], 50, 50 + i * 18);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Description
|
|
* @method constraints
|
|
* @param {constraint[]} constraints
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.constraints = function(constraints, context) {
|
|
var c = context;
|
|
|
|
for (var i = 0; i < constraints.length; i++) {
|
|
var constraint = constraints[i];
|
|
|
|
if (!constraint.render.visible || !constraint.pointA || !constraint.pointB)
|
|
continue;
|
|
|
|
var bodyA = constraint.bodyA,
|
|
bodyB = constraint.bodyB;
|
|
|
|
if (bodyA) {
|
|
c.beginPath();
|
|
c.moveTo(bodyA.position.x + constraint.pointA.x, bodyA.position.y + constraint.pointA.y);
|
|
} else {
|
|
c.beginPath();
|
|
c.moveTo(constraint.pointA.x, constraint.pointA.y);
|
|
}
|
|
|
|
if (bodyB) {
|
|
c.lineTo(bodyB.position.x + constraint.pointB.x, bodyB.position.y + constraint.pointB.y);
|
|
} else {
|
|
c.lineTo(constraint.pointB.x, constraint.pointB.y);
|
|
}
|
|
|
|
c.lineWidth = constraint.render.lineWidth;
|
|
c.strokeStyle = constraint.render.strokeStyle;
|
|
c.stroke();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Description
|
|
* @method bodyShadows
|
|
* @param {engine} engine
|
|
* @param {body[]} bodies
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.bodyShadows = function(engine, bodies, context) {
|
|
var c = context,
|
|
render = engine.render,
|
|
options = render.options;
|
|
|
|
for (var i = 0; i < bodies.length; i++) {
|
|
var body = bodies[i];
|
|
|
|
if (!body.render.visible)
|
|
continue;
|
|
|
|
if (body.circleRadius) {
|
|
c.beginPath();
|
|
c.arc(body.position.x, body.position.y, body.circleRadius, 0, 2 * Math.PI);
|
|
c.closePath();
|
|
} else {
|
|
c.beginPath();
|
|
c.moveTo(body.vertices[0].x, body.vertices[0].y);
|
|
for (var j = 1; j < body.vertices.length; j++) {
|
|
c.lineTo(body.vertices[j].x, body.vertices[j].y);
|
|
}
|
|
c.closePath();
|
|
}
|
|
|
|
var distanceX = body.position.x - render.options.width * 0.5,
|
|
distanceY = body.position.y - render.options.height * 0.2,
|
|
distance = Math.abs(distanceX) + Math.abs(distanceY);
|
|
|
|
c.shadowColor = 'rgba(0,0,0,0.15)';
|
|
c.shadowOffsetX = 0.05 * distanceX;
|
|
c.shadowOffsetY = 0.05 * distanceY;
|
|
c.shadowBlur = 1 + 12 * Math.min(1, distance / 1000);
|
|
|
|
c.fill();
|
|
|
|
c.shadowColor = null;
|
|
c.shadowOffsetX = null;
|
|
c.shadowOffsetY = null;
|
|
c.shadowBlur = null;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Description
|
|
* @method bodies
|
|
* @param {engine} engine
|
|
* @param {body[]} bodies
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.bodies = function(engine, bodies, context) {
|
|
var c = context,
|
|
render = engine.render,
|
|
options = render.options,
|
|
i;
|
|
|
|
for (i = 0; i < bodies.length; i++) {
|
|
var body = bodies[i];
|
|
|
|
if (!body.render.visible)
|
|
continue;
|
|
|
|
if (body.render.sprite && !options.wireframes) {
|
|
// body sprite
|
|
var sprite = body.render.sprite,
|
|
texture = _getTexture(render, sprite.texture);
|
|
|
|
if (options.showSleeping && body.isSleeping)
|
|
c.globalAlpha = 0.5;
|
|
|
|
c.translate(body.position.x, body.position.y);
|
|
c.rotate(body.angle);
|
|
|
|
c.drawImage(texture, texture.width * -0.5 * sprite.xScale, texture.height * -0.5 * sprite.yScale,
|
|
texture.width * sprite.xScale, texture.height * sprite.yScale);
|
|
|
|
// revert translation, hopefully faster than save / restore
|
|
c.rotate(-body.angle);
|
|
c.translate(-body.position.x, -body.position.y);
|
|
|
|
if (options.showSleeping && body.isSleeping)
|
|
c.globalAlpha = 1;
|
|
} else {
|
|
// body polygon
|
|
if (body.circleRadius) {
|
|
c.beginPath();
|
|
c.arc(body.position.x, body.position.y, body.circleRadius, 0, 2 * Math.PI);
|
|
} else {
|
|
c.beginPath();
|
|
c.moveTo(body.vertices[0].x, body.vertices[0].y);
|
|
for (var j = 1; j < body.vertices.length; j++) {
|
|
c.lineTo(body.vertices[j].x, body.vertices[j].y);
|
|
}
|
|
c.closePath();
|
|
}
|
|
|
|
if (!options.wireframes) {
|
|
if (options.showSleeping && body.isSleeping) {
|
|
c.fillStyle = Common.shadeColor(body.render.fillStyle, 50);
|
|
} else {
|
|
c.fillStyle = body.render.fillStyle;
|
|
}
|
|
|
|
c.lineWidth = body.render.lineWidth;
|
|
c.strokeStyle = body.render.strokeStyle;
|
|
c.fill();
|
|
c.stroke();
|
|
} else {
|
|
c.lineWidth = 1;
|
|
c.strokeStyle = '#bbb';
|
|
if (options.showSleeping && body.isSleeping)
|
|
c.strokeStyle = 'rgba(255,255,255,0.2)';
|
|
c.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* Optimised method for drawing body wireframes in one pass
|
|
* @method bodyWireframes
|
|
* @param {engine} engine
|
|
* @param {body[]} bodies
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.bodyWireframes = function(engine, bodies, context) {
|
|
var c = context,
|
|
i,
|
|
j;
|
|
|
|
c.beginPath();
|
|
|
|
for (i = 0; i < bodies.length; i++) {
|
|
var body = bodies[i];
|
|
|
|
if (!body.render.visible)
|
|
continue;
|
|
|
|
c.moveTo(body.vertices[0].x, body.vertices[0].y);
|
|
|
|
for (j = 1; j < body.vertices.length; j++) {
|
|
c.lineTo(body.vertices[j].x, body.vertices[j].y);
|
|
}
|
|
|
|
c.lineTo(body.vertices[0].x, body.vertices[0].y);
|
|
}
|
|
|
|
c.lineWidth = 1;
|
|
c.strokeStyle = '#bbb';
|
|
c.stroke();
|
|
};
|
|
|
|
/**
|
|
* Draws body bounds
|
|
* @method bodyBounds
|
|
* @param {engine} engine
|
|
* @param {body[]} bodies
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.bodyBounds = function(engine, bodies, context) {
|
|
var c = context,
|
|
render = engine.render,
|
|
options = render.options;
|
|
|
|
c.beginPath();
|
|
|
|
for (var i = 0; i < bodies.length; i++) {
|
|
var body = bodies[i];
|
|
|
|
if (body.render.visible)
|
|
c.rect(body.bounds.min.x, body.bounds.min.y, body.bounds.max.x - body.bounds.min.x, body.bounds.max.y - body.bounds.min.y);
|
|
}
|
|
|
|
if (options.wireframes) {
|
|
c.strokeStyle = 'rgba(255,255,255,0.08)';
|
|
} else {
|
|
c.strokeStyle = 'rgba(0,0,0,0.1)';
|
|
}
|
|
|
|
c.lineWidth = 1;
|
|
c.stroke();
|
|
};
|
|
|
|
/**
|
|
* Draws body angle indicators and axes
|
|
* @method bodyAxes
|
|
* @param {engine} engine
|
|
* @param {body[]} bodies
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.bodyAxes = function(engine, bodies, context) {
|
|
var c = context,
|
|
render = engine.render,
|
|
options = render.options,
|
|
i,
|
|
j;
|
|
|
|
c.beginPath();
|
|
|
|
for (i = 0; i < bodies.length; i++) {
|
|
var body = bodies[i];
|
|
|
|
if (!body.render.visible)
|
|
continue;
|
|
|
|
if (options.showAxes) {
|
|
// render all axes
|
|
for (j = 0; j < body.axes.length; j++) {
|
|
var axis = body.axes[j];
|
|
c.moveTo(body.position.x, body.position.y);
|
|
c.lineTo(body.position.x + axis.x * 20, body.position.y + axis.y * 20);
|
|
}
|
|
} else {
|
|
// render a single axis indicator
|
|
c.moveTo(body.position.x, body.position.y);
|
|
c.lineTo((body.vertices[0].x + body.vertices[body.vertices.length-1].x) / 2,
|
|
(body.vertices[0].y + body.vertices[body.vertices.length-1].y) / 2);
|
|
}
|
|
}
|
|
|
|
if (options.wireframes) {
|
|
c.strokeStyle = 'indianred';
|
|
} else {
|
|
c.strokeStyle = 'rgba(0,0,0,0.3)';
|
|
}
|
|
|
|
c.lineWidth = 1;
|
|
c.stroke();
|
|
};
|
|
|
|
/**
|
|
* Draws body positions
|
|
* @method bodyPositions
|
|
* @param {engine} engine
|
|
* @param {body[]} bodies
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.bodyPositions = function(engine, bodies, context) {
|
|
var c = context,
|
|
render = engine.render,
|
|
options = render.options,
|
|
body,
|
|
i;
|
|
|
|
c.beginPath();
|
|
|
|
// render current positions
|
|
for (i = 0; i < bodies.length; i++) {
|
|
body = bodies[i];
|
|
if (body.render.visible) {
|
|
c.arc(body.position.x, body.position.y, 3, 0, 2 * Math.PI, false);
|
|
c.closePath();
|
|
}
|
|
}
|
|
|
|
if (options.wireframes) {
|
|
c.fillStyle = 'indianred';
|
|
} else {
|
|
c.fillStyle = 'rgba(0,0,0,0.5)';
|
|
}
|
|
c.fill();
|
|
|
|
c.beginPath();
|
|
|
|
// render previous positions
|
|
for (i = 0; i < bodies.length; i++) {
|
|
body = bodies[i];
|
|
if (body.render.visible) {
|
|
c.arc(body.positionPrev.x, body.positionPrev.y, 2, 0, 2 * Math.PI, false);
|
|
c.closePath();
|
|
}
|
|
}
|
|
|
|
c.fillStyle = 'rgba(255,165,0,0.8)';
|
|
c.fill();
|
|
};
|
|
|
|
/**
|
|
* Draws body velocity
|
|
* @method bodyVelocity
|
|
* @param {engine} engine
|
|
* @param {body[]} bodies
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.bodyVelocity = function(engine, bodies, context) {
|
|
var c = context,
|
|
render = engine.render,
|
|
options = render.options;
|
|
|
|
c.beginPath();
|
|
|
|
for (var i = 0; i < bodies.length; i++) {
|
|
var body = bodies[i];
|
|
|
|
if (!body.render.visible)
|
|
continue;
|
|
|
|
c.moveTo(body.position.x, body.position.y);
|
|
c.lineTo(body.position.x + (body.position.x - body.positionPrev.x) * 2, body.position.y + (body.position.y - body.positionPrev.y) * 2);
|
|
}
|
|
|
|
c.lineWidth = 3;
|
|
c.strokeStyle = 'cornflowerblue';
|
|
c.stroke();
|
|
};
|
|
|
|
/**
|
|
* Draws body ids
|
|
* @method bodyIds
|
|
* @param {engine} engine
|
|
* @param {body[]} bodies
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.bodyIds = function(engine, bodies, context) {
|
|
var c = context;
|
|
|
|
for (var i = 0; i < bodies.length; i++) {
|
|
var body = bodies[i];
|
|
|
|
if (!body.render.visible)
|
|
continue;
|
|
|
|
c.font = "12px Arial";
|
|
c.fillStyle = 'rgba(255,255,255,0.5)';
|
|
c.fillText(body.id, body.position.x + 10, body.position.y - 10);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Description
|
|
* @method collisions
|
|
* @param {engine} engine
|
|
* @param {pair[]} pairs
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.collisions = function(engine, pairs, context) {
|
|
var c = context,
|
|
options = engine.render.options,
|
|
pair,
|
|
collision,
|
|
i,
|
|
j;
|
|
|
|
c.beginPath();
|
|
|
|
// render collision positions
|
|
for (i = 0; i < pairs.length; i++) {
|
|
pair = pairs[i];
|
|
collision = pair.collision;
|
|
for (j = 0; j < pair.activeContacts.length; j++) {
|
|
var contact = pair.activeContacts[j],
|
|
vertex = contact.vertex;
|
|
c.rect(vertex.x - 1.5, vertex.y - 1.5, 3.5, 3.5);
|
|
}
|
|
}
|
|
|
|
if (options.wireframes) {
|
|
c.fillStyle = 'rgba(255,255,255,0.7)';
|
|
} else {
|
|
c.fillStyle = 'orange';
|
|
}
|
|
c.fill();
|
|
|
|
c.beginPath();
|
|
|
|
// render collision normals
|
|
for (i = 0; i < pairs.length; i++) {
|
|
pair = pairs[i];
|
|
collision = pair.collision;
|
|
|
|
if (pair.activeContacts.length > 0) {
|
|
var normalPosX = pair.activeContacts[0].vertex.x,
|
|
normalPosY = pair.activeContacts[0].vertex.y;
|
|
|
|
if (pair.activeContacts.length === 2) {
|
|
normalPosX = (pair.activeContacts[0].vertex.x + pair.activeContacts[1].vertex.x) / 2;
|
|
normalPosY = (pair.activeContacts[0].vertex.y + pair.activeContacts[1].vertex.y) / 2;
|
|
}
|
|
|
|
c.moveTo(normalPosX - collision.normal.x * 8, normalPosY - collision.normal.y * 8);
|
|
c.lineTo(normalPosX, normalPosY);
|
|
}
|
|
}
|
|
|
|
if (options.wireframes) {
|
|
c.strokeStyle = 'rgba(255,165,0,0.7)';
|
|
} else {
|
|
c.strokeStyle = 'orange';
|
|
}
|
|
|
|
c.lineWidth = 1;
|
|
c.stroke();
|
|
};
|
|
|
|
/**
|
|
* Description
|
|
* @method grid
|
|
* @param {engine} engine
|
|
* @param {grid} grid
|
|
* @param {RenderingContext} context
|
|
*/
|
|
Render.grid = function(engine, grid, context) {
|
|
var c = context,
|
|
options = engine.render.options;
|
|
|
|
if (options.wireframes) {
|
|
c.strokeStyle = 'rgba(255,180,0,0.1)';
|
|
} else {
|
|
c.strokeStyle = 'rgba(255,180,0,0.5)';
|
|
}
|
|
|
|
c.beginPath();
|
|
|
|
var bucketKeys = Common.keys(grid.buckets);
|
|
|
|
for (var i = 0; i < bucketKeys.length; i++) {
|
|
var bucketId = bucketKeys[i];
|
|
|
|
if (grid.buckets[bucketId].length < 2)
|
|
continue;
|
|
|
|
var region = bucketId.split(',');
|
|
c.rect(0.5 + parseInt(region[0], 10) * grid.bucketWidth,
|
|
0.5 + parseInt(region[1], 10) * grid.bucketHeight,
|
|
grid.bucketWidth,
|
|
grid.bucketHeight);
|
|
}
|
|
|
|
c.lineWidth = 1;
|
|
c.stroke();
|
|
};
|
|
|
|
/**
|
|
* Description
|
|
* @method _createCanvas
|
|
* @private
|
|
* @param {} width
|
|
* @param {} height
|
|
* @return canvas
|
|
*/
|
|
var _createCanvas = function(width, height) {
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
canvas.oncontextmenu = function() { return false; };
|
|
canvas.onselectstart = function() { return false; };
|
|
return canvas;
|
|
};
|
|
|
|
/**
|
|
* Gets the requested texture (an Image) via its path
|
|
* @method _getTexture
|
|
* @private
|
|
* @param {render} render
|
|
* @param {string} imagePath
|
|
* @return {Image} texture
|
|
*/
|
|
var _getTexture = function(render, imagePath) {
|
|
var image = render.textures[imagePath];
|
|
|
|
if (image)
|
|
return image;
|
|
|
|
image = render.textures[imagePath] = new Image();
|
|
image.src = imagePath;
|
|
|
|
return image;
|
|
};
|
|
|
|
})(); |