【实战】Unity3d官方案例之Flappy Bird（上篇）

案例来源：Unity3d - Flappy Bird
资源：Flappy Bird Asset

Unity3d官方案例之Flappy Bird（上篇）

本案例来自Unity3d官方案例教程，一切资源均为官方视频内提供。
游戏介绍：
　本案例是实现之前很火的一款游戏《flappy bird》。
　《flappy bird》是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品。(信息来源：百度)

　这款游戏我们可以通过点击屏幕，实现类似“跳跃”的飞翔，通过一个又一个的关卡。
　
　实现这个游戏我们需要完成以下功能：
　· 游戏界面的布置(背景、地板、小鸟等)；
　· 小鸟动画和逻辑实现(Animation Clip的设置、Animation Controller的设置等)；
　· 游戏UI 制作
　· “无限”滚动背景的实现；
　· “无限“生成障碍；
　· 额外功能…
　话不多说我们开始吧~

一、游戏界面的布置

1、新建Project，重命名为Flappy Bird，选择2D，将下载后解压完成的资源包拖进Assets中。(选中对应文件夹直接拖拽即可)

2、目录如下所示：

　其中，
　① LuckiestGuy， 项目中用到的字体。
　② BirdHero，小鸟的三种形态（飞行、展翅、坠机），因为都在同一张贴图里，因此待会儿需要将它分开。
　③ ColumnSprite，障碍物贴图，也就是水管。
　④ GrassThinSprite，草地贴图。
　⑤ SkyTileSprite，天空贴图，天空背景。
3、我们选中BirdHero Sprite，在Inspector中，
· 将Texture Type设置成(Sprite 2D and UI)，
· 将Sprite Mode设置成Multiple。
这样我们就能将小鸟的三种形态分离开来。
· 点击Sprite Editor，在弹出的窗口中选择Apply

· 在打开的面板中选择Slice，Type为Automatic，然后点击Slice，最后点击右上方的Apply。
(Sprtie Editor的好处在于美工可以将一堆的UI制作在一个贴图内，然后我们只需要在Sprite Editor中根据需求选择不同的Type方式去对贴图进行分割，这样我们就能统一管理一堆的贴图了。)

· 这时点击三个小鸟的位置，都会有一个个框框，这表示该贴图已经被分成3个贴图了，在右下方的Sprite小窗口中我们可以观察到相关的参数，具体的作用有兴趣的可以自己捣鼓一下，这里就不赘述了。

` 关闭Sprite Editor后，我们可以在Project中看到切割后的结果。

· 我们把BirdHero_1拖到Hierarchy中，制作小鸟GameObject，重命名为Bird。
4、分别将GrassThinSprite和SkyTileSprite拖拽到Hierarchy中生成草地和天空背景，分别重命名为Ground、Background。
5、Bird、Gound、Background的Sprite Renderer Component中都有一个属性Sotring Layer，我们可以通过给不同的GameObject设置不同的Layer来决定哪一个GameObject在前哪一个在后。我们选择Sprite Renderer Component中的Sotring Layer，点击Add Sorting Layer… 定义不同的Layer。

我们自定义三个Layer，分别为Background、Middle、Front，最下方的Layer显示在最前方，最上方的Layer显示在最下方，跟PS里的图层概念相似。通过Layer我们可以更好的管理UI，比如我们可以把Game中静态的物体(不能和用户产生互动的物体、墙壁之类的)设置一个Layer，这样我们在编写逻辑时可以无视该Layer下所有Object的交互。

这里，我们给Bird的Sorting Layer设置为Middle，Ground设置为Front，Background设置为Background，然后调整各个UI的位置。

6、Ctrl+S，新建Scenes文件夹，将场景保存，名字 这里命名为main(你喜欢都ok)。养成良好的Ctrl+S习惯，不然一旦崩溃或者什么的.. em…
7、给Bird添加Polygen Collider 2D 和 Rigidbody 2D Component

8、给Ground添加Box Collider 2D，并调整Offset和Size属性使其合理地包裹着Ground。

9、运行，如果你的步骤正确，Bird在运行后会掉落在地上，Bird的Rigidbody 2D Component提供了物理模拟，Bird和Ground的Collider 2D提供了碰撞检测，因此Bird会向下掉落，碰到Ground后会停止。

10、这一步的准备工作就完成啦。记得Ctrl + S

二、小鸟动画和逻辑实现

1、选择Bird > Window > Animation，或者直接快捷键Ctrl+6（选中Bird的前提下）。

2、选择Create(注意，请选中Bird再Create)创建Animation Clip(一个Animation Clip表示一个动作)，点击Create后创建新文件夹重命名为Animations，用于存放Animations相关资源，将当前Clip重命名为Idle并保存到Animations文件夹中。

3、点击录制按钮(红色的点)，Add Property，选择Sprite Renderer下的Sprite，点击+按钮。

4、选中最后一个关键帧，右键Delete。

5、选中第一个关键帧，在Inspector中的Sprite Renderer Component中，将Sprite设置为BirdHero_0..

6、选中第一个关键帧，Ctrl+C，点击左上方的Idle，下拉列表中选择Create New Clip，命名为Flappy，确定之后将会调到Flappy Clip的设置面板，注意左上方Clip的名称。


点击Animation面板，然后Ctrl + V，开启录制(小红点)，选中第一个关键帧，在右方Inspector中设置Sprite为BirdHero_1。

按照同样的方法，新建Clip命名为Die，开启录制，选中第一个关键帧，将Sprite更改为BirdHero_2。完成后，可以切换不同的Clip查看Sprite是否设置正确，确定无误后退出Animation面板，这时Project下的Animations文件夹中会有：
3个Clip和一个Bird Controller。

7、双击Bird Controller进入Animator面板，我们通过该动画状态机面板对刚刚制作的三个Clip进行流程设置。
　在Animator中有三个基本Clip：Any State、Entry、Exit。并且我们可以看到Idle Clip被标注为亮橙色。这是默认状态。启动Animator后，将会由Entry转换到Idle状态，并且一直循环，直到触发了某些条件后将会发生状态转换。
　
　在Animator中不同状态之间的切换过程称为Transition，Transition的创建方法就是选中一个Clip右键拖拽到下一个Clip上即可。点击创建好的Transition后我们可以在右方面板中对其进行相关属性的设置。本案例中我们只需要关注Has Exit Time以及Conditions属性即可。
　· Has Exit Time： 选中后，当前状态会播放完毕再转换到下一个状态；反之，立即切换；
　· Conditions：通过添加Conditions可以设置状态转换的条件。
　
　我们通过设置变量来实现状态之间的转换，变量的转变可以在脚本中实现。
　左上方选择Parameters > 点击+即可添加变量。变量有四种：
　· Float 浮点型：可用于数值判断，比如说大于某某值时转换状态，举个例子，移动速度 站立 > 步行 > 奔跑 > 冲刺；
　· Int 整型：跟Float类似，区别在于精度；
　· Bool 布尔型：只有True和False两个值；
　· Trigger 触发型：每触发一次就会进行状态转换，常见于开关设置等等。
　我们Add了相关的parameter后便可选中Transition并添加Conditions了。
　
　更详细的内容可以去官网查看文档，这里不再赘述。
回到正题，先分析下我们需要的状态转换：
我们希望的功能：
　当点击屏幕后，Bird由Idle转换到Flappy。
　Flappy动画播放完毕后，自动切换回Idle Clip。
　当Bird碰到地板、障碍物后，Bird播放Die。
根据以上描述，我们先设置好Transition以及添加两个Trigger变量分别命名为Die和Flappy。如图：
由于我们希望当Die触发后，立刻播放Die Clip，因此我们选中对应的Transition，取消Has Exit Time的勾选，设置Conditions为Die：

在Idle切换到Flappy的过程中，我们也希望能立即切换，因此选中相关Transition，取消Has Exit Time的勾选，设置Conditions为Flappy：

第三个Transition，由于我们希望在Flappy播放完后自动切换回Idle，因此不需要取消Has Exit Time的勾选，也不需要设置Conditions，因此可以不对他作任何操作。
至此，完成动画Clip的设置，Ctrl+S，关闭Animator窗口，选中Bird，我们可以看到Bird下多了一个Animator的Component，这是在我们创建第一个Clip的时候Unity3d就帮我们自动添加的，其中的Controller就是我们刚刚设置的Controller。

8、接下来我们开始编辑脚本实现Bird的动画效果以及点击Flappy功能。
选中Bird，在Inspector中点击Add Component，输入Bird，创建新的名字为Bird的C# Script。
双击Bird Script进行编辑。a..最后还是在Project中新建一个Scripts文件夹然后把Bird Script拖拽到Scripts文件夹中，Ctrl+S养成良好习惯。
在脚本中我们这一步需要实现的功能是：
· 点击屏幕Bird向上Flappy(我们通过使用一直向左滑动的背景和小鸟向上Flappy制作出飞翔效果，即相对背景，Bird移动了，这是“无限”背景滚动类游戏通用的方法，比如说打飞机。)。
· 不同状态下的Bird 播放不同动画。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Bird : MonoBehaviour {

    public float upperForce = 250f;         // the force add to bird when it flappy.

    private Rigidbody2D rb2d;               // the rigidbody 2d component
    private Animator animator;              // the animator component
    private bool isDead = false;            // mark if bird is dead.

    void Start()
    {
        rb2d = GetComponent ();
        animator = GetComponent ();
    }

    void Update()
    {
        if (Input.GetMouseButtonDown (0) && !isDead) {      // check input and bird's status
            rb2d.velocity = Vector2.zero;
            rb2d.AddForce (new Vector2 (0, upperForce));    // add a upper force
            animator.SetTrigger ("Flappy");                 // change current animation clip to flappy
        }
    }

    void OnCollisionEnter2D()
    {
        rb2d.velocity = Vector2.zero;
        isDead = true;
        animator.SetTrigger ("Die");                        // change current animation clip to Die
    }

}

这是个简单的实现，编辑完成后Ctrl + S，返回Unity3d，运行测试一下吧，如果感觉不顺手可以调整一下upperForce的数值或者调整一下Bird的Rigidbody2D相关数值，直到自己顺手为止。记得Ctrl + S，如果出现Error，请根据错误提示检查你的代码。

下一篇我们将实现剩下的功能~