Canvas 等距游戏引擎 - 移动地图
我一直在学习一个教程（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/
注意：< /em> 这仅适用于 HTML5 和 Canvas 浏览器，如果您使用 IE6，请不要抱怨；）
任何想法和帮助将不胜感激，我想我可以通过将数组中的每个“图块”更新为 +1 或 - 来做到这一点1 分别，但我似乎无法对画布上已有的平铺图像执行 ForEach 循环。
提前干杯！
I have been working through a tutorial (http://glacialflame.com/category/tutorial/) to build an Isometric game engine, but I would like the map to move with the character as the focus point.
So, when you move - the map centres on the character.
I have a little PasteBin here:
http://pastebin.com/U75Pz4Yy
See it in action here:
http://www.wikiword.co.uk/release-candidate/canvas/newEngine/index.html
Have a fiddle, by request!
http://jsfiddle.net/neuroflux/vUxYg/2/
Note:
This is for HTML5 and Canvas browsers only, don't moan if you are using IE6 ;)
Any ideas and help would be appreciated, I thought I could do it by updating each of the "tiles" in the array by +1 or -1 respectively, but I can't seem to do a ForEach loop for the tile images already on the canvas.
Cheers in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
有几种方法可以解决这个问题：
您可以移动整个画布，删除（最终）变得不可见的元素。那么如果左上角是-257467,374672呢？这只是渲染器的一项补充。
你可以移动时代的图像，而不是移动画布。因此，为地图片段的所有样式元素创建一个数组，然后在循环中移动
background-image样式。地图元素保持不变，只有图像发生变化。您可以创建/删除 DOM 节点以及移动现有节点。但根据我的经验，这是相当昂贵的（因为浏览器需要弄清楚你更改了什么，然后更新 DOM 树，刷新渲染缓存，再次渲染你更改的部分，创建和销毁大量对象，...）
There are several ways to attack this:
You can move the whole canvas, delete the elements which became invisible (eventually). So what if the top left corner is at -257467,374672? It's just one addition for the renderer.
Instead of moving the canvas, you can move the images of the times. So create an array for all the style elements of the map pieces and then, in the loop, move the
background-imagestyles around. The map elements stay in place, only the image changes.You can create/delete the DOM nodes plus move the existing ones. But from my experience, that's pretty expensive (since the browser needs to figure out what you changed and then update the DOM tree, flush the render caches, render the part you changes again, lots of objects are created and destroyed, ...)
移动地图应该像根据玩家位置翻译上下文一样简单。
当玩家移动 X 或 Y 时，画布应该平移相同的量（或负的量），
我没有费心寻找正确的偏移量来使兔子始终位于屏幕的中心，但它应该给你如何完成的想法。
Moving the map should be as simple as translating the context by the players position.
As the player moves by X or Y, so should the canvas translate by the same amount (or by negative that amount)
I didnt bother finding the right offset to make the bunny always in the center of the screen, but it should give you the idea of how it is done.
我可以给出一个想法，您可以管理 3 个画布并将它们设置在具有绝对定位的 3 个 div 中，而不是只有一个画布，这样每个 div 都构建在前一个具有透明背景的顶部。
画布将比可见的游乐场更大（可以通过溢出CSS设置进行管理）。玩家将始终位于操场的中心。移动时，您只需处理 div 位置，而不需要重新绘制背景和顶层，浏览器将完成图形工作。
之后存在加载新背景图块的问题，这可以通过一些隐藏的画布预加载来处理。这种画布分层方式可以应用于其他层（活动标记层、其他玩家层等），它是一个“sprite-layer-in-div”，浏览器图形引擎在其中完成大部分最终屏幕图片渲染。
I can give one idea, instead of having only one canvas you could manage 3 canvas and set them in 3 divs with absolute positioning, so that each div is built on top of the previous with transparent background.
The canvas would be bigger than the visible playground (could be managed with overflow css settings). The player would always be on the center of the playground. When moving, instead of redrawing background and top layer you just have to handle div position, the browser will make the graphic job.
After that there's the problem of loading new background tiles, that could be handled with some hidden canvas preload. And this way of layering canvas can be applied for other layers (active markers layer, other players layers, etc), it's a 'sprite-layer-in-div' where the browser grapĥic engine do most of the final screen picture rendering.