foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-12-26 13:49:01 -05:00
Code Issues Wiki Activity

bodies now have a 'render' object property

Browse source 
sprites implemented
backgrounds implemented
This commit is contained in:
liabru 2014-03-13 00:21:31 +00:00
parent a662bc1651
commit 433a1f9b4e
3 changed files with 90 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/body/Body.js
View file

@ -38,11 +38,14 @@ var Body = {};
restitution: 0, restitution: 0,
friction: 0.1, friction: 0.1,
frictionAir: 0.01, frictionAir: 0.01,
path: 'L 0 0 L 40 0 L 40 40 L 0 40',
fillStyle: options.isStatic ? '#eeeeee' : Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']),
lineWidth: 1.5,
groupId: 0, groupId: 0,
slop: 0.05 slop: 0.05,
render: {
visible: true,
sprite: null,
path: 'L 0 0 L 40 0 L 40 40 L 0 40',
lineWidth: 1.5
}
}; };
var body = Common.extend(defaults, options); var body = Common.extend(defaults, options);
@ -77,7 +80,7 @@ var Body = {};
*/ */
Body.updateProperties = function(body) { Body.updateProperties = function(body) {
// calculated properties // calculated properties
body.vertices = body.vertices || Vertices.fromPath(body.path); body.vertices = body.vertices || Vertices.fromPath(body.render.path);
body.axes = body.axes || Axes.fromVertices(body.vertices); body.axes = body.axes || Axes.fromVertices(body.vertices);
body.area = Vertices.area(body.vertices); body.area = Vertices.area(body.vertices);
body.bounds = Bounds.create(body.vertices); body.bounds = Bounds.create(body.vertices);
@ -87,7 +90,8 @@ var Body = {};
body.inverseInertia = 1 / body.inertia; body.inverseInertia = 1 / body.inertia;
body.positionPrev = body.positionPrev || { x: body.position.x, y: body.position.y }; body.positionPrev = body.positionPrev || { x: body.position.x, y: body.position.y };
body.anglePrev = body.anglePrev || body.angle; body.anglePrev = body.anglePrev || body.angle;
body.strokeStyle = body.strokeStyle || Common.shadeColor(body.fillStyle, -20); body.render.fillStyle = body.render.fillStyle || (body.isStatic ? '#eeeeee' : Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']));
body.render.strokeStyle = body.render.strokeStyle || Common.shadeColor(body.render.fillStyle, -20);
// update geometry // update geometry
Vertices.create(body.vertices, body); Vertices.create(body.vertices, body);
@ -103,7 +107,7 @@ var Body = {};
body.friction = 1; body.friction = 1;
body.mass = body.inertia = body.density = Infinity; body.mass = body.inertia = body.density = Infinity;
body.inverseMass = body.inverseInertia = 0; body.inverseMass = body.inverseInertia = 0;
body.lineWidth = 1; body.render.lineWidth = 1;
} }
Sleeping.set(body, body.isSleeping); Sleeping.set(body, body.isSleeping);

18
src/factory/Bodies.js
View file

@ -25,9 +25,11 @@ var Bodies = {};
options = options || {}; options = options || {};
var rectangle = { var rectangle = {
position: { x: x, y: y }, position: { x: x, y: y },
render: {
path: 'L 0 0 L ' + width + ' 0 L ' + width + ' ' + height + ' L 0 ' + height path: 'L 0 0 L ' + width + ' 0 L ' + width + ' ' + height + ' L 0 ' + height
}; }
};
return Body.create(Common.extend({}, rectangle, options)); return Body.create(Common.extend({}, rectangle, options));
}; };
@ -54,9 +56,11 @@ var Bodies = {};
x3 = x2 + x1; x3 = x2 + x1;
var trapezoid = { var trapezoid = {
position: { x: x, y: y }, position: { x: x, y: y },
render: {
path: 'L 0 0 L ' + x1 + ' ' + (-height) + ' L ' + x2 + ' ' + (-height) + ' L ' + x3 + ' 0' path: 'L 0 0 L ' + x1 + ' ' + (-height) + ' L ' + x2 + ' ' + (-height) + ' L ' + x3 + ' 0'
}; }
};
return Body.create(Common.extend({}, trapezoid, options)); return Body.create(Common.extend({}, trapezoid, options));
}; };
@ -118,9 +122,11 @@ var Bodies = {};
} }
var polygon = { var polygon = {
position: { x: x, y: y }, position: { x: x, y: y },
render: {
path: path path: path
}; }
};
return Body.create(Common.extend({}, polygon, options)); return Body.create(Common.extend({}, polygon, options));
}; };

99
src/render/Render.js
View file

@ -47,9 +47,25 @@ var Render = {};
render.canvas = render.canvas || _createCanvas(render.options.width, render.options.height); render.canvas = render.canvas || _createCanvas(render.options.width, render.options.height);
render.context = render.canvas.getContext('2d'); render.context = render.canvas.getContext('2d');
Render.setBackground(render, render.options.background);
return render; 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) {
render.canvas.style.background = background;
render.canvas.style.backgroundSize = "contain";
render.currentBackground = background;
}
};
/** /**
* Description * Description
* @method world * @method world
@ -64,12 +80,16 @@ var Render = {};
i; i;
if (options.wireframes) { if (options.wireframes) {
context.fillStyle = options.wireframeBackground; Render.setBackground(render, options.wireframeBackground);
} else { } else {
context.fillStyle = options.background; 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.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = 'source-over';
if (options.showShadows && !options.wireframes) if (options.showShadows && !options.wireframes)
for (i = 0; i < world.bodies.length; i++) for (i = 0; i < world.bodies.length; i++)
@ -242,34 +262,49 @@ var Render = {};
c.stroke(); c.stroke();
} }
// body polygon // draw body
if (body.circleRadius) { if (body.render.visible) {
c.beginPath(); if (body.render.sprite && !options.wireframes) {
c.arc(body.position.x, body.position.y, body.circleRadius, 0, 2 * Math.PI); // body sprite
c.closePath(); var sprite = body.render.sprite;
} else { c.save();
c.beginPath(); c.webkitImageSmoothingEnabled = true;
c.moveTo(body.vertices[0].x, body.vertices[0].y); c.translate(body.position.x, body.position.y);
for (var j = 1; j < body.vertices.length; j++) { c.rotate(body.angle);
c.lineTo(body.vertices[j].x, body.vertices[j].y); c.drawImage(sprite.image, sprite.width * -0.5 * sprite.xScale, sprite.height * -0.5 * sprite.yScale,
} sprite.width * sprite.xScale, sprite.height * sprite.yScale);
c.closePath(); c.restore();
} } else {
// body polygon
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();
}
if (!options.wireframes) { if (!options.wireframes) {
c.fillStyle = body.fillStyle; c.fillStyle = body.render.fillStyle;
if (options.showSleeping && body.isSleeping) if (options.showSleeping && body.isSleeping)
c.fillStyle = Common.shadeColor(body.fillStyle, 50); c.fillStyle = Common.shadeColor(body.render.fillStyle, 50);
c.lineWidth = body.lineWidth; c.lineWidth = body.render.lineWidth;
c.strokeStyle = body.strokeStyle; c.strokeStyle = body.render.strokeStyle;
c.fill(); c.fill();
c.stroke(); c.stroke();
} else { } else {
c.lineWidth = 1; c.lineWidth = 1;
c.strokeStyle = '#bbb'; c.strokeStyle = '#bbb';
if (options.showSleeping && body.isSleeping) if (options.showSleeping && body.isSleeping)
c.strokeStyle = 'rgba(255,255,255,0.2)'; c.strokeStyle = 'rgba(255,255,255,0.2)';
c.stroke(); c.stroke();
}
}
} }
// angle indicator // angle indicator
@ -282,7 +317,7 @@ var Render = {};
if (options.wireframes) { if (options.wireframes) {
c.strokeStyle = 'indianred'; c.strokeStyle = 'indianred';
} else { } else {
c.strokeStyle = body.strokeStyle; c.strokeStyle = body.render.strokeStyle;
} }
c.stroke(); c.stroke();
} }
@ -298,7 +333,7 @@ var Render = {};
if (options.wireframes) { if (options.wireframes) {
c.strokeStyle = 'indianred'; c.strokeStyle = 'indianred';
} else { } else {
c.strokeStyle = body.strokeStyle; c.strokeStyle = body.render.strokeStyle;
} }
c.stroke(); c.stroke();
} }