Question

本章节效果图

前言

在本章节开始之前，我建议大家再重温一下《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 值改大一些，本例中暂时改成 10，这个如果不合适后期可以再调整

感觉好一些了