【游戏开发实战】重温红白机经典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模拟器是下面几款:

FC模拟器官网备注
nestopiahttp://nestopia.sourceforge.net/推荐使用这款,界面友好,体验好
FCEUXhttp://fceux.com/web/home.html需要设置的地方相对较多,界面不是很友好
OpenEMUhttp://openemu.org/只有苹果版,Windows不能使用
VirtuaNEShttp://virtuanes.s1.xrea.com/vnes_dl.php模拟器有点跳帧

我推荐大家下载第一款,也就是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模板也没事,创建工程后修改一下摄像机的projectionOrthographic(正交)模式即可。另外,选择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按钮,然后选择TypeGrid 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 Unit100,它表示一个单元格显示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用来绘制柱子,
在这里插入图片描述
我们可以看到柱子的层与地面的层的渲染顺序不对,
在这里插入图片描述
我们希望地面的层在前面,只需要选择地面的TilemapOrder 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.controllerplayerIdle.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游戏目录

序号选项英文名中文名
01P101Pin Ball弹珠台
02P102Urban Champion街头格斗小子
03P103Dig Dug打空气1
04P104Excite Bike越野摩托
05P105Mabby快乐猫
06P106Circus Chablie马戏团
07P107Mario Bros马里奥水管工
08P108Super Mario超级马里奥1
09P109KeyKong JR大金刚JR
10P110Tennis网球
11P201Pengun Adventure南极大冒险
12P202Macross超时空要塞
13P203Kung Fu功夫
14P204Combat杀戮战场
15P205F1 RaceF1赛车
16P206Road Fighter公路英雄
17P207Exerion火凤凰
18P208Twin Bee兵蜂1
19P209Star Force星际战机
20P210Formation 2变型战机Z
21P301B WingesB计划
22P302Ice Climber敲冰块
23P303Baltle City坦克大战
24P304Mahjong 4四人麻将
25P305Bomber Man炸弹人1
26P306Pack Man吃豆小精灵
27P307Galaza大蜜蜂
28P308Front Line前线
29P309Joust鸟骑士
30P310Popeye大力水手
31P311Milk And Nuts牛奶与花生
32P40119421942
33P402Othello黑白棋
34P403Lode Runner 2淘金者2(淘金者锦标赛)
35P404Lode Runner淘金者1
36P405Baseball棒球
37P406Lunar Ball月宫桌球
38P407Ninja忍者大决战
39P408Millipecle杀虫大战
40P409Arabian超级阿拉伯
41P410Ballon Fight气球大战
42P411Chack’n Pop拯救爱心
43P501Galaxian小蜜蜂
44P502Sky Destroyer红巾特攻队
45P503Mahjong 2麻将
46P504Devil World恶魔世界
47P505Binary Land双企鹅
48P506Pooyan三只小猪
49P507Warpman太空青蛙
50P508Donkey Kong大金刚1
51P509Donkey Kong 2大金刚2(JR)
52P510Helicopter救难直升机
53P511Ninja 2忍者君
54P601Clu Land克鲁克鲁世界
55P602City Connection碰碰车
56P603Burger Time汉堡时代
57P604Golf高尔夫
58P605Gobang五子棋
59P606Wrestle筋肉人摔角
60P607Star Juster太空侵略者(星际保卫战)
61P608Karateka空手道(英雄救美)
62P609Duck Hunt打鸭
63P610Wild Gunman荒野枪手
64P611Hogan Alley警技射击
65P701Mach Rider机车大赛
66P702King of GhostQ太郎
67P703Gypodine战斗直升机
68P704Ninja 3忍者哈特君
69P705Mag Max组合金刚
70P706Spartan成龙踢馆1
71P801Wrecking Crew马里奥敲砖工
72P802Elevator Action电梯大战
73P803Xevious铁板阵
74P804Arkanoid打砖块
75P805Galg塞尔特战机(头脑战舰)
76P806Tetris 2俄罗斯方块(天正版2)
  • 130
    点赞
  • 380
    收藏
  • 打赏
    打赏
  • 51
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页
评论 51

打赏作者

林新发

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值