foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-11-23 09:26:51 -05:00
Code Issues Wiki Activity

updated demo

Browse source
This commit is contained in:
liabru 2014-03-20 15:05:42 +00:00
parent 3359c1a340
commit 1a152309a0
4 changed files with 14389 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
demo/css/style.css
View file

@ -35,7 +35,22 @@ a, a:link, a:visited, a:active, a:hover {
.container { .container {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 6% 300px 6% 6%; padding: 6% 300px 0 6%;
}
.is-mobile .container {
padding: 6% 6% 0 6%;
}
.is-fullscreen #canvas-container {
width: 100%;
height: 100%;
}
.is-fullscreen #canvas-container canvas {
margin: 0;
max-width: 100%;
max-height: 100%;
} }
.mobile .container { .mobile .container {

6
demo/dev.html
View file

@ -3,7 +3,9 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <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"> <meta name="robots" content="noindex">
<script type="text/javascript" src="./js/lib/pixi.dev.js"></script>
<script type="text/javascript" src="./js/lib/dat.gui.min.js"></script> <script type="text/javascript" src="./js/lib/dat.gui.min.js"></script>
<script type="text/javascript" src="./js/lib/resurrect.js"></script> <script type="text/javascript" src="./js/lib/resurrect.js"></script>
<script type="text/javascript" src="./js/lib/matter-dev.js"></script> <script type="text/javascript" src="./js/lib/matter-dev.js"></script>
@ -24,6 +26,8 @@
<option value="pyramid">Pyramid</option> <option value="pyramid">Pyramid</option>
<option value="car">Car</option> <option value="car">Car</option>
<option value="newtonsCradle">Newton's Cradle</option> <option value="newtonsCradle">Newton's Cradle</option>
<option value="wreckingBall">Wrecking Ball</option>
<option value="avalanche">Avalanche</option>
<option value="restitution">Restitution</option> <option value="restitution">Restitution</option>
<option value="friction">Friction</option> <option value="friction">Friction</option>
<option value="airFriction">Air Friction</option> <option value="airFriction">Air Friction</option>
@ -32,8 +36,6 @@
<option value="broadphase">Grid Broadphase</option> <option value="broadphase">Grid Broadphase</option>
<option value="chains">Chains</option> <option value="chains">Chains</option>
<option value="ballPool">Ball Pool</option> <option value="ballPool">Ball Pool</option>
<option value="wreckingBall">Wrecking Ball</option>
<option value="avalanche">Avalanche</option>
<option value="beachBalls">Beach Balls</option> <option value="beachBalls">Beach Balls</option>
<option value="events">Events</option> <option value="events">Events</option>
<option value="sprites">Sprites</option> <option value="sprites">Sprites</option>

251
demo/js/Demo.js
View file

@ -10,26 +10,27 @@
Composites = Matter.Composites, Composites = Matter.Composites,
Common = Matter.Common, Common = Matter.Common,
Constraint = Matter.Constraint, Constraint = Matter.Constraint,
RenderPixi = Matter.RenderPixi,
Events = Matter.Events; Events = Matter.Events;
var Demo = {}; var Demo = {};
var _engine, var _engine,
_gui, _gui,
_sceneName; _sceneName,
_isMobile = /(ipad|iphone|ipod|android)/gi.test(navigator.userAgent);
Demo.init = function() { Demo.init = function() {
var container = document.getElementById('canvas-container'); var container = document.getElementById('canvas-container');
// engine options - these are the defaults // engine options
var options = { var options = {
positionIterations: 6, positionIterations: 6,
velocityIterations: 4, velocityIterations: 4,
enableSleeping: false, enableSleeping: false
timeScale: 1
}; };
// create a Matter engine, with the element to insert the canvas into // create a Matter engine
// NOTE: this is actually Matter.Engine.create(), see the aliases at top of this file // NOTE: this is actually Matter.Engine.create(), see the aliases at top of this file
_engine = Engine.create(container, options); _engine = Engine.create(container, options);
@ -59,10 +60,37 @@
Demo.initControls = function() { Demo.initControls = function() {
var demoSelect = document.getElementById('demo-select'), var demoSelect = document.getElementById('demo-select'),
demoReset = document.getElementById('demo-reset'); demoReset = document.getElementById('demo-reset');
// create a dat.gui using Matter helper
_gui = Gui.create(_engine);
// create a dat.gui using Matter helper
if (!_isMobile)
_gui = Gui.create(_engine);
// go fullscreen when using a mobile device
if (_isMobile) {
var body = document.body;
body.className += ' is-mobile';
_engine.render.canvas.addEventListener('touchstart', Demo.fullscreen);
var fullscreenChange = function() {
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
// delay fullscreen styles until fullscreen has finished changing
setTimeout(function() {
if (fullscreenEnabled) {
body.className += ' is-fullscreen';
} else {
body.className = body.className.replace('is-fullscreen', '');
}
}, 2000);
};
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
}
// initialise demo selector
demoSelect.value = _sceneName; demoSelect.value = _sceneName;
demoSelect.addEventListener('change', function(e) { demoSelect.addEventListener('change', function(e) {
@ -79,6 +107,20 @@
Gui.update(_gui); Gui.update(_gui);
}); });
}; };
Demo.fullscreen = function(){
var _fullscreenElement = _engine.render.canvas;
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
if (_fullscreenElement.requestFullscreen) {
_fullscreenElement.requestFullscreen();
} else if (_fullscreenElement.mozRequestFullScreen) {
_fullscreenElement.mozRequestFullScreen();
} else if (_fullscreenElement.webkitRequestFullscreen) {
_fullscreenElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
};
Demo.reset = function() { Demo.reset = function() {
var _world = _engine.world; var _world = _engine.world;
@ -86,8 +128,13 @@
World.clear(_world); World.clear(_world);
Engine.clear(_engine); Engine.clear(_engine);
if (Events) // clear scene graph (if defined in controller)
Events.clear(_engine); var renderController = _engine.render.controller;
if (renderController.clear)
renderController.clear(_engine.render);
// clear events
Events.clear(_engine);
_engine.enableSleeping = false; _engine.enableSleeping = false;
_engine.world.gravity.y = 1; _engine.world.gravity.y = 1;
@ -99,7 +146,6 @@
World.addBody(_world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true })); World.addBody(_world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
var renderOptions = _engine.render.options; var renderOptions = _engine.render.options;
renderOptions.wireframes = true; renderOptions.wireframes = true;
renderOptions.showDebug = false; renderOptions.showDebug = false;
renderOptions.showBroadphase = false; renderOptions.showBroadphase = false;
@ -112,6 +158,11 @@
renderOptions.showIds = false; renderOptions.showIds = false;
renderOptions.showShadows = false; renderOptions.showShadows = false;
renderOptions.background = '#fff'; renderOptions.background = '#fff';
if (_isMobile) {
renderOptions.showAngleIndicator = false;
renderOptions.showDebug = true;
}
}; };
// all functions below are for setting up scenes // all functions below are for setting up scenes
@ -132,7 +183,7 @@
case 1: case 1:
var sides = Math.round(Common.random(1, 8)); var sides = Math.round(Common.random(1, 8));
// triangles can be a little jittery... so avoid until fixed // triangles can be a little unstable, so avoid until fixed
// TODO: make triangles more stable // TODO: make triangles more stable
sides = (sides === 3) ? 4 : sides; sides = (sides === 3) ? 4 : sides;
@ -426,9 +477,11 @@
bodyB: ball bodyB: ball
})); }));
var renderOptions = _engine.render.options; if (!_isMobile) {
renderOptions.showCollisions = true; var renderOptions = _engine.render.options;
renderOptions.showVelocity = true; renderOptions.showCollisions = true;
renderOptions.showVelocity = true;
}
}; };
Demo.ballPool = function() { Demo.ballPool = function() {
@ -535,29 +588,30 @@
World.addComposite(_world, stack); World.addComposite(_world, stack);
//_engine.enableSleeping = true; var shakeScene = function(engine) {
var bodies = engine.world.bodies;
for (var i = 0; i < bodies.length; i++) {
var body = bodies[i];
if (!body.isStatic && body.position.y >= 500) {
var forceMagnitude = 0.01 * body.mass;
Body.applyForce(body, { x: 0, y: 0 }, {
x: (forceMagnitude + Math.random() * forceMagnitude) * Common.choose([1, -1]),
y: -forceMagnitude + Math.random() * -forceMagnitude
});
}
}
};
// an example of using beforeUpdate event on an engine // an example of using beforeUpdate event on an engine
Events.on(_engine, 'beforeUpdate', function(event) { Events.on(_engine, 'beforeUpdate', function(event) {
var engine = event.source; var engine = event.source;
// apply random forces every 5 secs // apply random forces every 5 secs
if (event.timestamp % 5000 < 50) { if (event.timestamp % 5000 < 50)
var bodies = engine.world.bodies; shakeScene(engine);
for (var i = 0; i < bodies.length; i++) {
var body = bodies[i];
if (!body.isStatic && body.position.y >= 500) {
var forceMagnitude = 0.01 * body.mass;
Body.applyForce(body, { x: 0, y: 0 }, {
x: (forceMagnitude + Math.random() * forceMagnitude) * Common.choose([1, -1]),
y: -forceMagnitude + Math.random() * -forceMagnitude
});
}
}
}
}); });
// an example of using collisionStart event on an engine // an example of using collisionStart event on an engine
@ -596,88 +650,79 @@
} }
}); });
// an example of using mouse events on an engine.input.mouse
Events.on(_engine, 'mousedown', function(event) {
var mousePosition = event.mouse.position;
console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
_engine.render.options.background = 'cornsilk';
shakeScene(_engine);
});
// an example of using mouse events on an engine.input.mouse
Events.on(_engine, 'mouseup', function(event) {
var mousePosition = event.mouse.position;
_engine.render.options.background = "white";
console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
});
var renderOptions = _engine.render.options; var renderOptions = _engine.render.options;
renderOptions.wireframes = false; renderOptions.wireframes = false;
}; };
Demo.sprites = function() { Demo.sprites = function() {
var initScene = function() { var _world = _engine.world,
var _world = _engine.world, offset = 10,
offset = 10, options = {
options = { isStatic: true,
isStatic: true, render: {
render: { visible: false
visible: false
}
};
Demo.reset();
_world.bodies = [];
World.addBody(_world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, options));
World.addBody(_world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, options));
World.addBody(_world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, options));
World.addBody(_world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, options));
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y, column, row) {
if (Math.random() > 0.35) {
return Bodies.rectangle(x, y, 64, 64, {
render: {
strokeStyle: '#ffffff',
sprite: {
image: boxSprite,
width: boxSprite.width,
height: boxSprite.height,
xScale: 1,
yScale: 1
}
}
});
} else {
return Bodies.circle(x, y, 46, {
density: 0.0005,
frictionAir: 0.06,
restitution: 0.3,
friction: 0.01,
render: {
sprite: {
image: ballSprite,
width: ballSprite.width,
height: ballSprite.height,
xScale: 1,
yScale: 1
}
}
});
} }
}); };
World.addComposite(_world, stack); Demo.reset();
_world.bodies = [];
var renderOptions = _engine.render.options; // these static walls will not be rendered in this sprites example, see options
renderOptions.background = 'url(./img/wall-bg.jpg) no-repeat'; World.addBody(_world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, options));
renderOptions.showAngleIndicator = false; World.addBody(_world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, options));
renderOptions.wireframes = false; World.addBody(_world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, options));
}; World.addBody(_world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, options));
var boxSprite = new Image(), var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y, column, row) {
ballSprite = new Image(), if (Math.random() > 0.35) {
spriteLoadCount = 0; return Bodies.rectangle(x, y, 64, 64, {
render: {
strokeStyle: '#ffffff',
sprite: {
texture: './img/box.png',
xScale: 1,
yScale: 1
}
}
});
} else {
return Bodies.circle(x, y, 46, {
density: 0.0005,
frictionAir: 0.06,
restitution: 0.3,
friction: 0.01,
render: {
sprite: {
texture: './img/ball.png',
xScale: 1,
yScale: 1
}
}
});
}
});
// count the sprites loaded until they're all ready World.addComposite(_world, stack);
var spriteLoaded = function() {
spriteLoadCount += 1;
// when all sprites loaded, start the scene! var renderOptions = _engine.render.options;
if (spriteLoadCount >= 2) renderOptions.background = './img/wall-bg.jpg';
initScene(); renderOptions.showAngleIndicator = false;
}; renderOptions.wireframes = false;
boxSprite.onload = spriteLoaded;
ballSprite.onload = spriteLoaded;
// trigger loading of sprites
ballSprite.src = './img/ball.png';
boxSprite.src = './img/box.png';
}; };
})(); })();

14221
demo/js/lib/pixi.dev.js Normal file
View file

File diff suppressed because it is too large Load diff