文章目录
一、前言：童年的回忆
点关注不迷路，持续输出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模拟器是下面几款：
| FC模拟器 | 官网 | 备注 |
|---|---|---|
| nestopia@H_404_215@ | http://nestopia.sourceforge.net/@H_404_215@ | 推荐使用这款，界面友好，体验好@H_404_215@ |
| FCEUX@H_404_215@ | http://fceux.com/web/home.html@H_404_215@ | 需要设置的地方相对较多，界面不是很友好@H_404_215@ |
| OpenEMU@H_404_215@ | http://openemu.org/@H_404_215@ | 只有苹果版，Windows不能使用@H_404_215@ |
| Virtuanes@H_404_215@ | http://virtuanes.s1.xrea.com/vnes_dl.php@H_404_215@ | 模拟器有点跳帧@H_404_215@ |
我推荐大家下载第一款，也就是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、创建瓦片
将整图拖入
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组件，如下：
我们可以看到地面层的瓦片都带上了碰撞体。
@H_502_814@
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游戏目录
| 序号 | 页 | 选项 | 英文名 | 中文名 |
|---|---|---|---|---|
| 01@H_404_215@ | P1@H_404_215@ | 01@H_404_215@ | Pin Ball@H_404_215@ | 弹珠台@H_404_215@ |
| 02@H_404_215@ | P1@H_404_215@ | 02@H_404_215@ | Urban Champion@H_404_215@ | 街头格斗小子@H_404_215@ |
| 03@H_404_215@ | P1@H_404_215@ | 03@H_404_215@ | Dig Dug@H_404_215@ | 打空气1@H_404_215@ |
| 04@H_404_215@ | P1@H_404_215@ | 04@H_404_215@ | Excite Bike@H_404_215@ | 越野摩托@H_404_215@ |
| 05@H_404_215@ | P1@H_404_215@ | 05@H_404_215@ | Mabby@H_404_215@ | 快乐猫@H_404_215@ |
| 06@H_404_215@ | P1@H_404_215@ | 06@H_404_215@ | Circus Chablie@H_404_215@ | 马戏团@H_404_215@ |
| 07@H_404_215@ | P1@H_404_215@ | 07@H_404_215@ | Mario bros@H_404_215@ | 马里奥水管工@H_404_215@ |
| 08@H_404_215@ | P1@H_404_215@ | 08@H_404_215@ | Super Mario@H_404_215@ | 超级马里奥1@H_404_215@ |
| 09@H_404_215@ | P1@H_404_215@ | 09@H_404_215@ | KeyKong JR@H_404_215@ | 大金刚JR@H_404_215@ |
| 10@H_404_215@ | P1@H_404_215@ | 10@H_404_215@ | Tennis@H_404_215@ | 网球@H_404_215@ |
| 11@H_404_215@ | P2@H_404_215@ | 01@H_404_215@ | Pengun Adventure@H_404_215@ | 南极大冒险@H_404_215@ |
| 12@H_404_215@ | P2@H_404_215@ | 02@H_404_215@ | Macross@H_404_215@ | 超时空要塞@H_404_215@ |
| 13@H_404_215@ | P2@H_404_215@ | 03@H_404_215@ | Kung Fu@H_404_215@ | 功夫@H_404_215@ |
| 14@H_404_215@ | P2@H_404_215@ | 04@H_404_215@ | Combat@H_404_215@ | 杀戮战场@H_404_215@ |
| 15@H_404_215@ | P2@H_404_215@ | 05@H_404_215@ | F1 Race@H_404_215@ | F1赛车@H_404_215@ |
| 16@H_404_215@ | P2@H_404_215@ | 06@H_404_215@ | Road fighter@H_404_215@ | 公路英雄@H_404_215@ |
| 17@H_404_215@ | P2@H_404_215@ | 07@H_404_215@ | Exerion@H_404_215@ | 火凤凰@H_404_215@ |
| 18@H_404_215@ | P2@H_404_215@ | 08@H_404_215@ | Twin Bee@H_404_215@ | 兵蜂1@H_404_215@ |
| 19@H_404_215@ | P2@H_404_215@ | 09@H_404_215@ | Star Force@H_404_215@ | 星际战机@H_404_215@ |
| 20@H_404_215@ | P2@H_404_215@ | 10@H_404_215@ | Formation 2@H_404_215@ | 变型战机Z@H_404_215@ |
| 21@H_404_215@ | P3@H_404_215@ | 01@H_404_215@ | B Winges@H_404_215@ | B计划@H_404_215@ |
| 22@H_404_215@ | P3@H_404_215@ | 02@H_404_215@ | Ice climber@H_404_215@ | 敲冰块@H_404_215@ |
| 23@H_404_215@ | P3@H_404_215@ | 03@H_404_215@ | Baltle City@H_404_215@ | 坦克大战@H_404_215@ |
| 24@H_404_215@ | P3@H_404_215@ | 04@H_404_215@ | Mahjong 4@H_404_215@ | 四人麻将@H_404_215@ |
| 25@H_404_215@ | P3@H_404_215@ | 05@H_404_215@ | Bomber Man@H_404_215@ | 炸弹人1@H_404_215@ |
| 26@H_404_215@ | P3@H_404_215@ | 06@H_404_215@ | Pack Man@H_404_215@ | 吃豆小精灵@H_404_215@ |
| 27@H_404_215@ | P3@H_404_215@ | 07@H_404_215@ | galaza@H_404_215@ | 大蜜蜂@H_404_215@ |
| 28@H_404_215@ | P3@H_404_215@ | 08@H_404_215@ | Front Line@H_404_215@ | 前线@H_404_215@ |
| 29@H_404_215@ | P3@H_404_215@ | 09@H_404_215@ | Joust@H_404_215@ | 鸟骑士@H_404_215@ |
| 30@H_404_215@ | P3@H_404_215@ | 10@H_404_215@ | Popeye@H_404_215@ | 大力水手@H_404_215@ |
| 31@H_404_215@ | P3@H_404_215@ | 11@H_404_215@ | Milk And Nuts@H_404_215@ | 牛奶与花生@H_404_215@ |
| 32@H_404_215@ | P4@H_404_215@ | 01@H_404_215@ | 1942@H_404_215@ | 1942@H_404_215@ |
| 33@H_404_215@ | P4@H_404_215@ | 02@H_404_215@ | othello@H_404_215@ | 黑白棋@H_404_215@ |
| 34@H_404_215@ | P4@H_404_215@ | 03@H_404_215@ | Lode Runner 2@H_404_215@ | 淘金者2(淘金者锦标赛)@H_404_215@ |
| 35@H_404_215@ | P4@H_404_215@ | 04@H_404_215@ | Lode Runner@H_404_215@ | 淘金者1@H_404_215@ |
| 36@H_404_215@ | P4@H_404_215@ | 05@H_404_215@ | Baseball@H_404_215@ | 棒球@H_404_215@ |
| 37@H_404_215@ | P4@H_404_215@ | 06@H_404_215@ | Lunar Ball@H_404_215@ | 月宫桌球@H_404_215@ |
| 38@H_404_215@ | P4@H_404_215@ | 07@H_404_215@ | Ninja@H_404_215@ | 忍者大决战@H_404_215@ |
| 39@H_404_215@ | P4@H_404_215@ | 08@H_404_215@ | Millipecle@H_404_215@ | 杀虫大战@H_404_215@ |
| 40@H_404_215@ | P4@H_404_215@ | 09@H_404_215@ | arabian@H_404_215@ | 超级阿拉伯@H_404_215@ |
| 41@H_404_215@ | P4@H_404_215@ | 10@H_404_215@ | Ballon fight@H_404_215@ | 气球大战@H_404_215@ |
| 42@H_404_215@ | P4@H_404_215@ | 11@H_404_215@ | Chack’n Pop@H_404_215@ | 拯救爱心@H_404_215@ |
| 43@H_404_215@ | P5@H_404_215@ | 01@H_404_215@ | galaxian@H_404_215@ | 小蜜蜂@H_404_215@ |
| 44@H_404_215@ | P5@H_404_215@ | 02@H_404_215@ | Sky Destroyer@H_404_215@ | 红巾特攻队@H_404_215@ |
| 45@H_404_215@ | P5@H_404_215@ | 03@H_404_215@ | Mahjong 2@H_404_215@ | 麻将@H_404_215@ |
| 46@H_404_215@ | P5@H_404_215@ | 04@H_404_215@ | Devil World@H_404_215@ | 恶魔世界@H_404_215@ |
| 47@H_404_215@ | P5@H_404_215@ | 05@H_404_215@ | Binary Land@H_404_215@ | 双企鹅@H_404_215@ |
| 48@H_404_215@ | P5@H_404_215@ | 06@H_404_215@ | Pooyan@H_404_215@ | 三只小猪@H_404_215@ |
| 49@H_404_215@ | P5@H_404_215@ | 07@H_404_215@ | Warpman@H_404_215@ | 太空青蛙@H_404_215@ |
| 50@H_404_215@ | P5@H_404_215@ | 08@H_404_215@ | Donkey Kong@H_404_215@ | 大金刚1@H_404_215@ |
| 51@H_404_215@ | P5@H_404_215@ | 09@H_404_215@ | Donkey Kong 2@H_404_215@ | 大金刚2(JR)@H_404_215@ |
| 52@H_404_215@ | P5@H_404_215@ | 10@H_404_215@ | Helicopter@H_404_215@ | 救难直升机@H_404_215@ |
| 53@H_404_215@ | P5@H_404_215@ | 11@H_404_215@ | Ninja 2@H_404_215@ | 忍者君@H_404_215@ |
| 54@H_404_215@ | P6@H_404_215@ | 01@H_404_215@ | Clu Land@H_404_215@ | 克鲁克鲁世界@H_404_215@ |
| 55@H_404_215@ | P6@H_404_215@ | 02@H_404_215@ | City Connection@H_404_215@ | 碰碰车@H_404_215@ |
| 56@H_404_215@ | P6@H_404_215@ | 03@H_404_215@ | Burger Time@H_404_215@ | 汉堡时代@H_404_215@ |
| 57@H_404_215@ | P6@H_404_215@ | 04@H_404_215@ | Golf@H_404_215@ | 高尔夫@H_404_215@ |
| 58@H_404_215@ | P6@H_404_215@ | 05@H_404_215@ | Gobang@H_404_215@ | 五子棋@H_404_215@ |
| 59@H_404_215@ | P6@H_404_215@ | 06@H_404_215@ | Wrestle@H_404_215@ | 筋肉人摔角@H_404_215@ |
| 60@H_404_215@ | P6@H_404_215@ | 07@H_404_215@ | Star Juster@H_404_215@ | 太空侵略者(星际保卫战)@H_404_215@ |
| 61@H_404_215@ | P6@H_404_215@ | 08@H_404_215@ | Karateka@H_404_215@ | 空手道(英雄救美)@H_404_215@ |
| 62@H_404_215@ | P6@H_404_215@ | 09@H_404_215@ | Duck Hunt@H_404_215@ | 打鸭@H_404_215@ |
| 63@H_404_215@ | P6@H_404_215@ | 10@H_404_215@ | Wild Gunman@H_404_215@ | 荒野枪手@H_404_215@ |
| 64@H_404_215@ | P6@H_404_215@ | 11@H_404_215@ | Hogan Alley@H_404_215@ | 警技射击@H_404_215@ |
| 65@H_404_215@ | P7@H_404_215@ | 01@H_404_215@ | Mach Rider@H_404_215@ | 机车大赛@H_404_215@ |
| 66@H_404_215@ | P7@H_404_215@ | 02@H_404_215@ | King of Ghost@H_404_215@ | Q太郎@H_404_215@ |
| 67@H_404_215@ | P7@H_404_215@ | 03@H_404_215@ | Gypodine@H_404_215@ | 战斗直升机@H_404_215@ |
| 68@H_404_215@ | P7@H_404_215@ | 04@H_404_215@ | Ninja 3@H_404_215@ | 忍者哈特君@H_404_215@ |
| 69@H_404_215@ | P7@H_404_215@ | 05@H_404_215@ | Mag Max@H_404_215@ | 组合金刚@H_404_215@ |
| 70@H_404_215@ | P7@H_404_215@ | 06@H_404_215@ | Spartan@H_404_215@ | 成龙踢馆1@H_404_215@ |
| 71@H_404_215@ | P8@H_404_215@ | 01@H_404_215@ | Wrecking Crew@H_404_215@ | 马里奥敲砖工@H_404_215@ |
| 72@H_404_215@ | P8@H_404_215@ | 02@H_404_215@ | Elevator Action@H_404_215@ | 电梯大战@H_404_215@ |
| 73@H_404_215@ | P8@H_404_215@ | 03@H_404_215@ | XevIoUs@H_404_215@ | 铁板阵@H_404_215@ |
| 74@H_404_215@ | P8@H_404_215@ | 04@H_404_215@ | Arkanoid@H_404_215@ | 打砖块@H_404_215@ |
| 75@H_404_215@ | P8@H_404_215@ | 05@H_404_215@ | galg@H_404_215@ | 塞尔特战机(头脑战舰)@H_404_215@ |
| 76@H_404_215@ | P8@H_404_215@ | 06@H_404_215@ | Tetris 2@H_404_215@ | 俄罗斯方块(天正版2)@H_404_215@ |
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
