在html5中绘制.tmx在canvas中绘制地图

Question

javascript中是否有任何函数可以读取.tmx图像文件并使用画布context.drawImage(img,x,y,cw,ch)内的图像的默认绘图功能在html5画布中绘制？

Answer 1

不幸的是，在JavaScript中不直接支持TMX file format，因此您必须为其编写解析器。

以下页面介绍了如何解析TMX文件（由于尺寸和版权/许可，我无法粘贴该页面中的任何内容）。该代码适用于ActionScript，一个JavaScript的ECMA脚本，所以代码本身并不难以移植：

<强> Parse TMX files

关于加载和解析XML本身：JavaScript有一个内置的XML解析器，XMLHttpRequest对象，你加载文件，结合DOMParser，看看这个答案如何：

<强> Parse XML with JavaScript

如果您不想自己编写，可以查看具有内置GameJS的TMX parser库。该库是MIT许可的，因此您可以在自己的项目中自由使用其代码或部分代码。

解析文件后，您还需要使用代码将切片放在画布上。简单的2D平铺引擎很容易制作。您可以使用例如此作为起点（它不是JavaScript，但代码易于阅读和移植）：

<强> A simple 2D tile engine