mirror of
https://github.com/liabru/matter-js.git
synced 2024-11-27 09:50:52 -05:00
fix mobile demo, remove dev.html, fix debug info rendering
This commit is contained in:
liabru
parent
1e756d319e
commit
9d5c27afb8
10 changed files with 71 additions and 116 deletions
|
|
@ -60,7 +60,7 @@ module.exports = function(grunt) {
|
|||
watch: {
|
||||
options: {
|
||||
port: 9000,
|
||||
open: 'http://localhost:9000/demo/dev.html',
|
||||
open: 'http://localhost:9000/demo',
|
||||
livereload: 9001
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width,minimal-ui">
|
||||
<meta name="robots" content="noindex">
|
||||
|
||||
<!-- only required if using Bodies.fromVertices with concave vertices -->
|
||||
<script type="text/javascript" src="./js/lib/decomp.js"></script>
|
||||
|
||||
<!-- only required if using Matter.RenderPixi -->
|
||||
<script type="text/javascript" src="./js/lib/pixi.js"></script>
|
||||
|
||||
<!-- matter lib edge master version -->
|
||||
<script type="text/javascript" src="./js/lib/matter-dev.js"></script>
|
||||
|
||||
<!-- only required if using MatterTools -->
|
||||
<link rel="stylesheet" href="./js/lib/matter-tools/matter-tools.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/lib/matter-tools/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/matter-tools/gif/gif.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/matter-tools/matter-tools-dev.js"></script>
|
||||
|
||||
<!-- matter demo code -->
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/Examples.js"></script>
|
||||
<script type="text/javascript" src="./js/Demo.js"></script>
|
||||
|
||||
<title>Matter.js Demo (Dev. Build)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Matter.js Demo (Dev. Build)</h1>
|
||||
<p class="nav nav-links"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">·</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">·</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">·</span> <a href="http://twitter.com/liabru">@liabru</a></p>
|
||||
<div class="controls-container">
|
||||
<select id="demo-select">
|
||||
<option value="mixed">Mixed Shapes</option>
|
||||
<option value="mixedSolid">Solid Rendering</option>
|
||||
<option value="svg">Concave SVG Paths</option>
|
||||
<option value="terrain">Concave Terrain</option>
|
||||
<option value="concave">Concave Bodies</option>
|
||||
<option value="compound">Compound Bodies</option>
|
||||
<option value="newtonsCradle">Newton's Cradle</option>
|
||||
<option value="wreckingBall">Wrecking Ball</option>
|
||||
<option value="slingshot">Slingshot Game</option>
|
||||
<option value="rounded">Rounded Corners (Chamfering)</option>
|
||||
<option value="views">Views</option>
|
||||
<option value="timescale">Time Scaling</option>
|
||||
<option value="manipulation">Body Manipulation</option>
|
||||
<option value="compositeManipulation">Composite Manipulation</option>
|
||||
<option value="sprites">Sprites</option>
|
||||
<option value="pyramid">Pyramid</option>
|
||||
<option value="raycasting">Raycasting</option>
|
||||
<option value="car">Car</option>
|
||||
<option value="catapult">Catapult</option>
|
||||
<option value="gravity">Reverse Gravity</option>
|
||||
<option value="bridge">Bridge</option>
|
||||
<option value="avalanche">Avalanche</option>
|
||||
<option value="softBody">Basic Soft Bodies</option>
|
||||
<option value="cloth">Cloth</option>
|
||||
<option value="events">Events</option>
|
||||
<option value="collisionFiltering">Collision Filtering</option>
|
||||
<option value="chains">Chains</option>
|
||||
<option value="ballPool">Ball Pool</option>
|
||||
<option value="stack">Stack</option>
|
||||
<option value="circleStack">Circle Stack</option>
|
||||
<option value="compoundStack">Compound Stack</option>
|
||||
<option value="restitution">Restitution</option>
|
||||
<option value="friction">Friction</option>
|
||||
<option value="airFriction">Air Friction</option>
|
||||
<option value="staticFriction">Static Friction</option>
|
||||
<option value="sleeping">Sleeping</option>
|
||||
<option value="broadphase">Grid Broadphase</option>
|
||||
<option value="beachBalls">Beach Balls</option>
|
||||
<option value="stress">Stress 1</option>
|
||||
<option value="stress2">Stress 2</option>
|
||||
</select>
|
||||
<input id="demo-reset" value="Reset" type="submit">
|
||||
<div class="demo-view-source nav-links">
|
||||
<a id="demo-view-source" href="https://github.com/liabru/matter-js/blob/master/examples" target="_blank">view source</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="canvas-container"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,40 +3,51 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="viewport" content="width=device-width,minimal-ui">
|
||||
<meta name="robots" content="noindex">
|
||||
|
||||
<!-- only required if using Bodies.fromVertices with concave vertices -->
|
||||
<script type="text/javascript" src="./js/lib/decomp.js"></script>
|
||||
|
||||
<!-- only required if using Matter.RenderPixi -->
|
||||
<script type="text/javascript" src="./js/lib/pixi.js"></script>
|
||||
|
||||
<!-- matter lib v0.8.0 -->
|
||||
<script type="text/javascript" src="./js/lib/matter-0.8.0.js"></script>
|
||||
<!-- matter lib edge master version -->
|
||||
<script type="text/javascript" src="./js/lib/matter-dev.js"></script>
|
||||
|
||||
<!-- only required if using MatterTools -->
|
||||
<link rel="stylesheet" href="./js/lib/matter-tools/matter-tools.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/lib/matter-tools/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/matter-tools/gif/gif.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/matter-tools/matter-tools-dev.js"></script>
|
||||
|
||||
<!-- matter demo code -->
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/Examples.js"></script>
|
||||
<script type="text/javascript" src="./js/Demo.js"></script>
|
||||
|
||||
<title>Matter.js Physics Engine Demo</title>
|
||||
<title>Matter.js Demo (Edge Build)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Matter.js Physics Engine Demo</h1>
|
||||
<p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">·</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">·</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">·</span> <a href="http://twitter.com/liabru">@liabru</a></p>
|
||||
<h1>Matter.js Demo (Edge Build)</h1>
|
||||
<p class="nav nav-links"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">·</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">·</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">·</span> <a href="http://twitter.com/liabru">@liabru</a></p>
|
||||
<div class="controls-container">
|
||||
<select id="demo-select">
|
||||
<option value="mixed">Mixed Shapes</option>
|
||||
<option value="mixedSolid">Solid Rendering</option>
|
||||
<option value="svg">Concave SVG Paths</option>
|
||||
<option value="terrain">Concave Terrain</option>
|
||||
<option value="concave">Concave Bodies</option>
|
||||
<option value="compound">Compound Bodies</option>
|
||||
<option value="newtonsCradle">Newton's Cradle</option>
|
||||
<option value="wreckingBall">Wrecking Ball</option>
|
||||
<option value="slingshot">Slingshot Game</option>
|
||||
<option value="rounded">Rounded Corners (Chamfering)</option>
|
||||
<option value="views">Views</option>
|
||||
<option value="timescale">Time Scaling</option>
|
||||
<option value="manipulation">Body Manipulation</option>
|
||||
<option value="compositeManipulation">Composite Manipulation</option>
|
||||
<option value="sprites">Sprites</option>
|
||||
<option value="pyramid">Pyramid</option>
|
||||
<option value="raycasting">Raycasting</option>
|
||||
|
|
@ -48,13 +59,16 @@
|
|||
<option value="softBody">Basic Soft Bodies</option>
|
||||
<option value="cloth">Cloth</option>
|
||||
<option value="events">Events</option>
|
||||
<option value="collisionFiltering">Collision Filtering</option>
|
||||
<option value="chains">Chains</option>
|
||||
<option value="ballPool">Ball Pool</option>
|
||||
<option value="stack">Stack</option>
|
||||
<option value="circleStack">Circle Stack</option>
|
||||
<option value="compoundStack">Compound Stack</option>
|
||||
<option value="restitution">Restitution</option>
|
||||
<option value="friction">Friction</option>
|
||||
<option value="airFriction">Air Friction</option>
|
||||
<option value="staticFriction">Static Friction</option>
|
||||
<option value="sleeping">Sleeping</option>
|
||||
<option value="broadphase">Grid Broadphase</option>
|
||||
<option value="beachBalls">Beach Balls</option>
|
||||
|
|
@ -62,8 +76,11 @@
|
|||
<option value="stress2">Stress 2</option>
|
||||
</select>
|
||||
<input id="demo-reset" value="Reset" type="submit">
|
||||
<div class="demo-view-source nav-links">
|
||||
<a id="demo-view-source" href="https://github.com/liabru/matter-js/blob/master/examples" target="_blank">view source</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="canvas-container"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
/**
|
||||
* The Matter.js demo page controller and example runner.
|
||||
*
|
||||
* NOTE: For the actual example code, refer to the source files in `/examples/`.
|
||||
*
|
||||
* @class Demo
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
var _isBrowser = typeof window !== 'undefined' && window.location,
|
||||
|
|
@ -67,6 +75,9 @@
|
|||
// set up demo interface (see end of this file)
|
||||
Demo.initControls(demo);
|
||||
|
||||
// pass through runner as timing for debug rendering
|
||||
demo.engine.metrics.timing = demo.runner;
|
||||
|
||||
return demo;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,11 @@
|
|||
Demo.fullscreen();
|
||||
|
||||
setTimeout(function() {
|
||||
Engine.run(_engine);
|
||||
var runner = Engine.run(_engine);
|
||||
|
||||
// pass through runner as timing for debug rendering
|
||||
_engine.metrics.timing = runner;
|
||||
|
||||
Demo.updateScene();
|
||||
}, 800);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,24 +7,29 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="robots" content="noindex">
|
||||
<script type="text/javascript" src="./js/lib/matter-0.8.0.js"></script>
|
||||
<script type="text/javascript" src="./js/DemoMobile.js"></script>
|
||||
|
||||
<!-- matter lib edge master version -->
|
||||
<script type="text/javascript" src="./js/lib/matter-dev.js"></script>
|
||||
|
||||
<!-- matter demo code -->
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/DemoMobile.js"></script>
|
||||
|
||||
<title>Matter.js Physics Engine Mobile Demo</title>
|
||||
</head>
|
||||
<body class="mobile">
|
||||
<body class="mobile nav-links">
|
||||
<div class="container">
|
||||
<h1>Matter.js Mobile Demo</h1>
|
||||
<p>
|
||||
Open this page on your mobile device in Chrome or Safari
|
||||
<br><br>
|
||||
Touch and drag to interact with the blocks
|
||||
<br><br>
|
||||
Tilt and turn to master gravity like you're the boss of it
|
||||
</p>
|
||||
<p>
|
||||
Touch and drag to interact with the blocks
|
||||
<br>Tilt and turn to master gravity like you're the boss of it
|
||||
</p>
|
||||
<input id="demo-start" value="Start Demo" type="submit">
|
||||
<p>Or back to the <a href="index.html">full demo</a> page for more info.</p>
|
||||
<div id="canvas-container"></div>
|
||||
<input id="demo-start" value="Start Demo" type="submit">
|
||||
<p>Or back to the <a href="index.html">full demo</a> page for more info.</p>
|
||||
<div id="canvas-container"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -253,30 +253,31 @@ var Grid = require('../collision/Grid');
|
|||
var c = context,
|
||||
world = engine.world,
|
||||
render = engine.render,
|
||||
metrics = engine.metrics,
|
||||
options = render.options,
|
||||
bodies = Composite.allBodies(world),
|
||||
space = " ";
|
||||
|
||||
if (engine.timing.timestamp - (render.debugTimestamp || 0) >= 500) {
|
||||
var text = "";
|
||||
text += "fps: " + Math.round(engine.timing.fps) + space;
|
||||
text += "fps: " + Math.round(metrics.timing.fps) + space;
|
||||
|
||||
// @if DEBUG
|
||||
if (engine.metrics.extended) {
|
||||
text += "delta: " + engine.timing.delta.toFixed(3) + space;
|
||||
text += "correction: " + engine.timing.correction.toFixed(3) + space;
|
||||
if (metrics.extended) {
|
||||
text += "delta: " + metrics.timing.delta.toFixed(3) + space;
|
||||
text += "correction: " + metrics.timing.correction.toFixed(3) + space;
|
||||
text += "bodies: " + bodies.length + space;
|
||||
|
||||
if (engine.broadphase.controller === Grid)
|
||||
text += "buckets: " + engine.metrics.buckets + space;
|
||||
text += "buckets: " + metrics.buckets + space;
|
||||
|
||||
text += "\n";
|
||||
|
||||
text += "collisions: " + engine.metrics.collisions + space;
|
||||
text += "collisions: " + 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;
|
||||
text += "broad: " + metrics.broadEff + space;
|
||||
text += "mid: " + metrics.midEff + space;
|
||||
text += "narrow: " + metrics.narrowEff + space;
|
||||
}
|
||||
// @endif
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@ var RenderPixi = {};
|
|||
|
||||
module.exports = RenderPixi;
|
||||
|
||||
var Composite = require('../body/Composite');
|
||||
var Common = require('../core/Common');
|
||||
|
||||
(function() {
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ var system = require('system');
|
|||
|
||||
var demo,
|
||||
frames = 10,
|
||||
testUrl = 'http://localhost:8000/demo/dev.html',
|
||||
testUrl = 'http://localhost:8000/demo/index.html',
|
||||
refsPath = 'test/browser/refs',
|
||||
diffsPath = 'test/browser/diffs';
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ var getDemoNames = function() {
|
|||
'events', 'collisionFiltering', 'sleeping'
|
||||
];
|
||||
|
||||
$('#demo-select option', fs.readFileSync('demo/dev.html').toString())
|
||||
$('#demo-select option', fs.readFileSync('demo/index.html').toString())
|
||||
.each(function() {
|
||||
var name = $(this).val();
|
||||
if (skip.indexOf(name) === -1) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue