文章目录
一、前言：童年的回忆二、本文Unity制作的效果三、情怀来了，想玩FC游戏1、下载FC模拟器，推荐nestopia2、启动nestopia3、下载FC卡带包：76合1（76in1）4、载入卡带（.nes）5、设置键盘按键（或手柄）6、开始玩耍吧7、重启（重载卡带）8、我收藏的FC卡带（54款）四、Unity 2D游戏关卡制作1、创建Unity工程2、Tilemap的使用2.1、导入素材图片2.2、切割图片2.3、创建画板2.4、创建瓦片2.5、创建网格2.6、在网格上刷瓦片2.7、解决瓦片没有占满格子的问题2.8、解决瓦片之间有缝隙的问题2.9、擦除瓦片2.10、区域瓦片绘制2.11、瓦片吸取2.12、填充瓦片2.13、瓦片分层（渲染顺序）2.14、添加碰撞体2.15、合并碰撞体3、添加环境背景图3.1、导入天空背景图3.2、SpriteRenderer显示天空图片3.3、调节天空图片层级3.4、调节天空图片缩放3.5、设置天空图片循环模式4、添加环境装饰5、添加主角5.1、主角图片5.2、制作序列帧动画5.3、调整主角的层级5.3、主角添加刚体和碰撞体五、最终效果预览附录：76合1游戏目录一、前言：童年的回忆
点关注不迷路，持续输出Unity干货文章。
嗨，大家好，我是新发。
小时候最开心的事情就是放暑假在家打小霸王游戏机了，相信对于大部分80后、90后的童年来讲，这些经典的红白机FC游戏都是最值得纪念的回忆之一。
不知道大家最喜欢玩的是哪款FC游戏呢？欢迎评论区里留言~
我小时候就在想，要是我也能做一款这样的游戏该多好。今天呢，我就来教大家如何在Unity中快速地制作类似经典的红白机FC横版2D游戏关卡吧。
二、本文Unity制作的效果
本文Unity制作效果如下：
本文Demo工程已上传到CodeChina，感兴趣的同学可自行下载学习。
地址：/linxinfa/Unity2DGameDemo
注：我使用的Unity版本：Unity .1.14f1c1 (64-bit)。
三、情怀来了，想玩FC游戏
先不着急讲本文的Unity制作。此刻，或许已经勾起了童年的回忆，迫不及待想怀旧重温一下经典，好，我来帮你圆梦。
1、下载FC模拟器，推荐nestopia
要在电脑上完FC游戏，我们需要先下载个FC模拟器。
现在大家常用的主流FC模拟器是下面几款：
我推荐大家下载第一款，也就是nestopia，它的界面比较友好，相对好用很多，而且帧率也比较稳定。
如果上面
nestopia的下载地址下不动，可以可以通过我共享的网盘下载。链接：/s/1BnHD0uEVe5T3q5d9Is_4Gg
提取码：tblo
2、启动nestopia
双击运行nestopia.exe。
启动后画面如下：
3、下载FC卡带包：76合1（76in1）
上面我们打开nestopia.exe后界面是黑压压的没有画面显示，这是因为我们还没有载入卡带，所以我们需要先下载卡带，这里我推荐一个76合1（76in1）的卡带。
76合1卡带包下载地址：/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不够玩，那就把我收藏的这些卡带都给你吧~
链接：/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 制作仿微信小游戏飞机大战（四）：主角飞机序列帧动画》
5.3、调整主角的层级
我们看到主角的层级有问题，主角需要显示在最前面，
我们把主角的Order in Layer调大一点，比如调成5，
现在主角在最前面了，
5.3、主角添加刚体和碰撞体
为了让主角可以落在地面上，我们给主角添加刚体组件和碰撞体组件。
运行效果如下：
五、最终效果预览
最终效果预览如下：
就先写这么多吧.
末了，喜欢Unity的同学，不要忘记点击关注，如果有什么Unity相关的技术难题，也欢迎留言或私信~
附录：76合1游戏目录
【游戏开发实战】重温红白机经典FC游戏 顺便教你快速搭建2D游戏关卡（Tilemap | 场景 | 地图）
