Question

我正在研究一种自上而下的基于物理的太空游戏。我希望旋转到视图，即使船可以旋转，也始终显示玩家的船朝上。我已经搜索了文档，但没有找到任何关于旋转世界或渲染器的信息，但我可能不知道要寻找合适的术语。这是否可以与matter.js一起使用？

Answer 1

我不确定如何为内置渲染器执行此操作。我使用了自定义渲染器，并使用画布转换来移动相机。

http://www.w3schools.com/tags/canvas_rotate.asp

ctx.save();
ctx.translate(transX, transY);
drawBody();
ctx.restore();

http://codepen.io/lilgreenland/pen/wzARJY

Answer 2

或者，将代码添加到Render.startViewTransform方法：

// OVERLOAD THIS METHOD
Matter.Render.startViewTransform = function(render) {
    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;

    // add lines:
    var w2 = render.canvas.width / 2;
    var h2 = render.canvas.height / 2;
    render.context.translate(w2, h2);
    render.context.rotate(angle_target);
    render.context.translate(-w2, -h2);
    // /add lines.

    render.context.scale(1 / boundsScaleX, 1 / boundsScaleY);
    render.context.translate(-render.bounds.min.x, -render.bounds.min.y);
};

但是您仍然需要重写render.bounds的计算，该计算现在始终将角度= 0的区域视为矩形！

Answer 3

只要船停在屏幕中央，就可以使用element.style.transform = 'rotate('+rotation+')'旋转HTML中的画布。我知道这与lilgreenland的答案类似，但是通过这种方式，您不必使用自定义渲染器，而可以使用通过requestAnimationFrame更新的函数。

在Matter.js中旋转相机

3 个答案: