用Unity3D 做 Flappy Bird 游戏

效果展示:

效果展示

创建项目用到的文件夹 例如 images scripts等,之后将图片素材拖入到images中, 如下图所示:

imags.png

接着创建鸟扇动翅膀的动画 如下图所示


小鸟挥动翅膀动画的绘制

这样一个 Bird 扇动翅膀的动画就完成了

接下来呢,该为我们的小Bird 加上上下两个顶部, 如下图所示:


topandbuttom.gif

之后我们为上下两个顶部和小鸟加上碰撞检测并给小鸟加上重力,如下图所示:


加上碰撞检测和小鸟的重力

紧接着, 我们需要为小鸟能在按空格键或者鼠标右键的时候,跳一下,为此,在scripts文件夹下创建birds C# script 文件

小鸟的起跳和碰撞检测

下面解释一下代码
首先,C# 的程序入口在unity3d中被封装成了 Start()Update()两个,其中 Start() 是在游戏启动后仅仅执行一次,一般完成一些初始化工作, 而Update()则是在游戏启动后逐帧执行,也即每帧执行一次Update()函数

第6行 定义了小鸟的飞行速度值, 即可以理解成没按一下按键上升多少距离
第14行 检测是否触发了键盘的空格键或者是鼠标的右键,其中GetMouseButtonDown()的参数中0为左键,1为中键,2为右键,若触发则接着执行第15行的动作, 即将小鸟的y轴上的速度加上刚才设置的瞬时速度。
第19行 的代码用来检测小鸟和上下顶的关系,若两者碰到则在终端打印 "Game Over" 并重新加载游戏ps: 这里要注意将上下两个顶部的名字重命名成为end

之后将上述写好的代码单击按下不要松开拖到bird上,像如下所示:


下一步
先将照相机的投影模式改成正交模式, 因为我们做的是2d游戏,所以选择正交模式更加适合一些

22_07_15_09_48_16.png

然后为Flappy Bird 添加背景图片 首先和小鸟图片一样将导入的背景图片变成unity可以直接用的2d精灵图片, 之后直接拖到我们的场景中就可以了
如下图所示:

分别调整背景和小鸟的layer


Paste_Image.png

这样一个基本的雏形已经完成了, 下面就该为小鸟添加障碍物

在这之前, 为了界面简洁可以将背景图片和上下顶部放到一个空的GameObject里然后命名这个GameObject为BG, 即如下图所示


22_07_15_09_47_00.png

接着将我们images文件夹中的pipe1像之前那样编程unity可用的精灵对象,之后拖到我们的场景列表中放置好位置后,复制一个相同的pipe出来 然后旋转180并拖动位置 像下图所示:

22_07_15_09_56_01.png

因为这两根柱子必须要对齐才行所以创建一个新的GameObject将两根柱子拖到其中,并命名该GameObject 为pipes

这样我们的柱子的场景就做好了 接下来 我们要做的是让柱子动起来,首先将其移出视线内,然后在scripts文件夹中创建Move c# script 文件用来控制柱子的移动

Paste_Image.png

第6行: 首先设置柱子移动的距离 这个大家需要自己算一下自己的 我的柱子是从右向左 分别x的坐标为(7)和(-12)所以移动的距离为-19
第7行: 设置了柱子移动的速度值
第8行: 定义了柱子的终止位置(即一个三维向量)
第11行: 在Start() 函数中首先计算出endPos坐标
第16行: 在Update() 函数中计算柱子实时坐标
第17行: 该行用来检测柱子是否移动到了终止坐标,一旦移动到了,则自我销毁。

到了这一步,我们的鸟儿应该可以穿越柱子啦, 但是这时候小鸟碰到柱子上并不会有什么反应,然么怎么加上小鸟碰到柱子时候结束游戏呢? 最简单的办法就是修改两个柱子的名字和上下底部一样为 end 并给柱子加上碰撞检测组件即如下图所示:

Paste_Image.png

接下来我们创建更多的柱子, 为了实现这一点,要用到一个叫做预制的技术
首先在images, scripts等在同一目录创建一个新的文件夹叫做 prebab

然后如下图所示,将场景中的pipes对象拖到prefab文件夹中做成预制件:


prefab.gif

然后在scripts文件夹中创建一个新的名叫 CreatePipes 的C# script 文件
先将其拖拽到Main Camera下作为其组件,并写下以下代码:

Paste_Image.png

第5行: 首先创建一个pipesPrefab的GameObject 待会用来关联之前的pipesPrefab;
第8行: 重复调用 "Create"函数
第12行: 实例化pipesPrefab, 即不断的制造柱子

写完后保存回到Unity3D 将prefab文件夹中的pipes和Main Camera中的 pipesPrefab 关联(即拖拽到标签为pipesPrefab 的值中)之后就可以将场景中原来的pipes 删除掉。

完成后效果如下图所示:

prefab2.gif

这样就能源源不断的出现柱子啦! :)

很显然,我们不能让柱子一直这么以一个不动的姿态出现, 下面来看看如何让柱子的高度发生些变化:
完成这一步其实非常简单我们只需要自己测量下柱子在屏幕中y轴的上下临界值即可(例如pipes的y轴设置为3则上面的柱子恰好在屏幕上看不到,y轴设置为-3则下面的柱子恰好看不到)

修改CreatePipes这个脚本文件的第12行为:以下代码:

Paste_Image.png

该代码是重载了Instantiate这个函数其中第二个参数就是设置柱子出现的位置,第三个是柱子的旋转角度,这里我们像如上代码设置为恒定值即可。

如此以下 我们的柱子出现的时候位置就是随机的啦,效果如下所示:

prefab3.gif

接下来,我们为小鸟加上分数, 即每通过一个柱子,获得一点分数, 首先在场景中添加一个 Canvas(在场景列表中右键UI中选择Canvas)并在Canvas中添加Text移动到适宜的位置并修改其内容为0

Paste_Image.png

接下来我们要如何知道小鸟通过了一个柱子呢? 这里用到触发检测, 即一种特殊的碰撞检测(不影响物体的运动,仅仅检测两者有没有碰着)

将pipes从prefab中拖回到场景列表之后在pipes中新建一个Cube并用其填充两个柱子之间的空隙,如下图所示:

pipes.gif

接着如下图做一些修改:

pipes2.gif

到这里触发体就设置好了,下面通过一个脚本来测试是否通过柱子并为其加分, 打开 之前创建的 Bird C# script 文件

Paste_Image.png

第2行: 添加UnityEngine.UI库 以便可以获得Text对象
第7、8行: 分别定义scoreText对象和整型score变量
第30行: 该函数用于处理触发离开事件(即小鸟飞过柱子后分数+1)

保存退出后,将Canvas中的Text和bird1对象的组件中的ScoreText关联起来

之后修改场景列表中pipes下Cube名称为score之后点即右侧的Apply然后删掉该pipes

score2.gif

最后一步, 得分时,如何加上声音呢,首先我们创建新的文件夹叫做audio并且将我们的声音资源文件添加进来, 然后打开 Bird 脚本文件 添加以下第6行和第35行代码之后保存退出:

Paste_Image.png
Paste_Image.png

然后将声音文件 关联到bird下得的coin:

coin.gif

最后点击bird添加AudioSource组件,如下图所示:

audioSource2.gif

到目前为止,我们的FlappyBird小游戏就告一段落了。。。

感谢各位看到这里。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,494评论 18 139
  • 由于很多小伙伴要demo我就不一一发了,直接丢在github上自己下载吧:https://github.com/s...
    FKSky阅读 22,955评论 27 99
  • 练习内容 java窗体设置大小功能代码练习15遍(中午) 感想 巩固了昨天练习内容 附件
    周偉誠阅读 193评论 0 0