html5中的2D侧滚动摄像机视图

Question

我想知道如何制作类似相机的视图,我可以在画布元素中滚动一个级别,如下所示:

http://playbiolab.com/

Answer 1

所以你想要一个500x500的画布来展示真正9000x500左右的东西(游戏级别).

这可以.你所做的就是将画布视为更大场景的"视口".您将画布(或其他所有内容)转换为适当的位置,并在该位置绘制所有相关内容.

这是一个例子:

http://jsfiddle.net/hKrrY/

单击画布并按住左箭头键以查看红色玩家点保持"静止"时的场景.

在您通过100x100画布滚动时,您会看到正在一次性绘制的对象,如(330,50).翻译画布将它们带入视野.

我想值得一提的是,这就是在画布中进行优化开始真正重要的地方.我上面给出的一个例子是一个非常简单的方法来制作一个视口,随着你的代码的进展,你会想要越来越多地思考你正在绘制什么以及你绘制了多少.例如,您将要避免绘制完全在屏幕外的对象,如果您的游戏或应用程序的背景为9000x500,您可能不希望每次都绘制整个事物!

所以这个概念就是这里的概念,但是你会想要很好地思考如何实现它以及你做画布的工作量.如果您在侧滚动应用程序中遇到性能问题,请务必告诉我们:)

Answer 2

我总是发现将画布包装在div中的效率更高,其中视口的宽度和高度设置为隐藏,然后只需绘制整个画布并将div滚动到您想要查看的位置.

所以html将是:

<div id='wrapper' style='width: 200px; height: 200px; overflow: hidden;'>
     <canvas width='1000' height='1000'></canvas>
</div>

和javascript会是这样的

function scrollWrapper(x, y){
    var wrapper = document.getElementById('wrapper');  
    wrapper.scrollTop = x;
    wrapper.scrollLeft = y;
}

然后只需使用要查看的x和y调用该函数.如果你想移动那里而不是只是跳到那里,你可以将它包装在一个setTimeout或其他东西中.