移动HTML Canvas元素的“相机”

Question

移动HTML Canvas元素的“相机”

4

我正在寻找一种干净的方法来“移动画布元素”的摄像头，这是为了我的原型游戏（横向卷轴游戏）。我希望能够找到比移动整个节点集合以模拟“摄像头”移动更好的解决方案。我几乎可以确定已经阅读过一个简单的教程（使用偏移量？），但事实上我找不到任何类似的东西开始引起怀疑...我是否想象中读到了那个！谢谢帮我澄清... J

- Jem

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Sarris · Accepted Answer

假设您每秒重绘整个游戏场景30次（多或少）。

您需要重新绘制整个游戏场景，但首先要通过某些偏移量转换画布上下文。

context.translate(x,y)正是您想要的。您需要阅读有关其使用方法以及save()和restore()方法的信息。

当您转换上下文时，之后绘制的所有内容都会向该方向移动。

因此，您不断地在50,50处绘制某些东西（也许是敌人），使用drawImage(badguy,50,50)命令。然后玩家移动，将x的值从0更改为-1（因为玩家向右移动）。您仍然使用命令drawImage(badguy,50,50)绘制敌人精灵，但是当您绘制它时，由于context.translate(-1,0)命令在其之前将所有内容都向左移动了一格，因此敌人显示为像是位于49,50处。

当然，在性能上处理时，您需要确保只绘制可见在屏幕中的物体！如果您通过context.translate(-2000,0)非常向下滑动了关卡，您不再需要绘制50,50处的物体，只需要绘制与可见区域相交的物体。