diff --git a/examples/index.js b/examples/index.js index 1894b72b..b4c3cf58 100644 --- a/examples/index.js +++ b/examples/index.js @@ -35,6 +35,7 @@ module.exports = { sprites: require('./sprites.js'), stack: require('./stack.js'), staticFriction: require('./staticFriction.js'), + stats: require('./stats.js'), stress: require('./stress.js'), stress2: require('./stress2.js'), svg: require('./svg.js'), diff --git a/examples/stats.js b/examples/stats.js new file mode 100644 index 00000000..862a69ec --- /dev/null +++ b/examples/stats.js @@ -0,0 +1,91 @@ +var Example = Example || {}; + +Example.stats = function() { + var Engine = Matter.Engine, + Render = Matter.Render, + Runner = Matter.Runner, + Common = Matter.Common, + Composites = Matter.Composites, + MouseConstraint = Matter.MouseConstraint, + Mouse = Matter.Mouse, + World = Matter.World, + Bodies = Matter.Bodies; + + // create engine + var engine = Engine.create(), + world = engine.world; + + // create renderer + var render = Render.create({ + element: document.body, + engine: engine, + options: { + width: 800, + height: 600, + // show stats and performance monitors + showStats: true, + showPerformance: true + } + }); + + Render.run(render); + + // create runner + var runner = Runner.create(); + Runner.run(runner, engine); + + // scene code + var stack = Composites.stack(70, 30, 13, 9, 5, 5, function(x, y) { + return Bodies.circle(x, y, 10 + Common.random() * 20); + }); + + World.add(world, [ + stack, + Bodies.rectangle(400, 0, 800, 50, { isStatic: true }), + Bodies.rectangle(400, 600, 800, 50, { isStatic: true }), + Bodies.rectangle(800, 300, 50, 600, { isStatic: true }), + Bodies.rectangle(0, 300, 50, 600, { isStatic: true }) + ]); + + // add mouse control + var mouse = Mouse.create(render.canvas), + mouseConstraint = MouseConstraint.create(engine, { + mouse: mouse, + constraint: { + stiffness: 0.2, + render: { + visible: false + } + } + }); + + World.add(world, mouseConstraint); + + // keep the mouse in sync with rendering + render.mouse = mouse; + + // fit the render viewport to the scene + Render.lookAt(render, { + min: { x: 0, y: 0 }, + max: { x: 800, y: 600 } + }); + + // context for MatterTools.Demo + return { + engine: engine, + runner: runner, + render: render, + canvas: render.canvas, + stop: function() { + Matter.Render.stop(render); + Matter.Runner.stop(runner); + } + }; +}; + +Example.stats.title = 'Stats & Performance'; +Example.stats.for = '>=0.16.1'; + +if (typeof module !== 'undefined') { + module.exports = Example.stats; +}