画布等距游戏引擎 - 移动地图

Question

3

我一直在跟着教程（http://glacialflame.com/category/tutorial/）学习制作等角游戏引擎，但我希望地图能随着人物移动而成为焦点。

也就是说，当你移动时，地图会以人物为中心。

我在这里有一个小的 PasteBin： http://pastebin.com/U75Pz4Yy 在这里可以看到它的效果： http://www.wikiword.co.uk/release-candidate/canvas/newEngine/index.html 请随意尝试！ http://jsfiddle.net/neuroflux/vUxYg/2/ 注：这只适用于HTML5和Canvas浏览器，如果您使用IE6，请不要抱怨。

任何想法和帮助都将不胜感激，我认为可以通过分别将数组中的每个“瓷砖”更新为+1或-1来实现，但似乎无法对已经在画布上的瓷砖图像进行ForEach循环。提前致谢！

- Barrie Reader

你应该制作一个 jsFiddle，这样我们就可以协作尝试一些东西 :) - alex

3个回答

1

移动地图应该就像通过玩家位置平移上下文一样简单。

当玩家沿X或Y移动时，画布也应该按同样的量进行平移（或按相反的量进行平移）。

我没有费心去找到正确的偏移量使兔子始终处于屏幕中央，但这应该可以让您了解如何完成。

- Simon Sarris

Simon Sarris - 给你加一分！绝对的明星！谢谢！ - Barrie Reader

很高兴能够帮忙。我对Canvas游戏非常感兴趣，如果你有任何公开的开发，我很愿意关注你的游戏。 - Simon Sarris

你的 jsfiddle 链接已经失效。如果你还有相关部分的示例，请添加进去。 - Ken

抱歉，这个代码片段属于neurofluxation，他已经将其删除了。 - Simon Sarris

0

我可以提供一个想法，不要只有一个画布，你可以管理3个画布，并将它们设置在3个带有绝对定位的div中，以便每个div都建立在前一个div之上，具有透明背景。

画布比可见游乐场大（可以通过溢出CSS设置进行管理）。玩家始终位于游乐场的中心。移动时，您只需处理div位置，而不是重新绘制背景和顶层，浏览器将完成图形工作。

之后就是加载新背景瓷砖的问题，这可以通过一些隐藏的画布预加载来处理。并且这种分层画布的方式可以应用于其他层（活动标记层，其他玩家层等），这是一个“精灵层在div中”，其中浏览器图形引擎完成大部分最终屏幕图片渲染。

- regilero

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

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

- Aaron Digulla · Accepted Answer

有几种方法可以解决这个问题:

您可以移动整个画布，删除变得不可见的元素（如果有的话）。那如果左上角坐标为-257467,374672会怎样呢？对于渲染器来说只是一次加法计算。
而不是移动画布，您可以移动地图块中的图像。因此，在循环中，创建一个包含所有地图块样式元素的数组，然后移动background-image样式。地图元素保持不变，只有图像发生变化。
您还可以创建/删除DOM节点以及移动现有节点。但从我的经验来看，这非常昂贵（因为浏览器需要弄清楚您的更改，然后更新DOM树，刷新渲染缓存，再次渲染您更改的部分，创建和销毁大量对象等）。