首页 > 软件开发 > 软件开发

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

admin 软件开发 2021-05-25 09:26:04 unity tilemap 红白机FC 2D游戏 关卡制作 
后台-系统设置-扩展变量-手机广告位-内容正文底部

文章目录

      • 一、前言:童年的回忆
      • 二、本文Unity制作的效果
      • 三、情怀来了,想玩FC游戏
        • 1、下载FC模拟器,推荐nestopia
        • 2、启动nestopia
        • 3、下载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,感兴趣的同学可自行下载学习。
地址: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打空气104P104Excite Bike越野摩托05P105Mabby快乐猫06P106Circus Chablie马戏团07P107Mario Bros马里奥水管工08P108Super Mario超级马里奥109P109KeyKong JR大金刚JR10P110Tennis网球11P201Pengun Adventure南极大冒险12P202Macross超时空要塞13P203Kung Fu功夫14P204Combat杀戮战场15P205F1 RaceF1赛车16P206Road Fighter公路英雄17P207Exerion火凤凰18P208Twin Bee兵蜂119P209Star Force星际战机20P210Formation 2变型战机Z21P301B WingesB计划22P302Ice Climber敲冰块23P303Baltle City坦克大战24P304Mahjong 4四人麻将25P305Bomber Man炸弹人126P306Pack Man吃豆小精灵27P307Galaza大蜜蜂28P308Front Line前线29P309Joust鸟骑士30P310Popeye大力水手31P311Milk And Nuts牛奶与花生32P4011942194233P402Othello黑白棋34P403Lode Runner 2淘金者2(淘金者锦标赛)35P404Lode Runner淘金者136P405Baseball棒球37P406Lunar Ball月宫桌球38P407Ninja忍者大决战39P408Millipecle杀虫大战40P409Arabian超级阿拉伯41P410Ballon Fight气球大战42P411Chack’n Pop拯救爱心43P501Galaxian小蜜蜂44P502Sky Destroyer红巾特攻队45P503Mahjong 2麻将46P504Devil World恶魔世界47P505Binary Land双企鹅48P506Pooyan三只小猪49P507Warpman太空青蛙50P508Donkey Kong大金刚151P509Donkey 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成龙踢馆171P801Wrecking Crew马里奥敲砖工72P802Elevator Action电梯大战73P803Xevious铁板阵74P804Arkanoid打砖块75P805Galg塞尔特战机(头脑战舰)76P806Tetris 2俄罗斯方块(天正版2)

文章来源:https://blog.csdn.net/linxinfa/article/details/117135759

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://www.jcdi.cn/ruanjiankaifa/30816.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码