Unity2S 愤怒的小鸟教程

Unity 2D Flappy Bird Tutorial

Foreword前言

In this Tutorial we will learn how easy it is to make a game like Flappy Bird in Unity. Flappy Bird was released in 2013 and became the most downloaded iOS App in January 2014.

在本教程中，我们将学习在Unity中做一个像Flappy Bird 的游戏是多么的简单。Flappy Bird 在2013年发布后在2014年1月成为iOS应用商店下载量最高的游戏。

The gamedesign is very simple: a bird is supposed to fly horizontally between obstacles, and the player can press a button to make the bird flap and fly upwards. Simple games like that are always perfect for a Tutorial, all we need are 40 lines of code and a few sprites.

游戏非常简单：一个小鸟需要在障碍间水平的飞行，玩家可以通过点屏幕击让小鸟向上飞。像这样的简单游戏非常适合教程，我们仅需要40行代码和一些精灵。

As usual, everything will be explained as easy as possible so everyone can understand it.

像往常一样，我会把步骤描述的尽可能简单，让所有人都可以理解。

Requirements 需求

Knowledge 知识

Our Tutorial does not require any special skills. If you know your way around Unity and heard about GameObjects and Transforms before, then you are ready to go. And if you didn't, don't worry about it too much.

我们的教程不需要任何特殊的技巧，如果你曾经了解Unity并且听说过GameObjects,Transform，那么这些就够了，没有的话也不要太担心。

Feel free to read our easier Unity Tutorials like Unity 2D Pong Game to get used to the engine.

你可以去读一下像 Unity 2D Pong Game这样简单的 Unity教程去学习如何使用这个引擎。

Unity Version 

Unity 版本

Our Flappy Bird Tutorial will use Unity 5.0.0f4. Newer versions should work fine as well, older versions may or may not work. The free version of Unity 5 now comes with all the engine features, which makes it the recommended version.

我们的Flappy Bird 教程使用Unity 5.0.0f4. 新的版本也应该正常运行，老一点的版本可能会不能运行。Unity5的免费版本提供了所有功能，这也是我们推荐的。

Project Setup 工程设置

Let's get to it. We will start Unity and select New Project:

让我们开始吧：打开Unity,然后选择 New Project:

We will name it flappybird, select any location like C:\, select 2D and click Create Project:

把工程名字命名为 flappybird，选择工程的本地地址，例如C:\, 选择2D然后 Create Project:

If we select the Main Camera in the Hierarchy then we can set theBackground Color to a light blue (R=198, G=208, B=230) for the sky color and adjust the Size like shown in the following image:

如果在Hierarchy 选择了 Main Camera, 我们可以设置天空的背景颜色为亮蓝(R=198, G=208, B=230) ，调整尺寸如下图所示的那样。

The Background 背景

We will begin by drawing a very simple sky background in our drawing tool of choice:

在画图工具里画一个简单的天空背景 background 。

Note: right click on the image, select Save As..., navigate to the project's Assets folder and save it in a new Sprites folder.

提示：在工程Assets文件夹下面新建Sprites文件夹， 把新建图片保存到这里。

After saving it, we can select the background in the Project Area:

保存后在工程面板里选中background 。

And then modify the Import Settings in the Inspector:

然后在Inspector面板里面修改 Import Settings 

Note: a Pixels Per Unit value of 16 means that 16 x 16 pixels will fit into one unit in the game world. We will use this value for all our textures, because the Bird will be 16 x 16 pixels, which should end up being 1 unit in the game world.

提示：a Pixels Per Unit 设置16表示一个16x16像素填充unity游戏世界的一个unit单元。我们将会对我们所有的textures使用这个值，因为小鸟是16x16像素，在游戏世界就是1个unit单位。

Alright so let's add the background to the game world by dragging it from the Project Area onto the Main Camera in the Hierarchy:

把Project面板里面的background 拖动到Hierarchy的Main Carema上面，这样就把游戏背景添加到了游戏世界。

So that the background becomes a child of the Main Camera:

background 图片就成了Main Camera的子对象。

Now that the background is a child of the camera, it will always go where the camera goes. Or in other words, the player will always see the background.

background 成为camera的子对象后，会一直跟随相机的移动，也就是说玩家会一直看到背景background 

Note: we could also place several backgrounds next to each other so that there is still a background when the camera moves horizontally, but making it a child of the camera is much easier.

提示：我们也可以放置多个background图片， 一个挨着一个使得相机水平移动的时候可以显示这个背景，但是把它作为camera子对象更容易。

Let's take a look at the Inspector and position the background one unit lower at Y=-1, just so that it fits to the rest of the game later on:

让我们看一下Inspector 面板，设置position的位置Y为-1。

If we press Play then we can already see the background sky:

如果点击Play运行,我们已经可以看到这个天空背景：

There is one more adjustment to be made here. We will add the bird and some obstacles soon, so let's also make sure that the background is really drawn behind everything else. Unity uses the SpriteRenderer'sSorting Layer and Order in Layer properties to decide which parts of a game should be in front of which other parts.

这里我们先要进行几个调整，稍后会加上小鸟和障碍物，先确定背景确实是绘制在最下面。Unity使用SpriteRenderer 的Sorting Layer 和 Order Layer属性决定游戏中各部分的显示顺序。

We will simply set the Order in Layer to -1 so that everything else will be drawn in front of it:

设置background 的Order Layer为-1，这样其它的都会绘制在它前面。

Note: the higher the order, the more it is in the foreground. The lower the order, the more it is in the background.

提示：the order 的数值越大，绘制时也就越靠前，反之会越靠后。

The Ground 地面

Let's also draw some kind of terrain for the ground. We will make it very wide so that there is enough space for our obstacles later:

绘制地面，并确保它足够宽，可以放置多个障碍。

Note: right click on the image, select Save As... and save it in the project'sAssets/Sprites folder.

提示：保存图片到和background 图片相同的Sprites文件夹中。

We will select the ground in the Project Area and then assign the sameImport Settings that we used before:

选中Project面板中的ground图片，在Inspector面板中设置Import Settings参数，和刚才background 图片设置一样。

Afterwards we will drag it from the Project Area into the Hierarchyagain:

完成后，把它从Project中拖动到Hierarchy中。

Note: this time we won't make it a child of the camera.

提示：此次不要使它成为carema的子对象

Let's take a look at the Inspector and position the ground at X=16Y=-6: so that it is below the background and so that most of the area is at the right of the screen:

设置Inspector面板中的position X=16Y=-6

This time we will select a Order in Layer value of 1, so that it will always be in front of the bird and the obstacles later on:

设置Order Layer 的值为 1，这样它就会在一会放置的小鸟和障碍物前面。

Ground Physics  大地的物理设置

The ground should the part of the physics world. Right now it is really just an image in the game world, just a visual effect and nothing more. We want the ground to be like a wall that the bird can collide with, so let's select Add Component->Physics 2D->Box Collider 2D in the Inspector:

大地应该是物理世界的一部分，现在他仅仅只是一张游戏世界中的图片，只是拥有视觉的效果。我们希望大地能够想一个墙那样可以和小鸟碰撞，所以我们需要给大地添加碰撞器组件，Add Component->Physics 2D->Box Collider 2D

Normally we would be done now, but there is one more adjustment to be made here. Later on we will add obstacles to our game (like the green pipes in the original Flappy Bird game), and those obstacles will move upwards and downwards into the ground. The obstacles and the ground will both be part of the physics world, and according to the laws of physics, there can never be two objects at the same place (or in our case, two Colliders).

一般到这里就结束了，但是现在还需要一些设置。稍后我们会为我们的游戏添加可以地面上上下移动障碍物（像Flappy Bird游戏中的绿色管道），障碍物和地面都是物理世界的一部分，根据物理的法则，两个物理不能够进行重叠。

There are several ways to work around this. As usual we will choose the easiest way by creating a new physics Layer that we will use for the ground and the obstacles. Afterwards we will tell Unity to simply ignore collisions in-between that layer.

处理这个问题有几个方法，我们选择最简单的方式。创建一个新的物理层用于放置大地和障碍物，然后让Unity不在那一层中进行碰撞检测

We can create a new layer by selecting Add Layer in the Inspector:

我们可以新建一个Layer通过Inspector->Add Layer

Afterwards we will add one User Layer, let's call it WeirdPhysics:

新建的User Layer 叫做 WeirdPhysics

Now we can select the ground in the Hierarchy again and then assign the WeirdPhysics layer:

现在我们在Hierarchy面板选择ground,把它的层设置为 WeirdPhysics 

Afterwards we select Edit->Project Settings->Physics 2D from the top menu and disable the WeirdPhysics vs. WeirdPhysics collisions in theLayer Collision Matrix:

在上面的菜单Edit->Project Settings->Physics 2D，取消勾选WeirdPhysics 和WeirdPhysics 间的物理碰撞检测

Note: it's very rare that we have to do this in Unity, but our Flappy Bird game is one of those exceptions.

提示：一般在Unity中很少这样操作，但是我们的Flappy Bird游戏需要这样

Now the ground will never collide with any of the obstacles.

现在地面不会和障碍碰撞了

Also if we press Play then we can see the sky and the ground already:

按下Play,我们可以看淡天空和地面已经好了

The Bird

The Bird Image

Alright, let's get to the most important part of our game: the bird. We will begin by drawing a bird flying animation with 4 frames:

好吧，让我们开始游戏最重要的部分：小鸟，先绘制4帧小鸟飞翔的动画

Note: right click on the image, select Save As... and save it in the project's Assets/Sprites folder.

提示：另存在本工程的Assets/Sprites 文件夹下

We will use the following Import Settings for it:

使用下面的导入设置

Our bird image contains several smaller images, hence it's important that we select Multiple as Sprite Mode. Afterwards we can click theSprite Editor button:

小鸟的图片包含多个小的图片，所以选择Sprite Mode为Multiple ，接下来就点击Sprite Editor按钮

In the Sprite Editor we Slice it as a 16 x 16 Grid:

在Sprite Editor，切割出16x16的格子

After pressing the Slice button we can close the Sprite Editor. Unity will ask us if we want to apply the Unimported Import Settings, so let's select Apply.

按下Slice按钮后，关闭Sprite Editor，Unity会询问是否执行Unimported Import Settings，我们选择Apply

Now we can see our 4 slices as children of the bird image in the Project Area:

在Project 面板中可以看到小鸟图片下有切出来的4张

The Bird Animation 小鸟动画

Let's select all the slices and then drag them into the Hierarchy:

选择所有的小鸟切片，把他们拖进Hierarchy面板

Unity knows that we want to create an animation from those slices, which is why it asks us where to save the animation files. We will create a new BirdAnimation folder and then save the animation asfly.anim.

Unity知道我们想要用这些slices去创建一个动画，会询问animation要保存在什么地方，我们新建一个BirdAnimation文件夹，把动画文件保存为asfly.anim

Afterwards we can see two new files in our BirdAnimation folder:

然后可以看到新建的文件出现在BirdAnimation文件夹下

The bird_0 file is the state machine that takes care of animation states and speeds. The second file is the fly animation itself. Let's double click the bird_0 file really quick so that we can see the animation state machine:

bird_0 文件是状态机，可以管理动画的状态速度，第二个文件是动画文件，双击bird_0可以看到状态机

Note: we don't have to worry about the animation states because we only have one animation.

提示：我们不用担心动画的状态，因为只有一个动画

We will click on the fly state and then simply decrease the speed to 0.5in the Inspector:

点击fly状态，设置速度为0.5

And since we only have one animation, we are already done here. If we press Play then we can even see it in action:

我们只有一个动画，按play可以看到它的动作

Bird Physics

Our bird is supposed to be part of the physics world. Let's begin by giving it a Collider, just like we did with the ground. We will selectAdd Component->Physics 2D->Circle Collider 2D in the Inspector:

小鸟也是物理世界的一部分，需要给它添加一个碰撞器，就像对ground做的那样。

Add Component->Physics 2D->Circle Collider 2D

Now everything in the physics world that is supposed to move around will also need a Rigidbody. A Rigidbody takes care of things like gravity, velocity and movement forces. We can add a Rigidbody by selecting Add Component->Physics 2D->Rigidbody 2D in theInspector. We will also enable the Fixed Angle property so that the bird doesn't suddenly start rotating:

现在物理世界中的物体都应该需要一个Rigidbody，Rigidbody管理重力、速度、作用力。我可以在Inspector中添加一个刚体 Add Component->Physics 2D->Rigidbody 2D，并且固定角度不让小鸟旋转

If we press Play then we can already see the Rigidbody's gravity property in action:

按下Play,可以看到刚体的重力效果

The Bird Movement Script

Our bird already looks pretty decent, but it should also fly towards the right at all times, and it should flap its wings to fly upwards if the user presses a button.

我们的小鸟已经看起来相当不错了，但是需要一直往右边飞，同时在玩家按下按键是可以扇动翅膀向上飞

This kind of behavior can be implemented with a Script. Let's select Add Component->New Script in the Inspector, name it Bird and select CSharp as the language. We will also create a new Scripts folder in our Project Area so that we can put the Bird Script into it:

脚本可以实现这样的行为，给小鸟添加脚本组件，Add Component->New Script，命名为Bird,语言选择C#。在Project窗口创建一个Scripts文件夹，把Bird脚本放进去

We can double click the Script in order to open it:

双击打开脚本文件

using UnityEngine;
using System.Collections;

public class Bird : MonoBehaviour {

    // Use this for initialization
    void Start () {
    
    }
    
    // Update is called once per frame
    void Update () {
    
    }
}

We can make the bird fly towards the right at all times by first adding a new speed variable and then using the Rigidbody's velocity property:

添加一个速度变量，使用刚体的velocity 属性让小鸟一直往右边飞

using UnityEngine;
using System.Collections;

public class Bird : MonoBehaviour {
    // Movement speed
    public float speed = 2;

    // Use this for initialization
    void Start () {    
        // Fly towards the right
        GetComponent<Rigidbody2D>().velocity = Vector2.right * speed;
    }
    
    // Update is called once per frame
    void Update () {
    
    }
}

Note: the velocity is exactly the movement direction multiplied by the movement speed.

提示：速度等于方向和运动速率相乘

If we save the Script and press Play then we can see how the bird flies towards the right of the Screen.

保存脚本，按下Play可以看到小鸟飞向屏幕的右边

Now we create a new force variable and then use our Update function to check for key presses. If the user pressed the Space key then we will make the bird fly upwards with the force:

现在创建一个新的表示力的变量，在Update函数中检测按键是否被按下，如果玩家按下空格键，小鸟在力作用下往上飞

using UnityEngine;
using System.Collections;

public class Bird : MonoBehaviour {
    // Movement speed
    public float speed = 2;
    
    // Flap force
    public float force = 300;

    // Use this for initialization
    void Start () {    
        // Fly towards the right
        GetComponent<Rigidbody2D>().velocity = Vector2.right * speed;
    }
    
    // Update is called once per frame
    void Update () {
        // Flap
        if (Input.GetKeyDown(KeyCode.Space))
            GetComponent<Rigidbody2D>().AddForce(Vector2.up * force);
    }
}

If we press Play then we can now make the bird fly upwards:

There is one last thing to do here. We want to restart the game as soon as the bird collided with the ground or with an obstacle. Our bird already has a Collider and a Rigidbody, which means that Unity automatically calls the OnCollisionEnter2D function. All we have to do is actually add it to our Script:

还有最后一项事情，如果小鸟碰到了地面或者障碍物时，游戏需要重启。小鸟已经有了碰撞器和刚体，也意味着Unity能够自动的调用OnColliderEnter2D函数，我们只需要添加到我们的脚本中。

void OnCollisionEnter2D(Collision2D coll) {
    // Restart
    Application.LoadLevel(Application.loadedLevel);
}

Note: Application.LoadLevel can be used to load a Scene.Application.loadedLevel is the currently loaded Scene. Or in other words, we simply restart the current Scene.

提示：Application.LoadLevel 可以用来加载场景。Application.loadedLevel是当前的场景，换句话说就是重启当前的场景。

Camera Follow 相机跟随

Right now the Camera never moves. And since the bird always flies towards the right of the screen, we won't be able to see it for a very long time. We will solve this problem by creating a new Script that makes the Camera follow the bird all the time.

现在相机不能够移动。因为小鸟一直飞向屏幕的右边，我们还不能在屏幕上看到小鸟太长时间。要解决这个问题，我们可以创建一个新的脚本让相机跟随着小鸟。

Let's select the Main Camera in the Hierarchy and then click on Add Component->New Script, name it CameraFollow and select CSharp as the language. We will also move it into our Scripts folder and then open it:

在Hierarchy窗口选择Main Camera，然后Add Component->New Script，命名为CameraFollow,语言是C#.脚本移动到Scripts文件夹，打开。

using UnityEngine;
using System.Collections;

public class CameraFollow : MonoBehaviour {

    // Use this for initialization
    void Start () {
    
    }
    
    // Update is called once per frame
    void Update () {
    
    }
}

We won't need the Start function this time, so let's remove it:

这里不需要Start函数，可以删掉

using UnityEngine;
using System.Collections;

public class CameraFollow : MonoBehaviour {
    
    // Update is called once per frame
    void Update () {
    
    }
}

Let's add a public Transform variable to specify which target to follow:

添加公共Transform变量指定跟随的目标

using UnityEngine;
using System.Collections;

public class CameraFollow : MonoBehaviour {
    // The Target
    public Transform target;
    
    // Update is called once per frame
    void Update () {
    
    }
}

Note: we can set that target in the Inspector later on.

可以稍后在Inspector设置

Afterwards we will simply use the Update function to always set the Camera's X position to the target's X position:

利用Update函数去持续更新相机的X坐标和Y坐标

// Update is called once per frame
void Update () {
    transform.position = new Vector3(target.position.x,
                                     transform.position.y,
                                     transform.position.z);
}

Note: the X position is the horizontal position.

提示：X坐标是水平位置

Now our Script is done. However it's usually considered best practice to do Camera movement after everything else in the Scene was updated. We will simply change our Update function to LateUpdate, just to have it perfectly smooth:

现在脚本完成了，一般认为最好在场景中所有的对象在Update函数中更新以后再调整摄像机的位置，所以我们把刚才的Update中的内容移动到LateUpdate中，这样可以使游戏更加的流畅

void LateUpdate () {
    transform.position = new Vector3(target.position.x,
                                     transform.position.y,
                                     transform.position.z);
}

If we save the Script then we can take a look at the Inspector and drag the bird_0 GameObject from the Hierarchy into the Script's Target slot:

保存脚本后可以转到Inspector面板，把Hierarchy中的bird_0对象拖拽到脚本的 Target 槽中。

If we press Play then we can now see how the Camera automatically follows the bird:

The Obstacles

The Obstacle Image

Right now our game is not very hard. We can change that by adding some obstacles. Let's draw one:

现在游戏还不是太难，我们可以添加一些障碍。

Note: right click on the image, select Save As... and save it in the project'sAssets/Sprites folder.

We will use the following Import Settings for it:

使用下面的导入设置

And then drag it from the Project Area into the Hierarchy in order to create a GameObject from it:

Project中的obstacle拖拽到Hierarchy 中，此时会自动创建一个GameObject

We will position it at X=3, Y=-5:

Here is how it looks in the Scene:

Obstacle Physics

The obstacle should be part of the physics world again. The bird should be able to collide with it, so let's select Add Component->Physics 2D->Box Collider 2D in the Inspector:

障碍物也是物理世界的一部分，小鸟应该可以进行碰撞，Add Component->Physics 2D->Box Collider 2D

We talked about how the obstacles might end up inside the ground and how we don't want the two to collide with each other, so let's make it part of our WeirdPhysics layer, too:

我们讨论过障碍物的底端在大地上，我们不希望障碍物和土地进行碰撞，所以把obstacle也设置为WeirdPhysics层

Note: since we disabled collisions in-between our WeirdPhysics layer, the ground will never collide with an obstacle. The bird can still collide with the ground and with the obstacle because it has a different layer (the default one).

提示：现在WeirdPhysics 层中的两者之间不会进行碰撞，大地和障碍物不会碰撞，但是小鸟能够和它们碰撞，因为小鸟和他们在不同的层中

Alright so some of the obstacles are also supposed to move up and down. Everything in the physics world that is supposed to move will need a Rigidbody, so let's select Add Component->Physics 2D->Rigidbody 2D in the Inspector again. We don't want it to be affected by gravity, so let's set the Gravity Scale to 0. We also don't want it to rotate, so let's also enable Fixed Angle again:

障碍物希望可以上下移动，物理世界中的一切事物都应该有一个刚体， Add Component->Physics 2D->Rigidbody 2D 

我们不希望它受重力的影响，所以设置Gravity为0，同时设置Fixed Angle不让它旋转

If we press Play and let the bird fly against the obstacle then we can see how the level restarts:

Obstacle Movement

Alright so some of the obstacles are supposed to move up and down. This kind of behavior can be implemented with a Script again. Let's select Add Component->New Script, name it Obstacle, move it into our Scripts folder and then open it:

障碍物需要上下移动，这可以通过脚本实现。添加脚本组件Add Component->New Script，移动到Scripts文件夹并打开

using UnityEngine;
using System.Collections;

public class Obstacle : MonoBehaviour {

    // Use this for initialization
    void Start () {
    
    }
    
    // Update is called once per frame
    void Update () {
    
    }
}

There are many different ways to make the obstacle move up and down all the time. As usual, we will use the easiest way.

有许多的方法让障碍物持续的上下移动，我们使用最简单的方式

We will begin by adding a speed variable and then setting the Rigidbody's velocity so that the obstacles move upwards with the speed:

添加一个速度的变量，然后设置刚体的速度，这样障碍物就可以按照速度向上移动

using UnityEngine;
using System.Collections;

public class Obstacle : MonoBehaviour {
    // Movement Speed (0 means don't move)
    public float speed = 0;

    // Use this for initialization
    void Start () {
        // Initial Movement Direction
        GetComponent<Rigidbody2D>().velocity = Vector2.up * speed;    
    }
    
    // Update is called once per frame
    void Update () {
    
    }
}

Now the trick is to use Unity's InvokeRepeating function to reverse that velocity every few seconds:

使用InvokeRepeating函数每个一段时间反转速度

using UnityEngine;
using System.Collections;

public class Obstacle : MonoBehaviour {
    // Movement Speed (0 means don't move)
    public float speed = 0;
    
    // Switch Movement Direction every x seconds
    public float switchTime = 2;

    void Start() {
        // Initial Movement Direction
        GetComponent<Rigidbody2D>().velocity = Vector2.up * speed;
        
        // Switch every few seconds
        InvokeRepeating("Switch", 0, switchTime);
    }
    
    void Switch() {
        GetComponent<Rigidbody2D>().velocity *= -1;
    }
}

Note: the Switch function simply reverses the Rigidbody's velocity. We then use InvokeRepeating to tell Unity to call that function every few seconds. We also added a switchTime variable to specify the time in which Switch should be called.

提示：转换函数简单的反转刚体的速度，然后我们用InvokeRepeating函数去让Unity每隔一段时间调用这个函数。我们同时也添加了一个转换时间变量制定间隔的时间

Let's save the Script and set the obstacle's Speed to 1:

Note: if we don't want an obstacle to move then we can either set it's Speed to 0 or disable the Script.

如果不希望障碍物移动可以设置速度为0或者关闭脚本

If we press Play then we can see our obstacle moving up- and downwards:

Adding more Obstacles

Let's right click the obstacle in the Hierarchy, select Duplicate and move it a bit further towards the right:

右键Hierarchy窗口中的obstacle,选择Duplicate 并向右移动一些距离

We will also duplicate one and then set the Scale.Y property to -1:

This way it looks properly when positioning it upside-down:

We can add as many obstacles with as many different speed and switchTime properties as we want:

我们可以添加多个障碍物，社设置成不同的速度和转换时间

Summary

We just learned how incredibly easy it is to make a Flappy Bird game in Unity. We used some very powerful Unity features like Physics, Mecanim (for the animation), Layers, the Sprite Editor and Scripting. As usual now it's up to the reader to make the game fun and more difficult.

我们学习了如何在Unity中非常简单的制作一个Flappy Bird游戏，我们使用了许多强大的Unity功能，比如物理、动画、层、精灵编辑器以及脚本，像以往一样，现在轮到你去把游戏做的更好玩、更有难度。

The Project Files can be download here.