foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-12-25 13:39:06 -05:00
Code Issues Wiki Activity

Add Pixi DisplayObjectContainer to allow view bounds in webGL

Browse source
This commit is contained in:
Mr Speaker 2014-06-12 16:43:16 -04:00
parent a9278fc6c2
commit 97f0f8d7d4
1 changed files with 42 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/render/RenderPixi.js
View file

@ -25,6 +25,7 @@ var RenderPixi = {};
height: 600, height: 600,
background: '#fafafa', background: '#fafafa',
wireframeBackground: '#222', wireframeBackground: '#222',
hasBounds: false,
enabled: true, enabled: true,
wireframes: true, wireframes: true,
showSleeping: true, showSleeping: true,
@ -46,7 +47,19 @@ var RenderPixi = {};
// init pixi // init pixi
render.context = new PIXI.WebGLRenderer(render.options.width, render.options.height, render.canvas, false, true); render.context = new PIXI.WebGLRenderer(render.options.width, render.options.height, render.canvas, false, true);
render.canvas = render.context.view; render.canvas = render.context.view;
render.container = new PIXI.DisplayObjectContainer();
render.stage = new PIXI.Stage(); render.stage = new PIXI.Stage();
render.stage.addChild(render.container);
render.bounds = render.bounds || {
min: {
x: 0,
y: 0
},
max: {
x: render.options.width,
y: render.options.height
}
};
// caches // caches
render.textures = {}; render.textures = {};
@ -55,7 +68,7 @@ var RenderPixi = {};
// use a sprite batch for performance // use a sprite batch for performance
render.spriteBatch = new PIXI.SpriteBatch(); render.spriteBatch = new PIXI.SpriteBatch();
render.stage.addChild(render.spriteBatch); render.container.addChild(render.spriteBatch);
// insert canvas // insert canvas
if (Common.isElement(render.element)) { if (Common.isElement(render.element)) {
@ -77,12 +90,12 @@ var RenderPixi = {};
* @param {RenderPixi} render * @param {RenderPixi} render
*/ */
RenderPixi.clear = function(render) { RenderPixi.clear = function(render) {
var stage = render.stage, var container = render.container,
spriteBatch = render.spriteBatch; spriteBatch = render.spriteBatch;
// clear stage // clear stage container
while (stage.children[0]) { while (container.children[0]) {
stage.removeChild(stage.children[0]); container.removeChild(container.children[0]);
} }
// clear sprite batch // clear sprite batch
@ -102,8 +115,8 @@ var RenderPixi = {};
if (bgSprite) if (bgSprite)
spriteBatch.addChildAt(bgSprite, 0); spriteBatch.addChildAt(bgSprite, 0);
// add sprite batch back into stage // add sprite batch back into container
render.stage.addChild(render.spriteBatch); render.container.addChild(render.spriteBatch);
// reset background state // reset background state
render.currentBackground = null; render.currentBackground = null;
@ -154,6 +167,7 @@ var RenderPixi = {};
world = engine.world, world = engine.world,
context = render.context, context = render.context,
stage = render.stage, stage = render.stage,
container = render.container,
options = render.options, options = render.options,
bodies = Composite.allBodies(world), bodies = Composite.allBodies(world),
constraints = Composite.allConstraints(world), constraints = Composite.allConstraints(world),
@ -165,6 +179,21 @@ var RenderPixi = {};
RenderPixi.setBackground(render, options.background); RenderPixi.setBackground(render, options.background);
} }
// handle bounds
var boundsWidth = render.bounds.max.x - render.bounds.min.x,
boundsHeight = render.bounds.max.y - render.bounds.min.y,
boundsScaleX = boundsWidth / render.options.width,
boundsScaleY = boundsHeight / render.options.height;
if (options.hasBounds) {
// TODO: filter out bodies that are not in view
// TODO: filter out constraints that are not in view
// transform the view
container.scale.set(1 / boundsScaleX, 1 / boundsScaleY);
container.position.set(-render.bounds.min.x, -render.bounds.min.y);
}
for (i = 0; i < bodies.length; i++) for (i = 0; i < bodies.length; i++)
RenderPixi.body(engine, bodies[i]); RenderPixi.body(engine, bodies[i]);
@ -187,7 +216,7 @@ var RenderPixi = {};
bodyB = constraint.bodyB, bodyB = constraint.bodyB,
pointA = constraint.pointA, pointA = constraint.pointA,
pointB = constraint.pointB, pointB = constraint.pointB,
stage = render.stage, container = render.container,
constraintRender = constraint.render, constraintRender = constraint.render,
primitiveId = 'c-' + constraint.id, primitiveId = 'c-' + constraint.id,
primitive = render.primitives[primitiveId]; primitive = render.primitives[primitiveId];
@ -203,8 +232,8 @@ var RenderPixi = {};
} }
// add to scene graph if not already there // add to scene graph if not already there
if (stage.children.indexOf(primitive) === -1) if (container.children.indexOf(primitive) === -1)
stage.addChild(primitive); container.addChild(primitive);
// render the constraint on every update, since they can change dynamically // render the constraint on every update, since they can change dynamically
primitive.clear(); primitive.clear();
@ -259,7 +288,7 @@ var RenderPixi = {};
} else { } else {
var primitiveId = 'b-' + body.id, var primitiveId = 'b-' + body.id,
primitive = render.primitives[primitiveId], primitive = render.primitives[primitiveId],
stage = render.stage; container = render.container;
// initialise body primitive if not existing // initialise body primitive if not existing
if (!primitive) { if (!primitive) {
@ -268,8 +297,8 @@ var RenderPixi = {};
} }
// add to scene graph if not already there // add to scene graph if not already there
if (stage.children.indexOf(primitive) === -1) if (container.children.indexOf(primitive) === -1)
stage.addChild(primitive); container.addChild(primitive);
// update body primitive // update body primitive
primitive.position.x = body.position.x; primitive.position.x = body.position.x;