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

changed demo to properly track and clear events between scenes

Browse source
This commit is contained in:
liabru 2014-04-30 10:33:37 +01:00
parent 5b013d01e7
commit f530ed4f36
1 changed files with 105 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

183
demo/js/Demo.js
View file

@ -26,6 +26,7 @@
_inspector, _inspector,
_sceneName, _sceneName,
_mouseConstraint, _mouseConstraint,
_sceneEvents = [],
_isMobile = /(ipad|iphone|ipod|android)/gi.test(navigator.userAgent); _isMobile = /(ipad|iphone|ipod|android)/gi.test(navigator.userAgent);
// initialise the demo // initialise the demo
@ -631,65 +632,89 @@
} }
}; };
// an example of using beforeUpdate event on an engine _sceneEvents.push(
Events.on(_engine, 'beforeUpdate', function(event) {
var engine = event.source;
// apply random forces every 5 secs // an example of using beforeUpdate event on an engine
if (event.timestamp % 5000 < 50) Events.on(_engine, 'beforeUpdate', function(event) {
shakeScene(engine); var engine = event.source;
});
// an example of using collisionStart event on an engine // apply random forces every 5 secs
Events.on(_engine, 'collisionStart', function(event) { if (event.timestamp % 5000 < 50)
var pairs = event.pairs; shakeScene(engine);
})
// change object colours to show those starting a collision );
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i];
pair.bodyA.render.fillStyle = '#bbbbbb';
pair.bodyB.render.fillStyle = '#bbbbbb';
}
});
// an example of using collisionActive event on an engine _sceneEvents.push(
Events.on(_engine, 'collisionActive', function(event) {
var pairs = event.pairs;
// change object colours to show those in an active collision (e.g. resting contact) // an example of using collisionStart event on an engine
for (var i = 0; i < pairs.length; i++) { Events.on(_engine, 'collisionStart', function(event) {
var pair = pairs[i]; var pairs = event.pairs;
pair.bodyA.render.fillStyle = '#aaaaaa';
pair.bodyB.render.fillStyle = '#aaaaaa';
}
});
// an example of using collisionEnd event on an engine // change object colours to show those starting a collision
Events.on(_engine, 'collisionEnd', function(event) { for (var i = 0; i < pairs.length; i++) {
var pairs = event.pairs; var pair = pairs[i];
pair.bodyA.render.fillStyle = '#bbbbbb';
pair.bodyB.render.fillStyle = '#bbbbbb';
}
})
// change object colours to show those ending a collision );
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i];
pair.bodyA.render.fillStyle = '#999999';
pair.bodyB.render.fillStyle = '#999999';
}
});
// an example of using mouse events on an engine.input.mouse _sceneEvents.push(
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 // an example of using collisionActive event on an engine
Events.on(_engine, 'mouseup', function(event) { Events.on(_engine, 'collisionActive', function(event) {
var mousePosition = event.mouse.position; var pairs = event.pairs;
_engine.render.options.background = "white";
console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y); // change object colours to show those in an active collision (e.g. resting contact)
}); for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i];
pair.bodyA.render.fillStyle = '#aaaaaa';
pair.bodyB.render.fillStyle = '#aaaaaa';
}
})
);
_sceneEvents.push(
// an example of using collisionEnd event on an engine
Events.on(_engine, 'collisionEnd', function(event) {
var pairs = event.pairs;
// change object colours to show those ending a collision
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i];
pair.bodyA.render.fillStyle = '#999999';
pair.bodyB.render.fillStyle = '#999999';
}
})
);
_sceneEvents.push(
// 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);
})
);
_sceneEvents.push(
// 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);
})
);
}; };
Demo.sprites = function() { Demo.sprites = function() {
@ -770,34 +795,36 @@
World.add(_world, stack); World.add(_world, stack);
Events.on(_engine, 'afterRender', function() { _sceneEvents.push(
var mouse = _engine.input.mouse, Events.on(_engine, 'afterRender', function() {
context = _engine.render.context, var mouse = _engine.input.mouse,
bodies = Composite.allBodies(_engine.world), context = _engine.render.context,
startPoint = { x: 400, y: 100 }, bodies = Composite.allBodies(_engine.world),
endPoint = mouse.position; startPoint = { x: 400, y: 100 },
endPoint = mouse.position;
var collisions = Query.ray(bodies, startPoint, endPoint); var collisions = Query.ray(bodies, startPoint, endPoint);
context.beginPath(); context.beginPath();
context.moveTo(startPoint.x, startPoint.y); context.moveTo(startPoint.x, startPoint.y);
context.lineTo(endPoint.x, endPoint.y); context.lineTo(endPoint.x, endPoint.y);
if (collisions.length > 0) { if (collisions.length > 0) {
context.strokeStyle = '#fff'; context.strokeStyle = '#fff';
} else { } else {
context.strokeStyle = '#555'; context.strokeStyle = '#555';
} }
context.lineWidth = 0.5; context.lineWidth = 0.5;
context.stroke(); context.stroke();
for (var i = 0; i < collisions.length; i++) { for (var i = 0; i < collisions.length; i++) {
var collision = collisions[i]; var collision = collisions[i];
context.rect(collision.bodyA.position.x - 4.5, collision.bodyA.position.y - 4.5, 8, 8); context.rect(collision.bodyA.position.x - 4.5, collision.bodyA.position.y - 4.5, 8, 8);
} }
context.fillStyle = 'rgba(255,165,0,0.7)'; context.fillStyle = 'rgba(255,165,0,0.7)';
context.fill(); context.fill();
}); })
);
var renderOptions = _engine.render.options; var renderOptions = _engine.render.options;
}; };
@ -905,10 +932,10 @@
if (renderController.clear) if (renderController.clear)
renderController.clear(_engine.render); renderController.clear(_engine.render);
/*if (Events) { // clear all scene events
// clear all events for (var i = 0; i < _sceneEvents.length; i++)
Events.off(_engine); Events.off(_engine, _sceneEvents[i]);
}*/ _sceneEvents = [];
// reset id pool // reset id pool
Common._nextId = 0; Common._nextId = 0;