[手把手带你Godot游戏开发]FlappyBird:2.坠落吧,小鸟

本章节效果图

在这里插入图片描述

前言

在本章节开始之前,我建议大家再重温一下《Flappy Bird》的原作,一方面明确一下我们临摹的目标,另一方面也消解一下宅家的各种负面情绪。

今天玩《FlappyBird》的时候请大家着重观察一下“主角”小鸟的各种特征:

  1. 小鸟飞翔的时候会扇动翅膀(帧动画)
  2. 我们通过点击鼠标(或点击手机屏幕)向它发出“飞”的指令(可交互)
  3. 获得指令后,小鸟会向上飞, 如果点击不及时,小鸟会坠落(有物理属性)
  4. 当然,最重要的,小鸟无论落到地面还是撞到柱子都会Game Over(可以发生碰撞)

分析

在真实世界中,上述特征都是“理所当然”的(除了,小鸟一般不会受我们控制),然而在游戏这个“虚拟世界”里,没有什么是“理所当然”的,一切都需要我们“伪造”出来。从某种意义上说,游戏开发的整个过程,就是运用各种技术,在计算机中“伪造”出一个“世界”,让你在这个“世界”里,获得兴奋,紧张,高兴,悲伤,骄傲,挫折等等的体验。

步骤

1. 创建一些节点

首先按照下图的样子把红色方框中的节点结构创建出来,注意以下几点:

  • 我没有修改节点的默认名称,因此当前节点名称就代表着它们的类型,你可以按照上节的方法查找并创建它们
  • RigidBody2D必须是其余3个节点的父节点,3个子节点间的相对顺序是无所谓的
    在这里插入图片描述
为什么要建这样的结构
  • Rigidbody2D叫做刚体节点,刚体一般用来描述和模拟一个具有物理性质的对象自身的运动状态,比如质量/速度等等
  • CollisionShape2D直译叫碰撞形,有些引擎叫它碰撞盒或者包围盒,上文说了虚拟世界里物体本来是没有物理轮廓或者外壳的,这个东西就用来模拟它的“外壳”
  • AnimationPlayer可是Godot Engine中一个非常强大的机制,我们可以用它来很方便地组织动画
  • Sprite是我们的老朋友了,解释略
  • 为什么要让"Rigidbody2D"做另外3个节点的父节点?在Godot中子节点会继承父节点的运动。
    本例中"Rigidbody2D"是负责运动的,我们希望"CollisionShape2D"和"Sprite" 实时随着"Rigidbody2D"的运动而运动。
  • 本例中,理论上讲"AnimationPlayer"是否作为"Rigidbody2D"子节点是无所谓的, 把它放在"Rigidbody2D"下面,仅仅是因为它们逻辑上是一个模块

提示
添加子节点的2种方法:

  • 在父节点上右键然后添加子节点
    在这里插入图片描述
  • 或者把子节点拖拽到父节点下面
    在这里插入图片描述
2. 编辑"Sprite"

Godot Engine提供了两种2D精灵动画(2D Sprite Animation)制作方法:

  1. 使用AnimatedSprite
  2. 使用Sprite + AnimationPlayer

我个人更喜欢第二种方法,因为 AnimationPlayer更灵活,并且无论2D还是3D游戏都有同样的工作流程,而AnimatedSprite只能用于2D游戏
大家可以阅读官方中文文档《2D Sprite animation (2D 精灵动画)》

这个"Sprite"用于显示小鸟的图片,把资源中的"bird.png"直接拖拽到"Sprite"的"Texture"属性上
在这里插入图片描述
这时你会发现,这个图集的3帧都显示出来了
在这里插入图片描述把"Sprite"的中的HFrames设置为3就可以了(即:将图片水平3等分)
在这里插入图片描述

3. 编辑"AnimationPlayer"

选定"AnimationPlayer",点击动画按钮
在这里插入图片描述
新建一个动画片段
在这里插入图片描述命名为"fly"

在这里插入图片描述

这时下方的动画列表中就出现了"fly"

建议在制作精灵图集的动画时,将时间轴的显示模式设置为FPS
在这里插入图片描述
提示
这个时间轴是可以通过下方的滑杆来缩放的在这里插入图片描述

点击添加轨道按钮,添加一个属性轨道

在这里插入图片描述

这时会弹出一个节点选择窗口,选择我们的"Sprite",点击确定
在这里插入图片描述
选择“Sprite”的frame属性
在这里插入图片描述
这时,动画编辑器中就显示出了"Sprite" 的frame属性

在这里插入图片描述
为这个轨道添加关键帧,直接在"Sprite" 的属性栏的frame属性处,连续点击3次这个“钥匙图标”(插关键帧)按钮即可,同时,时间轴上也会显示我们的插帧情况
在这里插入图片描述
总帧数设为3,开启循环最后点击以下动画预览按钮看一下

在这里插入图片描述
小鸟的翅膀扇动起来了!
在这里插入图片描述

同样的方法,在添加一组动画,命名为"die",这个动画只需一帧即可,此过程省略

在这里插入图片描述
此时动画编辑器的动画列表中就有2组动画了在这里插入图片描述
我们选择"fly"动画,点击旁边的A>按钮,将"fly"动画设置为程序开始的默认动画

在这里插入图片描述

4. 编辑"CollisionShape2D"

下面我们来处理这个讨厌的警告
在这里插入图片描述

实际上点击这个警告标志,Godot就已经告诉我们原因了,原来CollisionShape2D需要一个我们为它定义一下形状
在这里插入图片描述
点击它的Shape属性旁的“空”
在这里插入图片描述
新建一个CircleShape2D即圆形的碰撞盒

提示
这个碰撞盒的形状怎么选择呢?越精确贴合图片形状的碰撞盒,碰撞效果越精确,但是运算量消耗也越大。因此我们选择碰撞盒的时候,要好好衡量性价比。幸运的是我们的小鸟圆滚滚的,用一个最简单的原型碰撞盒,就可以很准确的贴合了
在这里插入图片描述调整圆形碰撞盒的半径,使它更好的贴合

在这里插入图片描述

本例中我设为55
在这里插入图片描述
与此同时,黄色的警告标记也消失了

在这里插入图片描述

运行一下

在这里插入图片描述
下落速度有点慢?在"Rigidbody2D" 中把Gravity Scale值改大一些,本例中暂时改成5,这个如果不合适后期可以再调整

在这里插入图片描述感觉好一些了
在这里插入图片描述

发布了344 篇原创文章 · 获赞 522 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/hello_tute/article/details/104542478