javascript - 在 html5 中的画布内绘制 .tmx 平铺地图

Question

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

score 2 · Accepted Answer

不幸的是，没有， JavaScript 不直接支持TMX 文件格式，因此您必须为其编写解析器。

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

至于加载和解析 XML 本身：JavaScript 有一个内置的 XML 解析器，XMLHttpRequest您加载文件的对象，结合DOMParser，请参阅此答案以了解如何：

如果你不想自己写，你可以看看例如GameJS库，它有一个内置的TMX 解析器。该库已获得 MIT 许可，因此您可以在自己的项目中自由使用其代码或部分代码。

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

1 回答 1