mirror of
https://github.com/liabru/matter-js.git
synced 2024-11-27 09:50:52 -05:00
added Demo.views
This commit is contained in:
parent
786b9af7a0
commit
4af6c1c64e
2 changed files with 84 additions and 0 deletions
|
@ -37,6 +37,7 @@
|
||||||
<option value="mixedSolid">Solid Rendering</option>
|
<option value="mixedSolid">Solid Rendering</option>
|
||||||
<option value="newtonsCradle">Newton's Cradle</option>
|
<option value="newtonsCradle">Newton's Cradle</option>
|
||||||
<option value="wreckingBall">Wrecking Ball</option>
|
<option value="wreckingBall">Wrecking Ball</option>
|
||||||
|
<option value="views">Views</option>
|
||||||
<option value="sprites">Sprites</option>
|
<option value="sprites">Sprites</option>
|
||||||
<option value="pyramid">Pyramid</option>
|
<option value="pyramid">Pyramid</option>
|
||||||
<option value="raycasting">Raycasting</option>
|
<option value="raycasting">Raycasting</option>
|
||||||
|
|
|
@ -107,6 +107,89 @@
|
||||||
var renderOptions = _engine.render.options;
|
var renderOptions = _engine.render.options;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Demo.views = function() {
|
||||||
|
var _world = _engine.world;
|
||||||
|
|
||||||
|
Demo.reset();
|
||||||
|
|
||||||
|
var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y, column, row) {
|
||||||
|
switch (Math.round(Common.random(0, 1))) {
|
||||||
|
|
||||||
|
case 0:
|
||||||
|
if (Math.random() < 0.8) {
|
||||||
|
return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
|
||||||
|
} else {
|
||||||
|
return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(20, 30));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
var sides = Math.round(Common.random(1, 8));
|
||||||
|
sides = (sides === 3) ? 4 : sides;
|
||||||
|
return Bodies.polygon(x, y, sides, Common.random(20, 50));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
World.add(_world, stack);
|
||||||
|
|
||||||
|
// get the centre of the viewport
|
||||||
|
var viewCentre = {
|
||||||
|
x: _engine.render.options.width * 0.5,
|
||||||
|
y: _engine.render.options.height * 0.5
|
||||||
|
};
|
||||||
|
|
||||||
|
// make the world bounds a little bigger than the render bounds
|
||||||
|
_world.bounds.min.x = -300;
|
||||||
|
_world.bounds.min.y = -300;
|
||||||
|
_world.bounds.max.x = 1100;
|
||||||
|
_world.bounds.max.y = 900;
|
||||||
|
|
||||||
|
// use the engine tick event to control our view
|
||||||
|
_sceneEvents.push(
|
||||||
|
Events.on(_engine, 'tick', function() {
|
||||||
|
var world = _engine.world,
|
||||||
|
mouse = _engine.input.mouse,
|
||||||
|
render = _engine.render;
|
||||||
|
|
||||||
|
// get vector from mouse relative to centre of view
|
||||||
|
var mouseRelative = Vector.sub(mouse.position, mouse.offset),
|
||||||
|
deltaCentre = Vector.sub(mouseRelative, viewCentre);
|
||||||
|
|
||||||
|
// only translate the view if mouse has moved 200px from the centre
|
||||||
|
if (Vector.magnitude(deltaCentre) > 200) {
|
||||||
|
|
||||||
|
// create a vector to translate the view, allowing the user to control view speed
|
||||||
|
var translate = {
|
||||||
|
x: Math.pow(Math.abs(deltaCentre.x), 1.5) * 0.001 * Common.sign(deltaCentre.x),
|
||||||
|
y: Math.pow(Math.abs(deltaCentre.y), 1.5) * 0.001 * Common.sign(deltaCentre.y)
|
||||||
|
};
|
||||||
|
|
||||||
|
// prevent the view moving outside the world bounds
|
||||||
|
if (render.bounds.min.x + translate.x < world.bounds.min.x)
|
||||||
|
translate.x = world.bounds.min.x - render.bounds.min.x;
|
||||||
|
|
||||||
|
if (render.bounds.max.x + translate.x > world.bounds.max.x)
|
||||||
|
translate.x = world.bounds.max.x - render.bounds.max.x;
|
||||||
|
|
||||||
|
if (render.bounds.min.y + translate.y < world.bounds.min.y)
|
||||||
|
translate.y = world.bounds.min.y - render.bounds.min.y;
|
||||||
|
|
||||||
|
if (render.bounds.max.y + translate.y > world.bounds.max.y)
|
||||||
|
translate.y = world.bounds.max.y - render.bounds.max.y;
|
||||||
|
|
||||||
|
Bounds.translate(render.bounds, translate);
|
||||||
|
|
||||||
|
// we must update the mouse offset too
|
||||||
|
mouse.offset.x = render.bounds.min.x;
|
||||||
|
mouse.offset.y = render.bounds.min.y;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// must enable renderOptions.hasBounds for views to work
|
||||||
|
var renderOptions = _engine.render.options;
|
||||||
|
renderOptions.hasBounds = true;
|
||||||
|
};
|
||||||
|
|
||||||
Demo.mixedSolid = function() {
|
Demo.mixedSolid = function() {
|
||||||
var _world = _engine.world;
|
var _world = _engine.world;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue