如何在matter.js中移动相机答案

【问题标题】：How can I move camera in matter.js如何在matter.js中移动相机
【发布时间】：2016-01-21 01:31:15
【问题描述】：

如何将相机移动到 matter.js 中的特定位置？

我希望相机跟随我的主角。

我试过这个教程：http://brm.io/matter-js/demo/#views 但说实话，我没看懂。

【问题讨论】：

你能解释一下你想要做什么吗？您在制作横向卷轴游戏吗？
是的，我正在尝试让camer成为一个休闲角色，就像在马里奥世界中一样
谁赞成这个问题：没有问题。

标签： matter.js

【解决方案1】：

我找到了制作方法：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);

希望对大家有所帮助

【讨论】：

【解决方案2】：

更简单的方法：

Render.lookAt(render, player, {
  x: 1080,
  y: 1920
});

x 和 y 是渲染边界的宽度和高度。

【讨论】：

【解决方案3】：

首先，让我们从这个简单的例子开始：




     // 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,
        Bounds = Matter.Bounds;

现在你可以翻译你的渲染边界来移动你的相机：



    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;
            }

【讨论】：

【解决方案4】：

我发现翻译所有内容也可以。比如 transX=-player.position.x，然后用你所有的身体包括玩家做Matter.Body.translate(body,{x:transX,y:0})

【讨论】：