如何在 matter.js 中移动相机
How can I move camera in matter.js
如何将相机移动到 matter.js 中的特定位置?
我想让镜头跟着我的主角。
我试过这个教程:http://brm.io/matter-js/demo/#views
但说实话,我没看懂。
我找到了制作方法:http://codepen.io/vanuatu/pen/VeQMpp
我们需要控制渲染边界,像这样:
//
hero = bubbleBall
// Follow Hero at X-axis
engine.render.bounds.min.x = centerX + hero.bounds.min.x
engine.render.bounds.max.x = centerX + hero.bounds.min.x + initialEngineBoundsMaxX
// Follow Hero at Y-axis
engine.render.bounds.min.y = centerY + hero.bounds.min.y
engine.render.bounds.max.y = centerY + hero.bounds.min.y + initialEngineBoundsMaxY
// Update Mouse
Mouse.setOffset(mouseConstraint.mouse, engine.render.bounds.min);
希望对大家有所帮助
首先,让我们从这个简单的例子开始:
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Runner = Matter.Runner,
Bodies = Matter.Bodies;
var engine = Engine.create();
var runner = Runner.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine,
runner: runner,
options: {
width: 1280,
height: 720
}
});
var vertices = [{ x : 50, y : 0},
{ x : 63, y : 38},
{ x : 100, y : 38},
{ x : 69, y : 59},
{ x : 82, y : 100},
{ x : 50, y : 75},
{ x : 18, y : 100},
{ x : 31, y : 59},
{ x : 0, y : 38},
{ x : 37, y : 38} ];
// add a star at center
var star = Matter.Vertices.create(vertices);
var starBody = Bodies.fromVertices(640, 360, star, {isStatic: true}, true);
// add all of the bodies to the world
World.add(engine.world, [ starBody]);
Render.run(render);
Runner.run(runner, engine);
你应该在中心看到一个小星星,如果你想移动相机,你的渲染需要有边界,修改渲染实例如下:
<pre><code>
var render = Render.create({
element: document.body,
engine: engine,
runner: runner,
options: {
width: 1280,
height: 720,
<b>hasBounds : true</b>
}
});
并使用 Bounds
模块别名:
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
<b>Bounds = Matter.Bounds;</b>
现在您可以平移渲染的边界来移动相机:
let translate = {x : -100, y : -100}
Bounds.translate(render.bounds, translate);
实际上它的作用是这样的:
function moveMatterJSCamera(offsetX, offsetY) {
render.bounds.min.x += offsetX;
render.bounds.max.x += offsetX;
render.bounds.min.y += offsetY;
render.bounds.max.y += offsetY;
}
更简单的方法:
Render.lookAt(render, player, {
x: 1080,
y: 1920
});
x 和 y 是渲染边界的宽度和高度。
我发现翻译一切也行。喜欢 transX=-player.position.x
然后用你所有的身体做 Matter.Body.translate(body,{x:transX,y:0})
包括玩家
如何将相机移动到 matter.js 中的特定位置?
我想让镜头跟着我的主角。
我试过这个教程:http://brm.io/matter-js/demo/#views 但说实话,我没看懂。
我找到了制作方法:http://codepen.io/vanuatu/pen/VeQMpp
我们需要控制渲染边界,像这样:
//
hero = bubbleBall
// Follow Hero at X-axis
engine.render.bounds.min.x = centerX + hero.bounds.min.x
engine.render.bounds.max.x = centerX + hero.bounds.min.x + initialEngineBoundsMaxX
// Follow Hero at Y-axis
engine.render.bounds.min.y = centerY + hero.bounds.min.y
engine.render.bounds.max.y = centerY + hero.bounds.min.y + initialEngineBoundsMaxY
// Update Mouse
Mouse.setOffset(mouseConstraint.mouse, engine.render.bounds.min);
希望对大家有所帮助
首先,让我们从这个简单的例子开始:
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Runner = Matter.Runner,
Bodies = Matter.Bodies;
var engine = Engine.create();
var runner = Runner.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine,
runner: runner,
options: {
width: 1280,
height: 720
}
});
var vertices = [{ x : 50, y : 0},
{ x : 63, y : 38},
{ x : 100, y : 38},
{ x : 69, y : 59},
{ x : 82, y : 100},
{ x : 50, y : 75},
{ x : 18, y : 100},
{ x : 31, y : 59},
{ x : 0, y : 38},
{ x : 37, y : 38} ];
// add a star at center
var star = Matter.Vertices.create(vertices);
var starBody = Bodies.fromVertices(640, 360, star, {isStatic: true}, true);
// add all of the bodies to the world
World.add(engine.world, [ starBody]);
Render.run(render);
Runner.run(runner, engine);
你应该在中心看到一个小星星,如果你想移动相机,你的渲染需要有边界,修改渲染实例如下:
<pre><code>
var render = Render.create({
element: document.body,
engine: engine,
runner: runner,
options: {
width: 1280,
height: 720,
<b>hasBounds : true</b>
}
});
并使用 Bounds
模块别名:
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
<b>Bounds = Matter.Bounds;</b>
现在您可以平移渲染的边界来移动相机:
let translate = {x : -100, y : -100}
Bounds.translate(render.bounds, translate);
实际上它的作用是这样的:
function moveMatterJSCamera(offsetX, offsetY) {
render.bounds.min.x += offsetX;
render.bounds.max.x += offsetX;
render.bounds.min.y += offsetY;
render.bounds.max.y += offsetY;
}
更简单的方法:
Render.lookAt(render, player, {
x: 1080,
y: 1920
});
x 和 y 是渲染边界的宽度和高度。
我发现翻译一切也行。喜欢 transX=-player.position.x
然后用你所有的身体做 Matter.Body.translate(body,{x:transX,y:0})
包括玩家