javascript - 在 html5 Canvas 内绘制 .tmx 平铺 map

Question

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

Answer 1

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

以下页面描述了如何解析 TMX 文件(由于大小和版权/许可证，我无法粘贴该页面中的任何内容)。该代码适用于 ActionScript，它是 JavaScript 的 ECMA 脚本表亲，因此代码本身并不难移植:

<强> Parse TMX files

至于加载和解析 XML 本身:JavaScript 有一个内置的 XML 解析器，即 XMLHttpRequest 对象，您可以将其与 DOMParser 结合使用来加载文件，请参阅此答案以了解如何操作:

<强> Parse XML with JavaScript

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

解析文件后，您还需要有代码将图 block 放置在 Canvas 上。简单的 2D 图 block 引擎很容易制作。例如，您可以使用此作为起点(它不是 JavaScript，但代码很容易阅读和移植):

<强> A simple 2D tile engine