[Unity 2D] 重温红白机经典FC游戏，顺便教你快速搭建2D游戏关卡（Tilemap | 场景 | 地图）

一、前言：童年的回忆

点关注不迷路，持续输出Unity干货文章。
嗨，大家好，我是新发。
小时候最开心的事情就是放暑假在家打小霸王游戏机了，相信对于大部分80后、90后的童年来讲，这些经典的红白机FC游戏都是最值得纪念的回忆之一。

不知道大家最喜欢玩的是哪款FC游戏呢？欢迎评论区里留言~

我小时候就在想，要是我也能做一款这样的游戏该多好。今天呢，我就来教大家如何在Unity中快速地制作类似经典的红白机FC横版2D游戏关卡吧。

二、本文Unity制作的效果

本文Unity制作效果如下：

本文Demo工程已上传到CodeChina，感兴趣的同学可自行下载学习。
地址：https://codechina.csdn.net/linxinfa/Unity2DGameDemo
注：我使用的Unity版本：Unity 2020.1.14f1c1 (64-bit)。

三、情怀来了，想玩FC游戏

先不着急讲本文的Unity制作。此刻，或许已经勾起了童年的回忆，迫不及待想怀旧重温一下经典，好，我来帮你圆梦。

1、下载FC模拟器，推荐nestopia

要在电脑上完FC游戏，我们需要先下载个FC模拟器。
现在大家常用的主流FC模拟器是下面几款：

我推荐大家下载第一款，也就是nestopia，它的界面比较友好，相对好用很多，而且帧率也比较稳定。

如果上面nestopia的下载地址下不动，可以可以通过我共享的网盘下载。
链接：https://pan.baidu.com/s/1BnHD0uEVe5T3q5d9Is_4Gg
提取码：tblo

2、启动nestopia

双击运行nestopia.exe。

启动后画面如下：

3、下载FC卡带包：76合1（76in1）

上面我们打开nestopia.exe后界面是黑压压的没有画面显示，这是因为我们还没有载入卡带，所以我们需要先下载卡带，这里我推荐一个76合1（76in1）的卡带。

76合1卡带包下载地址：https://www.fcnes.com/uploads/soft/150205/76-in-1(good).zip

下载下来后解压，可以看到它只有2M左右哦。

4、载入卡带（.nes）

回到nestopia界面，点击菜单File / Open...

选择刚刚的卡带文件，点击打开即可。

可以看到，模拟器中出现画面了。

注：76合1的游戏目录见文章末尾附录。

5、设置键盘按键（或手柄）

点击菜单 Options / Input...。

根据你的喜欢进行按键设置，点击Set All按钮，然后挨个设置即可，比如我习惯这样设置：

6、开始玩耍吧

选择第1页的第8个游戏，就是超级马里奥啦，开始愉快地玩耍吧。

7、重启（重载卡带）

如果想要重启，可以点击菜单Machine / Reset / Hard，或者按快捷键Shift + T，效果等价于我们把卡带拔出来重新插入。

8、我收藏的FC卡带（54款）

76合1不够玩，那就把我收藏的这些卡带都给你吧~
链接：https://pan.baidu.com/s/1fl5G_bQ10-OuyYZE4pne4A
提取码：nfdr

四、Unity 2D游戏关卡制作

回归正题，那么，我们用Unity如何制作类似FC这样的2D游戏呢？本文我将教你使用Tilemap工具来快速制作2D游戏关卡场景。

1、创建Unity工程

第一步，建一个Unity工程，注意选择2D模板，工程名叫Unity2DGameDemo好了。

注：如果你没有选2D模板也没事，创建工程后修改一下摄像机的projection为Orthographic（正交）模式即可。另外，选择2D模板，Unity会自动帮你下载2D的相关插件，比如2D Sprite，这些插件也可以手动下载，后文我会讲到。

如下，工程创建完毕。

2、Tilemap的使用

2.1、导入素材图片

我们要制作关卡，得先有关卡的图片素材，以地形素材为例：

把素材图片导入到Unity工程中，如下，放在Textures目录中。

注意设置一下图片的类型为Sprite (2D and UI)。

2.2、切割图片

先检查一下你是否安装了2D Sprite，如果没有，则先安装它。

点击菜单Window / Package Manager，搜索2d spreite，下载并安装2D Sprite插件。

现在，我们需要把整图的素材图片切割成一个个小格子图片，用于后面制作Tilemap的瓦片。
先将图片的Sprite Mode设置为Multiple，然后点击Apply按钮保存。

接着，点击Sprite Editor按钮，打开编辑工具。

在弹出的Sprite Editor窗口中，点击Slice按钮，然后选择Type为Grid By Cell Count，设置列数和行数，比如我这里设置了25 23，这里的列数行数需要根据你自己整图的排版而定，最后点击Slice按钮。

切割后，别忘了点击Apply按钮保存。

我们可以看到，整图生成了一张张小格子纹理图：

2.3、创建画板

先检查下你是否安装了2D Tilemap Editor插件，如果没有，则先安装它。

点击菜单Window / Package Manager，搜索tilemap，下载并安装2D Tilemap Editor插件。

先创建一个Palettes文件夹，用于下面存放画板文件。

接着点击菜单Window / 2D / Tile Palette，

此时会打开Tile Palette窗口，点击Create New Palette按钮，

输入画板名字，比如MyPalette，点击Create按钮，

我们将其保存到Palettes目录中。

如下：

2.4、创建瓦片

先创建一个Tiles文件夹，用于存放下面的瓦片文件。

将整图拖入Tile Palette窗口中，选择瓦片保存目录为Tiles，即可将图片添加到画板中，并且生成瓦片文件。

生成的瓦片文件如下：

我们也可以只拖某张小图到画板中，单独保存某张瓦片，像这样子：

2.5、创建网格

在Hierarchy视图空白处右键鼠标，点击菜单2D Object / Tilemap，

此时就会在场景中创建一个Grid / Tilemap节点，

此时在Scene场景中就可以看到一个个网格了。

2.6、在网格上刷瓦片

打开刚刚的Tile Palette画板窗口，点击画笔（顶部第三个按钮，快捷键B），然后选中你要绘制的瓦片，在场景的格子中按住鼠标拖动即可在网格中连续画出瓦片了，如下：

不过这里我们发现了一个问题，瓦片图片并没有铺满一个格子，这是为什么呢？

2.7、解决瓦片没有占满格子的问题

瓦片图片没有铺满格子的问题，是因为在Unity中，一个单元格绘制多少像素是由图片本身设置决定的，我们选择瓦片整图，可以看到Pixels Per Unit是100，它表示一个单元格显示100个像素。

而我们一个瓦片图片的尺寸是16 x 16，

所以，想要让瓦片铺满一个格子，我们把Pixels Per Unit设置为16即可。

可以看到，现在瓦片刚好铺满一个格子了。

2.8、解决瓦片之间有缝隙的问题

虽然瓦片铺满了格子，但是它们之间是有缝隙的，我们在Game视图中观察可能会更清楚一点，如下：

解决办法是把瓦片整图的Filter Mode设置为Point (no filter)，

可以看到现在没有缝隙了：

2.9、擦除瓦片

画瓦片的时候，可能不小心画错了，需要擦除。
我们只需在画板工具上点击橡皮擦按钮（快捷键D），然后在网格中点击即可擦除对应的瓦片，如下：

2.10、区域瓦片绘制

我们可以在画板找那个选中一个区域的瓦片，就可以直接在网格中一次画出来了，如下：

2.11、瓦片吸取

我们可以在画板中选择瓦片然后在网格中画，我们也可以直接在网格中通过吸取工具（快捷键I）选择对应的瓦片，如下：

2.12、填充瓦片

我们可以给一个闭包的区间填充瓦片（快捷键G），选中瓦片，然后在一个闭包的区域点击一下即可填充，如下：

2.13、瓦片分层（渲染顺序）

我们可以创建多个Tilemap，比如我创建了一个Tilemap2用来绘制柱子，

我们可以看到柱子的层与地面的层的渲染顺序不对，

我们希望地面的层在前面，只需要选择地面的Tilemap把Order in Layer调大即可，比如调成1。（柱子层的Order in Layer是0）。

现在渲染顺序就对了，

2.14、添加碰撞体

我们的主角需要能够站在地面上，所以地面层的Tilemap需要添加碰撞体，我们给地面层的Tilemap节点添加Tilemap Collider 2D组件，如下：

我们可以看到地面层的瓦片都带上了碰撞体。

2.15、合并碰撞体

我们可以看到，碰撞体是一格一格的，

为了提升性能，建议把碰撞体进行合并，只需要在地面层的Tilemap节点再挂一个Composite Collider 2D组件（它会自动再挂一个Rigidbody 2D组件）。

将Rigidbody 2D组件的Body Type设置为Static，否则地面会受到重力往下掉。
将Tilemap Collider 2D组件的Used By Composite勾选上，这样碰撞体格子会进行合并。

合并后的碰撞体如下：

3、添加环境背景图

3.1、导入天空背景图

现在我们的场景背景是空白的，如下：

我们现在给它添加一个天空背景图，先导入天空背景图图片：

如下：

3.2、SpriteRenderer显示天空图片

在场景中创建一个Env空节点，然后把sky图片直接拖入场景中做诶Env子节点，此时它会自动挂上SpriteRenderer组件。

效果如下：

3.3、调节天空图片层级

可以看到天空背景与我们的瓦片层级是错误的，我们把天空背景图的Order in Layer调小，比如设置为-10，这样天空背景图就在最后面了。

如下：

3.4、调节天空图片缩放

我们再调整一下天空背景图的缩放，使之铺满屏幕，

如下：

3.5、设置天空图片循环模式

虽然天空背景图铺满了一个屏幕，但是它并没有覆盖整个地图，

我们把天空图片的Mesh Type改为Full Rect，

然后把sky节点的Draw Mode改为Tiled，

然后调整Width即可循环天空图片了。

4、添加环境装饰

和天空背景图片一样的原理，继续添加一下环境装饰图片，比如房子、树、草堆等等。

效果如下：

5、添加主角

5.1、主角图片

我们现在加上主角吧，把主角图片导入到工程中，

多个序列帧按目录分好，

5.2、制作序列帧动画

我们要创建序列帧动画，所以先创建一个Animations文件夹用来存放动画文件,

选中idle状态的序列帧拖到场景中，

此时会询问你保存动画文件，将其保存为playerIdle.anim，存放在Animations文件夹中。

此时可以看到场景中显示了主角player-idle-1，并且生成了动画文件：player-idle-1.controller、playerIdle.anim。

将动画控制器player-idle-1.controller重命名为player.controller，将场景中的节点player-idle-1重命名为Player，并保存为预设Player.prefab，存放到Resources/Player文件夹中。

由于动画制作不是本文重点，讲下去的话本文的篇幅就太长了，关于Animator更详细的教程，可以参见我之前写的这篇文章：《Unity动画状态机Animator使用》。
我之前也写过一篇飞机大战的教程，里面第四篇讲的就是主角序列帧动画控制，感兴趣的同学可以看下：《使用Unity 2019制作仿微信小游戏飞机大战（四）：主角飞机序列帧动画》

5.3、调整主角的层级

我们看到主角的层级有问题，主角需要显示在最前面，

我们把主角的Order in Layer调大一点，比如调成5，

现在主角在最前面了，

5.3、主角添加刚体和碰撞体

为了让主角可以落在地面上，我们给主角添加刚体组件和碰撞体组件。

运行效果如下：

五、最终效果预览

最终效果预览如下：

就先写这么多吧.
末了，喜欢Unity的同学，不要忘记点击关注，如果有什么Unity相关的技术难题，也欢迎留言或私信~

附录：76合1游戏目录

转载：https://blog.csdn.net/linxinfa/article/details/117135759