新的Unity磁贴卡系统简介

熟悉Unity 2D磁贴系统可为独立开发人员和游戏工作室节省大量时间来制作原型和创建高质量2D游戏，这是一个绝佳的机会。

如果没有此系统，您可能要花费数天（甚至数周）的时间来编写自己的磁贴卡系统或处理其他人的磁卡系统。 这只是编程，但是瓦片地图编辑器呢？

新系统是免费的，直接内置在Unity编辑器中。 它提供了我们将在本教程中介绍的许多功能。

在本文中，我们将使用一个简单的tile 2D游戏来发现以下内容：

• 磁贴卡的工作方式。
• 如何在Unity中启用切片地图并自定义网格。
• 如何将精灵添加到项目中，将其转换为图块，然后将其添加到图块调色板。
• 如何使用图块编辑器工具创建关卡。
• 如何对图块进行排序并将它们放置在不同的图层中。
• 如何添加Unity物理图块。
• 如何为瓷砖动态着色。
• 如何使用本机代码和逻辑更改预制砖。
• 如何将自己的扩展名和平铺地图脚本添加到项目。

是的，这个清单很棒。 但是请不要害怕-当我们开始理解时，您将很快了解这些工具的简单性。

注意：本教程假定您擅长使用Unity编辑器。 如果您认为自己不熟悉它，那么Unity入门教程将提供学习本教程所需的一切。 此外，您需要Unity版本2017.3或更高版本。

什么是瓷砖游戏？

2D瓷砖游戏是其中关卡或游戏区域由许多小瓷砖（瓷砖）组成的小游戏，这些小瓷砖共同构成瓷砖网格。 有时，图块之间的差异可能很明显，有时，它们对于玩家来说似乎是牢固且无法区分的。

游戏中图块的集合称为图块集，每个图块通常是一个sprite，是spritesheet的一部分。 如果您想更好地处理Sprite表，那么我们有一个描述Unity Sprite表的教程 。

如您在本教程中所见，平铺通常是正方形。 但是它们可以采用另一种形式-矩形，平行四边形或六边形。 在游戏中，通常使用俯视图或侧视图，但在平铺游戏中有时也使用2.5D。

也许您已经知道使用磁贴卡系统的两个最受欢迎的游戏： Starbound和Terraria 。

开始工作

下载本教程的项目资料并解压缩.zip文件。

启动Unity编辑器，并从解压缩的项目资料中加载Rayzor-starter项目。

这是您将在此项目中使用的东西：

• Cinemachine / Gizmos：添加Unity Cinemachine仅是为了在播放器之后实现易于使用的摄像头。
• 调色板：在此文件夹中，我们将存储自己的瓦片调色板。
• 预制件：我们稍后在游戏中使用的一些预制件预制件。
• 场景：在这里我们将打开并保存场景。
• 脚本：一些简单的脚本可控制玩家的动作，陷阱陷阱和游戏中输赢的逻辑。 该文件夹还包含Unity 2D Extras Github存储库中的Unity Tilemap脚本，我们将在以后使用。
• Sfx：游戏的声音。
• 子画面：2D子画面，我们将根据它们创建图块调色板。 它们是从一堆山洞和地牢中冒出来的，它们很像流氓 。 该包的作者是kenney.nl。

游戏创作

从“ 场景”文件夹中打开“ 游戏 ” 场景 。

在编辑器中单击“ 播放”按钮以启动游戏。 在“ 游戏”窗口中，使用WASD键或“箭头”移动英雄。


当英雄在颜色为00000的看似无止尽的相机背景中徘徊时，迷失在虚无之中。

要解决此问题，我们需要2D切片工具来构建有趣的关卡和游戏机制。

了解瓷砖调色板

在编辑器中，单击窗口->拼贴面板以打开2D拼贴面板窗口。


在Unity中从事平铺游戏时，此窗口将是您最好的朋友。

1. 这一系列的图标提供了用于操作图块，绘制和删除的基本工具
2. 使用此选择器，您可以创建不同的调色板，这些调色板可以被视为绘制的调色板，在其中放置“颜色”，在本例中为“瓷砖”。
3. 使用此选择器可以创建具有不同行为的画笔。 您可以添加自己的画笔，其行为与默认画笔不同（例如，绘制具有附加功能的预制瓷砖）

单击“ 创建新调色板”，然后将其命名为RoguelikeCave调色板。 不要更改网格和单元格选项。


单击创建，然后选择将新的调色板保存在项目的Assets \ Palettes文件夹中 。 在其中创建一个新的RoguelikeCave文件夹。

现在，您的项目的文件夹结构应如下所示：


在“ Tile调色板编辑器”窗口中，应选择RoguelikeCave 。 目前，我们还没有任何图块：


没有材料的艺术家如何创作他的杰作？

在不关闭“ Tile Palette”窗口的情况下，选择“ Sprites / roguelike-cave-pack”项目文件夹并展开roguelikeDungeon transparent.png资产。 然后在此Sprite工作表中选择所有Sprite：选择第一个Sprite，按住shift键并选择最后一个Sprite。

将所有选定的精灵拖动到Tile Palette RoguelikeCave窗口中：


将这些精灵拖放到Tile Palette窗口中，然后选择在Unity中存储资产的位置。

在Assets / Palettes / RoguelikeCave中创建一个新的Tiles文件夹，然后选择此文件夹作为存储位置：


Unity将为从Sprite工作表添加的每个Sprite生成一个Tile资产。 等待该过程完成，然后增加“ Tile Palette”窗口的大小，并欣赏位于RoguelikeCave调色板中的美丽新瓷砖的偶数行：


重复上述过程，使用“ Tile Palette”窗口创建一个瓷砖调色板，但是这次将新的RoguelikeCustom调色板命名。

将新调色板放置在新文件夹中。 将其命名为RoguelikeCustom文件夹，并将其移至项目的Assets / Palettes文件夹 。

这次，使用上述过程，使用Assets / Sprites / roguelike-custom / roguelike-normal-cutdown-sheet.png工作表中的Sprite填充新调色板的图块。 在RoguelikeCustom调色板文件夹内创建一个Tiles文件夹，然后在其中移动tile资源：


为自己高兴，现在您知道创建瓷砖调色板的魔力！

平铺地图网格

打开Unity编辑器顶部的GameObject菜单（如果使用的是MacOS，则打开Unity菜单栏），单击2D Object ，然后单击Tilemap创建新的Tilemap网格：


您应该看到新的GameObject Grid已添加到场景层次中。 展开它，然后选择内置的GameObject Tilemap 。

将此Tilemap视为游戏中的一个图层（也许是其中的一个）。 您可以添加新对象来创建其他Tilemap图层。

在检查器中，您将看到Unity自动添加到此GameObject的两个组件：

• Unity引擎使用Tilemap组件将精灵存储在标有Grid组件的电路中-在我们的例子中是GameObject Grid 。 首次创建Tilemap时，您实际上不必担心Unity如何在所有这些组件之间进行通信的所有技术功能。
• Tilemap Renderer指定将用于在Tilemap中渲染图块的材料。 它还允许您配置此Tilemap图层的排序属性。

将GameObject Tilemap重命名为BaseLayer 。

使用各种瓷砖调色板绘制工具

在编辑器中切换到场景模式。

在不关闭“拼贴”调色板的情况下，选择“ RoguelikeCave”调色板，然后选择画笔工具（或按B ）。 选择一个砂砖，如下所示：


在“场景”窗口中，将光标移动到播放器旁边的网格。 沙瓦刷将卡在网格上。

按住鼠标左键，在播放器周围绘制一个矩形区域。 它将在Tilemap BaseLayer图层上绘制：


绘制大区域可能是一项单调的任务，因此有一种“ 实心框”（Filled Box）画笔可用于绘制大区域。 在“拼贴面板”窗口中，单击方形画笔图标 （或按U ）。

返回编辑器，并按住鼠标左键，将光标从左上角拖动到右下角，在播放器周围绘制更大的矩形：


尽管我们为游戏添加了一些颜色，但此沙地牢看起来很暗淡。 现在该添加一些细节了！

使用GameObject-> 2D对象-> Tilemap菜单选项创建一个新的Tilemap图层。 这次它将是层次结构中唯一创建的对象，因为我们已经有了合适的网格。 将此层重命名为DungeonFloorDecoration ：


在“ Tile Palette”窗口中，将“ Active Tilemap”切换到“ DungeonFloorDecoration”层：


选择画笔工具（ B ），然后在“场景”窗口中绘制散布在地图上的对象：


禁用然后重新启用GameObject层次结构中的DungeonFloorDecoration ，以查看活动Tilemap上的渲染如何更改DungeonFloorDecoration层，并且所有渲染的图块均位于此新层上：


再次使用GameObject- > 2D Object-> Tilemap选项创建一个新的Tilemap图层。 称它为可碰撞的 。 将来，我们将用它来创建墙和边界。

将“ Tile Palette”窗口中的“ Active Tilemap”切换为“ Collideable” 。 选择画笔工具（ B ），然后绘制以下图块以在游戏区域周围建墙。 下图中以红色突出显示的区域是需要添加的新部分：


查看“ Tile Palette”窗口下面的屏幕快照，以找出在哪里可以找到建造墙所需的瓷砖。 不要忘记，您可以使用CTRL-Z或CMD-Z组合来撤销操作或使用当前画笔擦除错误（按住Shift的同时）：


在编辑器中启动游戏，然后尝试深入了解：


你没想到吗？

问题在于，我们只是绘制了标准图块，还没有将魔术物理学Unity应用于图块地图图层。

选择GameObject Collideable ，然后单击“ 检查器”窗口中的“ 添加组件”按钮来添加新组件； 在搜索字段中，输入Tilemap Collider 2D ：


该组件是专门为Unity 2D平铺游戏创建的。 它只是将物理碰撞器的形状应用于添加了它的图层中的所有图块，而无需执行任何其他工作。

再次开始游戏，并尝试穿墙。 拒绝访问！

注意：有时在移动相机时，您可能会注意到一些瓷砖之间的黑色细线。 在2D Tilemap Unity系统的项目中，这似乎是照相机运动的问题。 通过在图形设置中禁用“抗锯齿”，您几乎可以完全摆脱它。 但是，即使在采购项目中完成了该操作，其效果仍然会稍微显着。 解决此问题的方法可能是添加您自己的具有像素偏移量的相机移动脚本。 关于这个问题的很好的讨论可以在这里找到。

碰撞效果很好，您可能会认为足够了。 但是目前，对撞机还没有得到有效的优化。 在“场景”模式下，放大墙壁的一部分并查看对撞机的轮廓：


每个磁贴周围都有一个对撞机。 中墙部分不需要这些额外的对撞机。

选择GameObject Collideable之后 ，向其中添加Composite Collider 2D组件。 这还将自动添加RigidBody2D。

将BodyType RigidBody2D参数设置为Static ，然后在Tilemap Collider 2D组件中选中“ 由复合使用”复选框：


之后，您会注意到墙壁中间的这些不必要的方形对撞机消失了。

通过建造墙壁并在顶部封闭（约16瓦高）来完成墙的创建。 不要忘记。 应将“可碰撞对象”选择为“拼贴面板” 窗口的“活动拼贴”：


对于没有障碍的英雄来说，地牢区将不会有任何困难。 现在，我们将开始创建死亡室，并辅之以美丽的古代大理石走廊。 克服所有这些障碍后，玩家将获得奖励-金山。

要绘制这些走廊，我们将使用特殊的图块画笔Rule Tile 。 如您在本教程开始时所看到的那样，来自Unity 2D Extras Github存储库的其他平铺脚本已被添加到项目中。 其中之一是Rule Tile。

规则图块允许我们根据所拥有的相邻图块来设置绘制哪些图块的规则。

右键单击项目的Prefabs文件夹，然后选择创建->规则平铺 （此项目应在菜单顶部）。 命名新的MarbleFloorRuleTile元素：


选择此新的MarbleFloorRuleTile并使用检查器将Default Sprite设置为roguelikeDungeon_transparent_335 。 然后通过单击+图标添加新的切片规则。 为该规则的Sprite选择roguelikeDungeon_transparent_339的值，然后单击规则方案中的所有外部正方形，以便每个都有向外的绿色箭头：


使用“瓷砖调色板”中的盒形填充画笔（ B ）工具并选择“ Tilemap BaseLayer” ，绘制大理石墙的笔直部分。 它必须覆盖地板的所有可用空间。

您会注意到，执行此操作时，该图层将使用碰撞器关闭墙砖，因为尚未设置图层的顺序。 可以通过选择GameObject Collideable并更改Tilemap Renderer组件的Layer中的Order到一个更高的值来轻松解决此问题（ 5就足够了）：


返回项目的Prefabs文件夹，打开Tile窗口并选择RoguelikeCave调色板，然后将MarbleFloorRuleTile拖动到调色板上的空白处：


使用盒子填充刷在房间的大理石地板上绘制一些部分：


请注意，自定义规则图块被所有角度和面完全包围，成为装饰图块（在“切片规则”编辑器中选择的子画面）。

这是一个陷阱！

不，我们不会将Admiral Akbar作为角色添加到游戏中。 我们将为陷阱的预制件创建一个瓷砖刷，用它来绘制用旋转刀片射击的陷阱！

在层次结构中创建一个新的空GameObject并将其命名为ShootingTrap 。 在ShootingTrap中创建一个空的GameObject子级。 将其命名为Sprite ：


选择Sprite，然后向其中添加Sprite Renderer组件。 将“ 排序层”设置为“ 播放器” ，将“层中的顺序”设置为1 ，以使其在其余层的顶部呈现。 选择Sprite字段，并将roguelikeDungeon_transparent_180设置为sprite。

现在在Z轴上将Sprite对象的Transform旋转-90 ：


接下来，返回GameObject ShootingTrap并使用检查器添加一个新组件。 在搜索字段中，找到“ 射击陷阱”并附加此脚本。

该脚本将添加到您下载的项目文件中； 实际上，它每两秒钟启动corutin，在陷阱的当前位置创建一个旋转锯片（或任何其他预制件）的预制实例。

将Shooting Trap组件的Item to Shoot Prefab参数设置为Projectile （预制件位于/ Assets / Prefabs中 ）：


在编辑器中再次启动游戏，并使用“场景”模式查找陷阱。 她工作！


将ShootingTrap副本从层次结构拖到项目的/ Assets / Prefabs文件夹中以创建预制件。 从层次结构中删除ShootingTrap。

我们使用另一个名为PrefabBrush的平铺画笔脚本来创建可以在Tilemap图层上绘制预制件的画笔。

右键单击项目的/ Assets / Prefabs文件夹，然后选择创建->预制画笔 。 将对象命名为PrefabBrush 。

使用检查器将Prefabs Size PrefabBrush参数设置为1 ，将Element 0参数设置为ShootingTrap 。


在网格中创建一个名为Traps的新Tilemap图层，然后打开Tile Palette窗口。

选择常规的瓷砖刷（ B ），然后使用“瓷砖调色板”窗口底部的下拉菜单选择PrefabBrush 。 选择“活动Tilemap 陷阱”作为图层，然后使用“场景”窗口沿房间的左边界绘制几个预制陷阱。


在层次结构中展开GameObject Traps ，并使用检查器中的Shooting Trap脚本对每个Gameobject ShootingTrap上每个值的Shoot Start Delay值进行试验。 将每个陷阱的值加上0.25，即：

• 首次射击陷阱->射击开始延迟= 0.1
• Second ShootingTrap->射击开始延迟= 0.35
• 第三次射击陷阱->射击开始延迟= 0.6
• 依此类推...

如果您敢，请启动游戏并通过测试。

最终目标

这个迷你地牢的目标是获得一堆金子。 名利双收等待着那些到达它的人，避免致命的飞刃。

在GameObject Grid中创建一个名为目标的新Tilemap图层。 选择目标，然后将Layer中的Tilemap Renderer Order的值更改为2 ：


在不关闭“拼贴面板”窗口的情况下，确保仍选择PrefabBrush。 使元素0引用项目的/ Assets / Prefabs文件夹中的 目标 预设 。

这是一个带有大量金色精灵的预制件，其中Box Collider 2D启用了Is Trigger，添加了声源，并且提供了简单的Goal.cs脚本，该脚本可再现到达目标的声音并在玩家掉入触发区域时重新启动关卡。

使用标准瓷砖刷在陷阱后面的房间顶部绘制一个目标预制瓷砖：


再次开始游戏，并尝试达到目标。 转到此图块时， OnTriggerEnter2D()逻辑Goal.cs ，再现声音效果并重新启动该级别。

画龙点睛

现在，地牢太轻又自由了。 我们可以通过切换到可以响应光线的2D精灵材质来为其添加样式。

选择Sprite Player，Goal和ShootingTrap对象，并使Sprite Renderer 材质使用SpriteLightingMaterial ：


这是带有Sprite / Diffuse着色器的材质。 它允许场景照明影响精灵。

在GameObject 网格中，选择BaseLayer，DungeonFloorDecoration，Collideable和Goal对象，然后使用检查器在材质中也使用Tilemap Renderer材质 SpriteLightingMaterial 。

然后在GameObject Lights中选择Directional light ，并将Intensity Light降低到0.3 。

好多了！


另外，您现在会注意到，玩家携带一个点光源 ，即灯笼在他周围发光。

现在，场景中的精灵使用了正确的材质，Unity照明会影响所有周围的精灵。

从场景中项目的/ Assets / Prefabs文件夹中拖动FlickerLight 预制件的两个副本，并将它们放置在GameObject Lights中 。

设置第一个预制位置（X：-11.25，Y：4，Z：-1.35） ，第二个- （X：2.75，Y：4，Z：-1.35） 。

创建一个名为WallsAndObjects的新Tilemap图层，并将“ 图层”检查器中的Tilemap Renderer Order设置为15 。 请记住， Material也使用SpriteLightingMaterial 。

将瓷砖调色板画笔切换回默认画笔 ，将活动瓷砖映射切换至WallsAndObjects 。

使用画笔（ B ）工具在我们放置在初始区域的各个角落的每个新FlickerLight下绘制两个“ light lamp”图块：

困难时期

让我们看看是否可以进一步改善地牢。 使用Tilemap WallsAndObjects图层，使用称为RoguelikeCustom的另一个瓷砖调色板在地牢房顶部创建书柜。 还要画一两部分开裂的墙。

返回Tilemap DungeonFloorDecoration图层，并在大理石地板上添加更多详细信息，例如，几个瓷砖上的裂缝：


恭喜，您已经完成了第一个迷你地牢级别！ 结果，您应该得到类似的内容：

接下来要去哪里？

如果您错过了某个步骤，则可以通过从可下载的资料中打开Unity Rayzor-final项目来查看本教程的最终结果。

在本教程中，我们学到了很多东西，但是与其他任何事情一样，总会有其他东西！

本教程未涵盖一些有趣的瓷砖刷脚本。 在这里阅读有关它们的信息，并考虑是否可以使用它们。

您还可以在此处了解如何创建动画图块。