这是一系列有关在Phaser 3游戏引擎中使用图块贴图创建模块化世界的博客文章。 在第一篇文章中，我们将从零开始创建口袋妖怪风格的自上而下的游戏世界，玩家可以探索：
下一篇文章介绍了如何创建一个动态平台游戏，之后的文章将介绍使用Matter.js程序生成的地牢和跳墙地图。
在我们深入之前，与此文章一起提供的所有代码都在此存储库中。 这些教程使用的是从02/26/19开始的最新版本的Phaser（v3.16.2）和Tiled（v1.2.2）。
我是哥伦比亚大学的一名创意开发人员和教授，但是我被带入了Phaser团队，并进行了冲刺，直到最初的v3发行版来开发Tilemap API。 我创建了约40个指导示例，并每周写新闻通讯更新，但我想将所有这些信息收集为更具指导性和易消化性的格式，以便人们可以更轻松地进入Phaser 3。
如果您对JavaScript，Phaser和Tiled地图编辑器有一定的经验，那么这篇文章将是最有意义的。 如果您不这样做，请继续阅读，但也请随时使用Google，Phaser教程以及Phaser示例和文档，以填补任何空白。
好吧，让我们开始吧！
tilemap是一种利用模块化构建块创建游戏世界的技术。 当您将世界分解成类似乐高的碎片时，您将获得记忆，表现和创造性的胜利。
想象一下试图从头开始重新创建Mario。 假设我们决定尝试将每个级别加载为巨型图像文件。 世界1-1的宽度将超过3500像素：
我们需要大量像素才能将NES游戏中的第一级和其他31级存储为图像。 此外，很难将图像与游戏逻辑同步。 马里奥可以站在哪些像素上？ 哪些像素对应于他可以输入的管道？
tilemap方法定义了一组模块化的，常规尺寸的tile ，我们可以使用它们来构建关卡。 这样，我们只需要一个图像，一个tileet ：
因此304px x 192px的图像可以重新创建原始mario游戏的所有级别，以及您可以想象的任何新级别。 （*当然，除其他外，您仍然会缺少一个有胡子的人和一个双足龟。）每个图块只有16 x 16像素。 将这些图块排列成一个级别称为tilemap 。 使用tilemap编辑软件，我们也可以轻松配置tile的属性。 例如，我们可以将某些瓷砖（例如地砖）标记为Mario可以站立的实心砖。
因此，使用图块贴图，我们可以获得较小的图像（性能和内存优势），可用于轻松创建和迭代关卡设计（创意优势）。
在开始用代码加载一些图块之前，让我们看一下Phaser 3游戏的结构。 在v3中，游戏围绕Scene对象进行组织。 这些就像来自v2的State对象，但更加灵活。
我们将从上一节的样板开始。 在预加载中，我们可以加载图块图像：
注意：小于零的索引被视为空白图块。
重要的提示！ 最新版的Tiled（1.2版）更改了地图导出格式，从而破坏了Phaser的地图导入。 如果您在加载地图时遇到问题（尤其是在未加载碰撞信息的情况下），请确保至少使用Phaser 3.14.0。
使用tilemapTiledJSON加载程序方法，我们可以加载并显示从Tiled导出的tilemap：
您会注意到，地图是由多个相互叠置的图层组成的：
在使用Tiled时，这是一种常见的设计模式。 它使我们能够分离出放置在游戏中不同“深度”的元素。 通过这些层，我们可以确保“下方播放器”层（地面和路径）显示在播放器精灵下方，而“上方播放器”层（屋顶/雕像/标志顶部）则显示在播放器精灵上方。 “世界”层包含所有其他内容，包括世界上的碰撞/固体内容。
如果添加摄像机代码，则最终得到：
回到Phaser内部，我们可以简单地执行以下操作来标记worldLayer的碰撞worldLayer ：
将图块标记为碰撞后，就可以添加物理场。 在游戏的配置中，我们可以通过执行以下操作打开街机物理引擎：
感谢您的阅读，如果您希望在以后的帖子中看到一些内容，请告诉我！
您可能在最后两节中注意到了图块集名称中的“挤压”一词。 如果您在图块贴图中发现轻微的“渗出”，开始看到图块之间的接缝，则一种解决方法是使用我写的名为tile-extruder的小型命令行实用程序来挤压图块。
我是一名创意开发人员和教育家。 您可以在这里查看我的更多作品并联系。
