使用Tiled在Phaser 3 Platformer游戏中收集对象

这篇博客文章将详细介绍如何在使用Tiled的Phaser 3制作的游戏中收集对象（在本游戏中为硬币）。 我们将一步一步地创建不同的瓷砖地图图层，并牢记以下最终结果：

在上面的示例中，我们的整个游戏世界将为3200像素宽和512像素长。 我从我们的图块集中指定了16×16像素的图块大小。 接下来，您需要点击“新建图块集”以添加到图块中。 确保选中标记为“嵌入地图”的框：

• 我的主线：雅典娜（Capcom vs. SNK 2）
• [S01E01] Downwell，一个简单的Maestria。
• 德比日游戏设计：对话系统
• 前线：Wartide开发人员问答
• 还有谁想在您的公寓中享受终极游戏体验？

创建我们的tilemap和导入tilesheet之后，我们可以“绘制地图”。

请注意，在我的示例中，天空是在“ BackgroundLayer”中创建的，丘陵和灌木丛是在“ BackgroundDecorations层”中创建的，地面，平台和管道是在标有“ GroundLayer”的层中创建的。 这些层都分开了，以允许游戏本身具有特殊的碰撞条件。 请注意，“ CoinLayer”在顶部创建为对象层。

创建地图后，我们将其作为json对象导入到我们的游戏中。

您拥有一个完全创建的游戏世界。 怎么办？ 当然，自己编写实际代码并将地图添加到游戏中！

本教程并非旨在向您展示如何创建“ Phaser 3”游戏，但是我提供了以下代码以供参考。

步骤1

创建游戏并预加载资产。 请注意，即使我们已经将“硬币”资产包含在Tiled json地图创建中，它也必须作为其自身资产加载到游戏中。

第二步

使用create函数在游戏世界中渲染地图。

第三步

尽管图块地图包含硬币位置，但我们尚未渲染硬币。 通过将以下代码添加到create函数中，我们将循环遍历CoinLayer对象以在游戏中渲染硬币。

创建硬币后，请确保与我们的“玩家”进行碰撞。 如果玩家与硬币重叠（碰撞），我们将调用“ collectCoin”功能。 我们将在下一步中创建它。

我们还将在此处初始化我们的硬币计数器文本。

最后，在create函数之外创建’collectCoin’函数。 这将破坏硬币，因此它将不再出现在游戏中，并增加我们的硬币数量。