mirror of
https://github.com/liabru/matter-js.git
synced 2024-12-23 13:19:01 -05:00
decouple Matter.Render from Matter.Engine
This commit is contained in:
parent
326816fcf7
commit
de823ebb08
34 changed files with 734 additions and 660 deletions
|
@ -33,7 +33,8 @@
|
|||
Events = Matter.Events,
|
||||
Mouse = Matter.Mouse,
|
||||
MouseConstraint = Matter.MouseConstraint,
|
||||
Runner = Matter.Runner;
|
||||
Runner = Matter.Runner,
|
||||
Render = Matter.Render;
|
||||
|
||||
// MatterTools aliases
|
||||
if (window.MatterTools) {
|
||||
|
@ -64,12 +65,24 @@
|
|||
// run the engine
|
||||
demo.runner = Engine.run(demo.engine);
|
||||
|
||||
// create a debug renderer
|
||||
demo.render = Render.create({
|
||||
element: demo.container,
|
||||
engine: demo.engine
|
||||
});
|
||||
|
||||
// run the renderer
|
||||
Render.run(demo.render);
|
||||
|
||||
// add a mouse controlled constraint
|
||||
demo.mouseConstraint = MouseConstraint.create(demo.engine);
|
||||
demo.mouseConstraint = MouseConstraint.create(demo.engine, {
|
||||
element: demo.render.canvas
|
||||
});
|
||||
|
||||
World.add(demo.engine.world, demo.mouseConstraint);
|
||||
|
||||
// pass mouse to renderer to enable showMousePosition
|
||||
demo.engine.render.mouse = demo.mouseConstraint.mouse;
|
||||
demo.render.mouse = demo.mouseConstraint.mouse;
|
||||
|
||||
// get the scene function name from hash
|
||||
if (window.location.hash.length !== 0)
|
||||
|
@ -108,23 +121,26 @@
|
|||
|
||||
// create a Matter.Gui
|
||||
if (!_isMobile && Gui) {
|
||||
demo.gui = Gui.create(demo.engine, demo.runner);
|
||||
demo.gui = Gui.create(demo.engine, demo.runner, demo.render);
|
||||
|
||||
// need to add mouse constraint back in after gui clear or load is pressed
|
||||
Events.on(demo.gui, 'clear load', function() {
|
||||
demo.mouseConstraint = MouseConstraint.create(demo.engine);
|
||||
demo.mouseConstraint = MouseConstraint.create(demo.engine, {
|
||||
element: demo.render.canvas
|
||||
});
|
||||
|
||||
World.add(demo.engine.world, demo.mouseConstraint);
|
||||
});
|
||||
|
||||
// need to rebind mouse on render change
|
||||
Events.on(demo.gui, 'setRenderer', function() {
|
||||
Mouse.setElement(demo.mouseConstraint.mouse, demo.engine.render.canvas);
|
||||
Mouse.setElement(demo.mouseConstraint.mouse, demo.render.canvas);
|
||||
});
|
||||
}
|
||||
|
||||
// create a Matter.Inspector
|
||||
if (!_isMobile && Inspector && _useInspector) {
|
||||
demo.inspector = Inspector.create(demo.engine, demo.runner);
|
||||
demo.inspector = Inspector.create(demo.engine, demo.runner, demo.render);
|
||||
|
||||
Events.on(demo.inspector, 'import', function() {
|
||||
demo.mouseConstraint = MouseConstraint.create(demo.engine);
|
||||
|
@ -150,7 +166,7 @@
|
|||
var body = document.body;
|
||||
|
||||
body.className += ' is-mobile';
|
||||
demo.engine.render.canvas.addEventListener('touchstart', Demo.fullscreen);
|
||||
demo.render.canvas.addEventListener('touchstart', Demo.fullscreen);
|
||||
|
||||
var fullscreenChange = function() {
|
||||
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
|
||||
|
@ -248,7 +264,7 @@
|
|||
};
|
||||
|
||||
Demo.fullscreen = function(demo) {
|
||||
var _fullscreenElement = demo.engine.render.canvas;
|
||||
var _fullscreenElement = demo.render.canvas;
|
||||
|
||||
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
|
||||
if (_fullscreenElement.requestFullscreen) {
|
||||
|
@ -269,10 +285,10 @@
|
|||
Engine.clear(demo.engine);
|
||||
|
||||
// clear scene graph (if defined in controller)
|
||||
if (demo.engine.render) {
|
||||
var renderController = demo.engine.render.controller;
|
||||
if (demo.render) {
|
||||
var renderController = demo.render.controller;
|
||||
if (renderController && renderController.clear)
|
||||
renderController.clear(demo.engine.render);
|
||||
renderController.clear(demo.render);
|
||||
}
|
||||
|
||||
// clear all scene events
|
||||
|
@ -296,9 +312,9 @@
|
|||
Events.off(demo.runner, demo.sceneEvents[i]);
|
||||
}
|
||||
|
||||
if (demo.engine.render && demo.engine.render.events) {
|
||||
if (demo.render && demo.render.events) {
|
||||
for (i = 0; i < demo.sceneEvents.length; i++)
|
||||
Events.off(demo.engine.render, demo.sceneEvents[i]);
|
||||
Events.off(demo.render, demo.sceneEvents[i]);
|
||||
}
|
||||
|
||||
demo.sceneEvents = [];
|
||||
|
@ -335,8 +351,8 @@
|
|||
World.add(world, demo.mouseConstraint);
|
||||
}
|
||||
|
||||
if (demo.engine.render) {
|
||||
var renderOptions = demo.engine.render.options;
|
||||
if (demo.render) {
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.wireframes = true;
|
||||
renderOptions.hasBounds = false;
|
||||
renderOptions.showDebug = false;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* matter-tools-dev.min.js 0.5.0-dev 2015-12-05
|
||||
* matter-tools-dev.min.js 0.5.0-dev 2016-04-24
|
||||
* https://github.com/liabru/matter-tools
|
||||
* License: MIT
|
||||
*/
|
||||
|
@ -10,7 +10,7 @@
|
|||
var Gui = {};
|
||||
(function() {
|
||||
var _isWebkit = "WebkitAppearance" in document.documentElement.style;
|
||||
Gui.create = function(engine, runner, options) {
|
||||
Gui.create = function(engine, runner, render, options) {
|
||||
var _datGuiSupported = window.dat && window.localStorage;
|
||||
if (!_datGuiSupported) {
|
||||
console.log("Could not create GUI. Check dat.gui library is loaded first.");
|
||||
|
@ -20,6 +20,7 @@
|
|||
var gui = {
|
||||
engine:engine,
|
||||
runner:runner,
|
||||
render:render,
|
||||
datGui:datGui,
|
||||
broadphase:"grid",
|
||||
broadphaseCache:{
|
||||
|
@ -116,7 +117,7 @@
|
|||
Events.trigger(gui, "load");
|
||||
},
|
||||
inspect:function() {
|
||||
if (!Inspector.instance) gui.inspector = Inspector.create(gui.engine, gui.runner);
|
||||
if (!Inspector.instance) gui.inspector = Inspector.create(gui.engine, gui.runner, gui.render);
|
||||
},
|
||||
recordGif:function() {
|
||||
if (!gui.isRecording) {
|
||||
|
@ -204,35 +205,35 @@
|
|||
render.add(gui, "renderer", [ "canvas", "webgl" ]).onFinishChange(function(value) {
|
||||
_setRenderer(gui, value);
|
||||
});
|
||||
render.add(engine.render.options, "wireframes");
|
||||
render.add(engine.render.options, "showDebug");
|
||||
render.add(engine.render.options, "showPositions");
|
||||
render.add(engine.render.options, "showBroadphase");
|
||||
render.add(engine.render.options, "showBounds");
|
||||
render.add(engine.render.options, "showVelocity");
|
||||
render.add(engine.render.options, "showCollisions");
|
||||
render.add(engine.render.options, "showSeparations");
|
||||
render.add(engine.render.options, "showAxes");
|
||||
render.add(engine.render.options, "showAngleIndicator");
|
||||
render.add(engine.render.options, "showSleeping");
|
||||
render.add(engine.render.options, "showIds");
|
||||
render.add(engine.render.options, "showVertexNumbers");
|
||||
render.add(engine.render.options, "showConvexHulls");
|
||||
render.add(engine.render.options, "showInternalEdges");
|
||||
render.add(engine.render.options, "enabled");
|
||||
render.add(gui.render.options, "wireframes");
|
||||
render.add(gui.render.options, "showDebug");
|
||||
render.add(gui.render.options, "showPositions");
|
||||
render.add(gui.render.options, "showBroadphase");
|
||||
render.add(gui.render.options, "showBounds");
|
||||
render.add(gui.render.options, "showVelocity");
|
||||
render.add(gui.render.options, "showCollisions");
|
||||
render.add(gui.render.options, "showSeparations");
|
||||
render.add(gui.render.options, "showAxes");
|
||||
render.add(gui.render.options, "showAngleIndicator");
|
||||
render.add(gui.render.options, "showSleeping");
|
||||
render.add(gui.render.options, "showIds");
|
||||
render.add(gui.render.options, "showVertexNumbers");
|
||||
render.add(gui.render.options, "showConvexHulls");
|
||||
render.add(gui.render.options, "showInternalEdges");
|
||||
render.add(gui.render.options, "enabled");
|
||||
render.open();
|
||||
};
|
||||
var _setRenderer = function(gui, rendererName) {
|
||||
var engine = gui.engine, controller;
|
||||
if (rendererName === "canvas") controller = Render;
|
||||
if (rendererName === "webgl") controller = RenderPixi;
|
||||
engine.render.element.removeChild(engine.render.canvas);
|
||||
var options = engine.render.options;
|
||||
engine.render = controller.create({
|
||||
element:engine.render.element,
|
||||
gui.render.element.removeChild(gui.render.canvas);
|
||||
var options = gui.render.options;
|
||||
gui.render = controller.create({
|
||||
element:gui.render.element,
|
||||
options:options
|
||||
});
|
||||
engine.render.options = options;
|
||||
gui.render = options;
|
||||
Events.trigger(gui, "setRenderer");
|
||||
};
|
||||
var _addBody = function(gui) {
|
||||
|
@ -257,8 +258,8 @@
|
|||
var engine = gui.engine;
|
||||
World.clear(engine.world, true);
|
||||
Engine.clear(engine);
|
||||
var renderController = engine.render.controller;
|
||||
if (renderController.clear) renderController.clear(engine.render);
|
||||
var renderController = gui.render.controller;
|
||||
if (renderController.clear) renderController.clear(gui.render);
|
||||
Events.trigger(gui, "clear");
|
||||
};
|
||||
var _initGif = function(gui) {
|
||||
|
@ -268,7 +269,7 @@
|
|||
var engine = gui.engine, skipFrame = false;
|
||||
Matter.Events.on(gui.runner, "beforeTick", function(event) {
|
||||
if (gui.isRecording && !skipFrame) {
|
||||
gui.gif.addFrame(engine.render.context, {
|
||||
gui.gif.addFrame(gui.render.context, {
|
||||
copy:true,
|
||||
delay:25
|
||||
});
|
||||
|
@ -280,14 +281,15 @@
|
|||
var Inspector = {};
|
||||
(function() {
|
||||
var _key, _isWebkit = "WebkitAppearance" in document.documentElement.style, $body;
|
||||
Inspector.create = function(engine, runner, options) {
|
||||
Inspector.create = function(engine, runner, render, options) {
|
||||
if (!jQuery || !$.fn.jstree || !window.key) {
|
||||
console.log("Could not create inspector. Check keymaster, jQuery, jsTree libraries are loaded first.");
|
||||
return;
|
||||
}
|
||||
var inspector = {
|
||||
engine:engine,
|
||||
runner:runner,
|
||||
engine:null,
|
||||
runner:null,
|
||||
render:null,
|
||||
isPaused:false,
|
||||
selected:[],
|
||||
selectStart:null,
|
||||
|
@ -317,7 +319,10 @@
|
|||
};
|
||||
inspector = Common.extend(inspector, options);
|
||||
Inspector.instance = inspector;
|
||||
inspector.mouse = Mouse.create(engine.render.canvas);
|
||||
inspector.engine = engine;
|
||||
inspector.runner = runner;
|
||||
inspector.render = render;
|
||||
inspector.mouse = Mouse.create(inspector.render.canvas);
|
||||
inspector.mouseConstraint = MouseConstraint.create(engine, {
|
||||
mouse:inspector.mouse
|
||||
});
|
||||
|
@ -670,8 +675,8 @@
|
|||
_updateSelectedMouseDownOffset(inspector);
|
||||
}
|
||||
});
|
||||
Events.on(inspector.engine.render, "afterRender", function() {
|
||||
var renderController = engine.render.controller, context = engine.render.context;
|
||||
Events.on(inspector.render, "afterRender", function() {
|
||||
var renderController = inspector.render.controller, context = inspector.render.context;
|
||||
if (renderController.inspector) renderController.inspector(inspector, context);
|
||||
});
|
||||
};
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -23,7 +23,7 @@ if (!_isBrowser) {
|
|||
Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 })
|
||||
]);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
renderOptions.showVelocity = true;
|
||||
};
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
World.add(world, stack);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showBroadphase = true;
|
||||
};
|
||||
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
|
||||
]);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = true;
|
||||
renderOptions.showCollisions = true;
|
||||
};
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
Constraint.create({ bodyA: catapult, pointB: { x: 410, y: 580 } })
|
||||
]);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showCollisions = true;
|
||||
renderOptions.showVelocity = true;
|
||||
renderOptions.showAngleIndicator = true;
|
||||
|
|
|
@ -88,7 +88,7 @@
|
|||
// red category objects should not be draggable with the mouse
|
||||
mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
renderOptions.background = '#222';
|
||||
renderOptions.showAngleIndicator = false;
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
})
|
||||
);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
renderOptions.showAxes = true;
|
||||
renderOptions.showCollisions = true;
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
World.add(world, [compoundBodyA, compoundBodyB, constraint]);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAxes = true;
|
||||
renderOptions.showPositions = true;
|
||||
renderOptions.showConvexHulls = true;
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
World.add(world, stack);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
};
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
metrics: { extended: true }
|
||||
};
|
||||
|
||||
return Engine.create(demo.container, options);
|
||||
return Engine.create(options);
|
||||
};
|
||||
|
||||
})();
|
|
@ -92,7 +92,7 @@
|
|||
Events.on(mouseConstraint, 'mousedown', function(event) {
|
||||
var mousePosition = event.mouse.position;
|
||||
console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
|
||||
engine.render.options.background = 'cornsilk';
|
||||
demo.render.options.background = 'cornsilk';
|
||||
shakeScene(engine);
|
||||
})
|
||||
|
||||
|
@ -103,7 +103,7 @@
|
|||
// an example of using mouse events on a mouse
|
||||
Events.on(mouseConstraint, 'mouseup', function(event) {
|
||||
var mousePosition = event.mouse.position;
|
||||
engine.render.options.background = "white";
|
||||
demo.render.options.background = "white";
|
||||
console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
|
||||
})
|
||||
|
||||
|
@ -135,7 +135,7 @@
|
|||
|
||||
World.add(world, stack);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
|
||||
var shakeScene = function(engine) {
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
|
||||
]);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
renderOptions.showVelocity = true;
|
||||
};
|
||||
|
|
|
@ -73,7 +73,7 @@
|
|||
})
|
||||
);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAxes = true;
|
||||
renderOptions.showCollisions = true;
|
||||
renderOptions.showPositions = true;
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
World.add(world, stack);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
};
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
World.add(world, cradle);
|
||||
Body.translate(cradle.bodies[0], { x: -140, y: -100 });
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showVelocity = true;
|
||||
};
|
||||
|
||||
|
|
|
@ -38,9 +38,9 @@
|
|||
World.add(world, [stack, concave]);
|
||||
|
||||
sceneEvents.push(
|
||||
Events.on(engine.render, 'afterRender', function() {
|
||||
Events.on(demo.render, 'afterRender', function() {
|
||||
var mouse = mouseConstraint.mouse,
|
||||
context = engine.render.context,
|
||||
context = demo.render.context,
|
||||
bodies = Composite.allBodies(engine.world),
|
||||
startPoint = { x: 400, y: 100 },
|
||||
endPoint = mouse.position;
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
Bodies.rectangle(100 + space * 5, 150, 180, 20, { restitution: rest, angle: -Math.PI * 0.5 })
|
||||
]);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showCollisions = true;
|
||||
renderOptions.showVelocity = true;
|
||||
renderOptions.showAngleIndicator = true;
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
})
|
||||
]);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAxes = true;
|
||||
renderOptions.showCollisions = true;
|
||||
};
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
})
|
||||
);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
renderOptions.background = '#222';
|
||||
renderOptions.showAngleIndicator = false;
|
||||
|
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.wireframes = false;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
renderOptions.background = './img/background.png';
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
Composites.softBody(250, 400, 4, 4, 0, 0, true, 15, particleOptions)
|
||||
]);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
};
|
||||
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
World.add(world, stack);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.background = './img/wall-bg.jpg';
|
||||
renderOptions.showAngleIndicator = false;
|
||||
renderOptions.wireframes = false;
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
})
|
||||
);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
renderOptions.showVelocity = true;
|
||||
};
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
World.add(world, stack);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
};
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
World.add(world, stack);
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
};
|
||||
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
}, true));
|
||||
});
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
};
|
||||
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
}));
|
||||
});
|
||||
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.showAngleIndicator = false;
|
||||
renderOptions.showVelocity = true;
|
||||
};
|
||||
|
|
|
@ -36,8 +36,8 @@
|
|||
|
||||
// get the centre of the viewport
|
||||
var viewportCentre = {
|
||||
x: engine.render.options.width * 0.5,
|
||||
y: engine.render.options.height * 0.5
|
||||
x: demo.render.options.width * 0.5,
|
||||
y: demo.render.options.height * 0.5
|
||||
};
|
||||
|
||||
// make the world bounds a little bigger than the render bounds
|
||||
|
@ -58,7 +58,7 @@
|
|||
Events.on(engine, 'beforeTick', function() {
|
||||
var world = engine.world,
|
||||
mouse = mouseConstraint.mouse,
|
||||
render = engine.render,
|
||||
render = demo.render,
|
||||
translate;
|
||||
|
||||
// mouse wheel controls zoom
|
||||
|
@ -128,7 +128,7 @@
|
|||
);
|
||||
|
||||
// must enable renderOptions.hasBounds for views to work
|
||||
var renderOptions = engine.render.options;
|
||||
var renderOptions = demo.render.options;
|
||||
renderOptions.hasBounds = true;
|
||||
};
|
||||
|
||||
|
|
|
@ -38,9 +38,11 @@ var Bounds = require('../geometry/Bounds');
|
|||
if (!mouse) {
|
||||
if (engine && engine.render && engine.render.canvas) {
|
||||
mouse = Mouse.create(engine.render.canvas);
|
||||
} else if (options && options.element) {
|
||||
mouse = Mouse.create(options.element);
|
||||
} else {
|
||||
mouse = Mouse.create();
|
||||
Common.log('MouseConstraint.create: options.mouse was undefined, engine.render.canvas was undefined, may not function as expected', 'warn');
|
||||
Common.log('MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected', 'warn');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -60,6 +62,7 @@ var Bounds = require('../geometry/Bounds');
|
|||
var defaults = {
|
||||
type: 'mouseConstraint',
|
||||
mouse: mouse,
|
||||
element: null,
|
||||
body: null,
|
||||
constraint: constraint,
|
||||
collisionFilter: {
|
||||
|
|
|
@ -32,7 +32,6 @@ var Body = require('../body/Body');
|
|||
* All properties have default values, and many are pre-calculated automatically based on other properties.
|
||||
* See the properties section below for detailed information on what you can pass via the `options` object.
|
||||
* @method create
|
||||
* @param {HTMLElement} [element]
|
||||
* @param {object} [options]
|
||||
* @return {engine} engine
|
||||
*/
|
||||
|
@ -40,9 +39,12 @@ var Body = require('../body/Body');
|
|||
// options may be passed as the first (and only) argument
|
||||
options = Common.isElement(element) ? options : element;
|
||||
element = Common.isElement(element) ? element : null;
|
||||
|
||||
options = options || {};
|
||||
|
||||
if (element || options.render) {
|
||||
Common.log('Engine.create: engine.render is deprecated (see docs)', 'warn');
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
positionIterations: 6,
|
||||
velocityIterations: 4,
|
||||
|
@ -60,6 +62,7 @@ var Body = require('../body/Body');
|
|||
|
||||
var engine = Common.extend(defaults, options);
|
||||
|
||||
// @deprecated
|
||||
if (element || engine.render) {
|
||||
var renderDefaults = {
|
||||
element: element,
|
||||
|
@ -69,10 +72,16 @@ var Body = require('../body/Body');
|
|||
engine.render = Common.extend(renderDefaults, engine.render);
|
||||
}
|
||||
|
||||
// @deprecated
|
||||
if (engine.render && engine.render.controller) {
|
||||
engine.render = engine.render.controller.create(engine.render);
|
||||
}
|
||||
|
||||
// @deprecated
|
||||
if (engine.render) {
|
||||
engine.render.engine = engine;
|
||||
}
|
||||
|
||||
engine.world = options.world || World.create(engine.world);
|
||||
engine.pairs = Pairs.create();
|
||||
engine.broadphase = engine.broadphase.controller.create(engine.broadphase);
|
||||
|
@ -454,6 +463,8 @@ var Body = require('../body/Body');
|
|||
*/
|
||||
|
||||
/**
|
||||
* __DEPRECATED__ see Demo.js for an example of creating a renderer.
|
||||
*
|
||||
* An instance of a `Render` controller. The default value is a `Matter.Render` instance created by `Engine.create`.
|
||||
* One may also develop a custom renderer module based on `Matter.Render` and pass an instance of it to `Engine.create` via `options.render`.
|
||||
*
|
||||
|
@ -462,6 +473,7 @@ var Body = require('../body/Body');
|
|||
*
|
||||
* @property render
|
||||
* @type render
|
||||
* @deprecated see Demo.js for an example of creating a renderer
|
||||
* @default a Matter.Render instance
|
||||
*/
|
||||
|
||||
|
|
|
@ -168,11 +168,12 @@ var Common = require('./Common');
|
|||
Events.trigger(runner, 'afterUpdate', event);
|
||||
|
||||
// render
|
||||
// @deprecated
|
||||
if (engine.render && engine.render.controller) {
|
||||
Events.trigger(runner, 'beforeRender', event);
|
||||
Events.trigger(engine, 'beforeRender', event); // @deprecated
|
||||
|
||||
engine.render.controller.world(engine);
|
||||
engine.render.controller.world(engine.render);
|
||||
|
||||
Events.trigger(runner, 'afterRender', event);
|
||||
Events.trigger(engine, 'afterRender', event); // @deprecated
|
||||
|
|
|
@ -23,6 +23,18 @@ var Vector = require('../geometry/Vector');
|
|||
|
||||
(function() {
|
||||
|
||||
var _requestAnimationFrame,
|
||||
_cancelAnimationFrame;
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
_requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame || window.msRequestAnimationFrame
|
||||
|| function(callback){ window.setTimeout(function() { callback(Common.now()); }, 1000 / 60); };
|
||||
|
||||
_cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
|
||||
|| window.webkitCancelAnimationFrame || window.msCancelAnimationFrame;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a new renderer. The options parameter is an object that specifies any properties you wish to override the defaults.
|
||||
* All properties have default values, and many are pre-calculated automatically based on other properties.
|
||||
|
@ -34,9 +46,11 @@ var Vector = require('../geometry/Vector');
|
|||
Render.create = function(options) {
|
||||
var defaults = {
|
||||
controller: Render,
|
||||
engine: null,
|
||||
element: null,
|
||||
canvas: null,
|
||||
mouse: null,
|
||||
frameRequestId: null,
|
||||
options: {
|
||||
width: 800,
|
||||
height: 600,
|
||||
|
@ -72,6 +86,8 @@ var Vector = require('../geometry/Vector');
|
|||
render.canvas.height = render.options.height || render.canvas.height;
|
||||
}
|
||||
|
||||
render.mouse = options.mouse;
|
||||
render.engine = options.engine;
|
||||
render.canvas = render.canvas || _createCanvas(render.options.width, render.options.height);
|
||||
render.context = render.canvas.getContext('2d');
|
||||
render.textures = {};
|
||||
|
@ -100,6 +116,27 @@ var Vector = require('../geometry/Vector');
|
|||
return render;
|
||||
};
|
||||
|
||||
/**
|
||||
* Continuously updates the render canvas on the `requestAnimationFrame` event.
|
||||
* @method run
|
||||
* @param {render} render
|
||||
*/
|
||||
Render.run = function(render) {
|
||||
(function loop(time){
|
||||
render.frameRequestId = _requestAnimationFrame(loop);
|
||||
Render.world(render);
|
||||
})();
|
||||
};
|
||||
|
||||
/**
|
||||
* Ends execution of `Render.run` on the given `render`, by canceling the animation frame request event loop.
|
||||
* @method stop
|
||||
* @param {render} render
|
||||
*/
|
||||
Render.stop = function(render) {
|
||||
_cancelAnimationFrame(render.frameRequestId);
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the pixel ratio of the renderer and updates the canvas.
|
||||
* To automatically detect the correct ratio, pass the string `'auto'` for `pixelRatio`.
|
||||
|
@ -128,10 +165,10 @@ var Vector = require('../geometry/Vector');
|
|||
* Renders the given `engine`'s `Matter.World` object.
|
||||
* This is the entry point for all rendering and should be called every time the scene changes.
|
||||
* @method world
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
*/
|
||||
Render.world = function(engine) {
|
||||
var render = engine.render,
|
||||
Render.world = function(render) {
|
||||
var engine = render.engine,
|
||||
world = engine.world,
|
||||
canvas = render.canvas,
|
||||
context = render.context,
|
||||
|
@ -201,49 +238,49 @@ var Vector = require('../geometry/Vector');
|
|||
|
||||
if (!options.wireframes || (engine.enableSleeping && options.showSleeping)) {
|
||||
// fully featured rendering of bodies
|
||||
Render.bodies(engine, bodies, context);
|
||||
Render.bodies(render, bodies, context);
|
||||
} else {
|
||||
if (options.showConvexHulls)
|
||||
Render.bodyConvexHulls(engine, bodies, context);
|
||||
Render.bodyConvexHulls(render, bodies, context);
|
||||
|
||||
// optimised method for wireframes only
|
||||
Render.bodyWireframes(engine, bodies, context);
|
||||
Render.bodyWireframes(render, bodies, context);
|
||||
}
|
||||
|
||||
if (options.showBounds)
|
||||
Render.bodyBounds(engine, bodies, context);
|
||||
Render.bodyBounds(render, bodies, context);
|
||||
|
||||
if (options.showAxes || options.showAngleIndicator)
|
||||
Render.bodyAxes(engine, bodies, context);
|
||||
Render.bodyAxes(render, bodies, context);
|
||||
|
||||
if (options.showPositions)
|
||||
Render.bodyPositions(engine, bodies, context);
|
||||
Render.bodyPositions(render, bodies, context);
|
||||
|
||||
if (options.showVelocity)
|
||||
Render.bodyVelocity(engine, bodies, context);
|
||||
Render.bodyVelocity(render, bodies, context);
|
||||
|
||||
if (options.showIds)
|
||||
Render.bodyIds(engine, bodies, context);
|
||||
Render.bodyIds(render, bodies, context);
|
||||
|
||||
if (options.showSeparations)
|
||||
Render.separations(engine, engine.pairs.list, context);
|
||||
Render.separations(render, engine.pairs.list, context);
|
||||
|
||||
if (options.showCollisions)
|
||||
Render.collisions(engine, engine.pairs.list, context);
|
||||
Render.collisions(render, engine.pairs.list, context);
|
||||
|
||||
if (options.showVertexNumbers)
|
||||
Render.vertexNumbers(engine, bodies, context);
|
||||
Render.vertexNumbers(render, bodies, context);
|
||||
|
||||
if (options.showMousePosition)
|
||||
Render.mousePosition(engine, render.mouse, context);
|
||||
Render.mousePosition(render, render.mouse, context);
|
||||
|
||||
Render.constraints(constraints, context);
|
||||
|
||||
if (options.showBroadphase && engine.broadphase.controller === Grid)
|
||||
Render.grid(engine, engine.broadphase, context);
|
||||
Render.grid(render, engine.broadphase, context);
|
||||
|
||||
if (options.showDebug)
|
||||
Render.debug(engine, context);
|
||||
Render.debug(render, context);
|
||||
|
||||
if (options.hasBounds) {
|
||||
// revert view transforms
|
||||
|
@ -257,13 +294,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Description
|
||||
* @private
|
||||
* @method debug
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.debug = function(engine, context) {
|
||||
Render.debug = function(render, context) {
|
||||
var c = context,
|
||||
engine = render.engine,
|
||||
world = engine.world,
|
||||
render = engine.render,
|
||||
metrics = engine.metrics,
|
||||
options = render.options,
|
||||
bodies = Composite.allBodies(world),
|
||||
|
@ -362,13 +399,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Description
|
||||
* @private
|
||||
* @method bodyShadows
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodyShadows = function(engine, bodies, context) {
|
||||
Render.bodyShadows = function(render, bodies, context) {
|
||||
var c = context,
|
||||
render = engine.render;
|
||||
engine = render.engine;
|
||||
|
||||
for (var i = 0; i < bodies.length; i++) {
|
||||
var body = bodies[i];
|
||||
|
@ -411,13 +448,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Description
|
||||
* @private
|
||||
* @method bodies
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodies = function(engine, bodies, context) {
|
||||
Render.bodies = function(render, bodies, context) {
|
||||
var c = context,
|
||||
render = engine.render,
|
||||
engine = render.engine,
|
||||
options = render.options,
|
||||
showInternalEdges = options.showInternalEdges || !options.wireframes,
|
||||
body,
|
||||
|
@ -510,13 +547,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Optimised method for drawing body wireframes in one pass
|
||||
* @private
|
||||
* @method bodyWireframes
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodyWireframes = function(engine, bodies, context) {
|
||||
Render.bodyWireframes = function(render, bodies, context) {
|
||||
var c = context,
|
||||
showInternalEdges = engine.render.options.showInternalEdges,
|
||||
showInternalEdges = render.options.showInternalEdges,
|
||||
body,
|
||||
part,
|
||||
i,
|
||||
|
@ -563,11 +600,11 @@ var Vector = require('../geometry/Vector');
|
|||
* Optimised method for drawing body convex hull wireframes in one pass
|
||||
* @private
|
||||
* @method bodyConvexHulls
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodyConvexHulls = function(engine, bodies, context) {
|
||||
Render.bodyConvexHulls = function(render, bodies, context) {
|
||||
var c = context,
|
||||
body,
|
||||
part,
|
||||
|
@ -602,11 +639,11 @@ var Vector = require('../geometry/Vector');
|
|||
* Renders body vertex numbers.
|
||||
* @private
|
||||
* @method vertexNumbers
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.vertexNumbers = function(engine, bodies, context) {
|
||||
Render.vertexNumbers = function(render, bodies, context) {
|
||||
var c = context,
|
||||
i,
|
||||
j,
|
||||
|
@ -628,11 +665,11 @@ var Vector = require('../geometry/Vector');
|
|||
* Renders mouse position.
|
||||
* @private
|
||||
* @method mousePosition
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {mouse} mouse
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.mousePosition = function(engine, mouse, context) {
|
||||
Render.mousePosition = function(render, mouse, context) {
|
||||
var c = context;
|
||||
c.fillStyle = 'rgba(255,255,255,0.8)';
|
||||
c.fillText(mouse.position.x + ' ' + mouse.position.y, mouse.position.x + 5, mouse.position.y - 5);
|
||||
|
@ -642,13 +679,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Draws body bounds
|
||||
* @private
|
||||
* @method bodyBounds
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodyBounds = function(engine, bodies, context) {
|
||||
Render.bodyBounds = function(render, bodies, context) {
|
||||
var c = context,
|
||||
render = engine.render,
|
||||
engine = render.engine,
|
||||
options = render.options;
|
||||
|
||||
c.beginPath();
|
||||
|
@ -679,13 +716,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Draws body angle indicators and axes
|
||||
* @private
|
||||
* @method bodyAxes
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodyAxes = function(engine, bodies, context) {
|
||||
Render.bodyAxes = function(render, bodies, context) {
|
||||
var c = context,
|
||||
render = engine.render,
|
||||
engine = render.engine,
|
||||
options = render.options,
|
||||
part,
|
||||
i,
|
||||
|
@ -740,13 +777,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Draws body positions
|
||||
* @private
|
||||
* @method bodyPositions
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodyPositions = function(engine, bodies, context) {
|
||||
Render.bodyPositions = function(render, bodies, context) {
|
||||
var c = context,
|
||||
render = engine.render,
|
||||
engine = render.engine,
|
||||
options = render.options,
|
||||
body,
|
||||
part,
|
||||
|
@ -796,11 +833,11 @@ var Vector = require('../geometry/Vector');
|
|||
* Draws body velocity
|
||||
* @private
|
||||
* @method bodyVelocity
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodyVelocity = function(engine, bodies, context) {
|
||||
Render.bodyVelocity = function(render, bodies, context) {
|
||||
var c = context;
|
||||
|
||||
c.beginPath();
|
||||
|
@ -824,11 +861,11 @@ var Vector = require('../geometry/Vector');
|
|||
* Draws body ids
|
||||
* @private
|
||||
* @method bodyIds
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {body[]} bodies
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.bodyIds = function(engine, bodies, context) {
|
||||
Render.bodyIds = function(render, bodies, context) {
|
||||
var c = context,
|
||||
i,
|
||||
j;
|
||||
|
@ -851,13 +888,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Description
|
||||
* @private
|
||||
* @method collisions
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {pair[]} pairs
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.collisions = function(engine, pairs, context) {
|
||||
Render.collisions = function(render, pairs, context) {
|
||||
var c = context,
|
||||
options = engine.render.options,
|
||||
options = render.options,
|
||||
pair,
|
||||
collision,
|
||||
corrected,
|
||||
|
@ -934,13 +971,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Description
|
||||
* @private
|
||||
* @method separations
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {pair[]} pairs
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.separations = function(engine, pairs, context) {
|
||||
Render.separations = function(render, pairs, context) {
|
||||
var c = context,
|
||||
options = engine.render.options,
|
||||
options = render.options,
|
||||
pair,
|
||||
collision,
|
||||
corrected,
|
||||
|
@ -991,13 +1028,13 @@ var Vector = require('../geometry/Vector');
|
|||
* Description
|
||||
* @private
|
||||
* @method grid
|
||||
* @param {engine} engine
|
||||
* @param {render} render
|
||||
* @param {grid} grid
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.grid = function(engine, grid, context) {
|
||||
Render.grid = function(render, grid, context) {
|
||||
var c = context,
|
||||
options = engine.render.options;
|
||||
options = render.options;
|
||||
|
||||
if (options.wireframes) {
|
||||
c.strokeStyle = 'rgba(255,180,0,0.1)';
|
||||
|
@ -1036,7 +1073,7 @@ var Vector = require('../geometry/Vector');
|
|||
Render.inspector = function(inspector, context) {
|
||||
var engine = inspector.engine,
|
||||
selected = inspector.selected,
|
||||
render = engine.render,
|
||||
render = inspector.render,
|
||||
options = render.options,
|
||||
bounds;
|
||||
|
||||
|
|
Loading…
Reference in a new issue