来自 Tiled 的 Tilemap 未在 Phaser 中渲染答案

【问题标题】：Tilemap from Tiled not rendering in Phaser来自 Tiled 的 Tilemap 未在 Phaser 中渲染
【发布时间】：2015-08-06 22:02:05
【问题描述】：

我在尝试制作这款游戏时陷入了困境。我尝试使用的 tilemap 有如下错误说明

Error 1: "Phaser.Tileset - image tile area is not an even multiple of tile size"
Error 2: "Uncaught TypeError: Cannot read property '2' of undefined"
Error 3: "Uncaught TypeError: Cannot read property 'type' of undefined"2

这是我正在使用的代码的链接。 http://pastebin.com/Dv00KGii

【问题讨论】：

欢迎来到 SO！请发布您尝试过的代码，以便我们可以帮助您解决上述问题。请参阅How to ask page 以帮助改进您的问题。
感谢您的欢迎和提示，我会这样做的。
编辑完成后，再次在 cmets 中 ping 我，我可以投票支持。您已经通过响应展示了社区参与，这太棒了！参与是成功的关键！
谢谢，但由于字符空间的限制，我无法将整个代码完全放在这里。我的代码超过了字符数限制，因为所有字符总数约为 4400。有什么建议吗？
好吧，尝试发布与错误相关的一些代码，我的意思是所有这些都不能被怀疑，可以吗？但是你应该可以使用pastebin.com - 粘贴你的代码，给粘贴一个名称，然后点击提交。它会为您提供一个可以在此处发布的唯一 URL。

标签： javascript html phaser-framework

【解决方案1】：

尝试在您的瓷砖地图中嵌入瓷砖集。对我来说，这解决了这个错误：Uncaught TypeError: Cannot read property '2' of undefined"

【讨论】：

【解决方案2】：

在平铺地图编辑器中，您需要确保您使用的所有平铺图像都嵌入到平铺地图 .tmx 项目文件中。如果任何瓦片集图像被包含为外部 .tsx，而不是嵌入图像，那么当您尝试在 Phaser 中导入从 Tiled Map Editor 导出的 JSON 文件时，它将引发 Uncaught TypeError: Cannot read property '2' of undefined" 错误。

如果您忘记在开始时嵌入它，这不是问题，因为您以后总是可以这样做。编辑器有一个有用的图标可以轻松完成：

要查看是否有任何会产生此错误的外部图块集，请检查导出的图块地图 JSON 文件是否包含对 .tsx 文件的任何引用。

【讨论】：

【解决方案3】：

Phaser 报告的错误如下：

"图像平铺区域不是平铺尺寸的偶数倍"

因此，Phaser 显然要求瓦片集图像的大小是瓦片大小的倍数。 Tiled 本身不需要这个，但如果你使用 Phaser，你应该确保在 tileset 图像中没有多余的空间。

【讨论】：

好的，我会尝试调整磁贴并替换文件夹。感谢您的意见，我对此很陌生，我希望这是我第一个完成的项目。我会报告任何事情。
我不明白，如果我用瓷砖覆盖整个区域，是否可以为具有特定 ID 的某些瓷砖分配透明度？我需要一些砖块是实心的，但其他的砖块对于一个工作游戏来说是可以通过的。
我相信这不是关于瓷砖是否透明，而是关于瓷砖集的宽度是否可以被瓷砖宽度整除。
@ThorbjørnLindeijer 你好，我也有这个问题。你能解释一下这是什么意思吗？我的图块大小为 32 x 32 像素，地图高度为 6，宽度为 48。在 Phaser 中，我的地图呈现为 new Phaser.Game(768, 384...，它们都是 32 的倍数？我错过了什么？
@SummerDeveloper 瓦片集图像是整个图像，通常在一个网格上包含多个瓦片。错误消息表明此图像的尺寸必须是图块尺寸的偶数倍。因此，如果您的图块为 32x32，则有效图块集图像大小的示例为 64x128，因为这意味着它包含 2x4 图块，它们都是偶数。

【解决方案4】：

这也发生在我身上。我发现我正在加载的 png 图像是 1280x720。

Phaser website 上的示例说像这样加载 tilemap

map = game.add.tilemap('mario');

tilemap 函数的文档是here。该函数采用其他参数，例如图块大小。在我的情况下，默认 32x32 无效，因为 720/32 = 22.5。该数字必须是整数。所以我只是将我的图像裁剪为32*22 = 704。然后 Phaser 能够使用默认的 tilemap 设置加载 png。那么默认的 32x32 将起作用，否则您可以将高度设置更改为 10，因为 720 可以被 10 整除。在这种情况下，Phaser 不应抛出错误。就我而言，我调整了图像的大小，因为我使用的其他平铺图像都是 32x32，因此更容易保持一致。

此外，在创建 tilemap json 时，最好 tileheight 和 tilewidth 是您的图像和设置的倍数。

【讨论】：