This tutorial is meant for educational purposes only to showcase how to build certain types of games. Please respect the copyrights/trademarks of others!

Update: If you’re trying the downloaded game in Unity 5, uncheck the “Apply Root Motion” on the Animator component on the flappy GameObject and everything should work like a charm.

Unless you’ve been living in a cave or visiting outer space, you have certainly played Flappy Bird, one of the most successful games for mobile devices. Hence, I decided to give it a shot and recreate it using Unity. Needless to mention that all graphics and sounds found in the tutorial are used only for educational purposes and do not intend to harm any intellectual property at all circumstances. The sprite sheet used was found here http://www.spriters-resource.com/mobile/flappybird/sheet/59894/  whereas the sounds were found here: https://www.sounds-resource.com/mobile/flappybird/sound/5309/

Game code was written in Visual Studio (check the free Community edition here). For debugging purposes, don’t forget to check the Visual Studio tools for Unity here.

So, let’s start  with the small tutorial! This game’s development has many aspects, we’ll attempt to touch all of them one by one. First of all, we used Unity’s spritesheet editor to “slice” the spritesheet and get references to specific sprites

Then, we created a small animation to simulate the flight course of the bird (this can be easily accomplished if you drag-drop the relevant sprites into the scene).

Now, let’s take a more detailed look at our scene. We have various objects made children of our perspective camera and the Flappy bird.

The Background is a Sprite GameObject which has a RandomBackgroundScript attached. We provide the two backgrounds from our spritesheet as parameters.

public class RandomBackgroundScript : MonoBehaviour {

	// Use this for initialization
	void Start () {
        (GetComponent() as SpriteRenderer).sprite = Backgrounds[Random.Range(0, Backgrounds.Length)];
	}

	// Update is called once per frame
	void Update () {

	}

    public Sprite[] Backgrounds;
}

The Ceiling (not visible during the game!) is a simple quad equipped with a BoxCollider2D component that basically prevents our bird from leaving our gameplay screen.

The Score is a GameObject that holds a reference to the ScoreManagerScript which contains score-handling code. The Script is provided the sprites for our numbers. It starts with a single sprite enabled (Units) and two other Sprites disabled, specifically Tens and Hundreds, which are activated when the player’s score is larger than 10 and 100, respectively. It also stores reference to our sprite digits.

In order to save performance, the sprite/score calculation is achieved if and only if the score has changed from the previous update call. Then, the respective sprites are enabled and the relevant score is shown.

	void Update () {

        if (previousScore != Score) //save perf from non needed calculations
        {
            if(Score = 10 && Score = 100)
            {
                (Hundreds.gameObject as GameObject).SetActive(true);
                Hundreds.sprite = numberSprites[Score / 100];
                int rest = Score % 100;
                Tens.sprite = numberSprites[rest / 10];
                Units.sprite = numberSprites[rest % 10];
            }
        }

	}

The IntroGUI GameObject shows the sprites of the start screen whereas the DeathGUI (which is disabled at the start of the game) shows the sprites of the death screen.

Let’s check the PipeColunnPrefab, which is identical to the PipeColumnPrefab2 with some sprite differences. The prefab is made by two sprites that are kinematic rigidbodies and a triggered BoxCollider2D. Both are tagged as “Pipe”. Plus, between the two pipes there is an empy GameObject with another BoxCollider2D, which is tagged as “pipeblank”. One can easily make out that when the bird hits the pipes, the player will lose whereas when it hits the “pipeblank” the score will increase by 1.

The Camera has a CameraFollow script attached that gets a reference to the Flappy bird transform. The Update script allows the Camera to update its position based on the bird’s position, slightly moved to the left. It’s customary for infinite runner games to have the camera not in the center but a bit left, in order to have more space on the right so that the player encounters incoming obstacles/blanks/whatever early enough (in our case, the pipes).

The Floor GameObject holds 2 sprites of the floor, has a BoxCollider 2D and a FloorMove script and is tagged as “Floor”. When the first floor moves too much to the left, the script makes the object move to the right, to simulate that the bird is moving to the right. You may notice while playing that the “fix” of the floor movement is somewhat clumsy. One could work that one out with the –3.9f value modification. For a better solution, I attempted to utilize mainTextureOffset for smoother scrolling, but it is not supported by the SpriteRenderer. This would require to have the floor sprite in another file, import it in Unity as a Texture and set the mainTextureOffset. This can be done but I felt that it was too much for the purposes of the tutorial. If you have a better solution, sound off in the comments section!

    void Update()
    {
        if (transform.localPosition.x < -3.9f)
        {
            transform.localPosition = new Vector3(0, transform.localPosition.y, transform.localPosition.z);
        }
        transform.Translate(-Time.deltaTime, 0, 0);
    }

The SpawnerObject GameObject has the SpawnerScript which in turn has the duty of spawning the pipe prefabs. We provide the two prefabs as parameters plus a minimum and maximum time for the spawn. Let’s check the code!

First, we randomly select the prefab that we’ll continuously instantiate throughout our game. Then, we use the Spawn method which checks for the game state (more on that later). If we are in the playing state, we Instantiate a new pipe, on a random point at the y axis (to simulate the pipes’ height being differently set) and then we call the Spawn method at a later random time (via use of the Invoke method). Easy enough?

public class SpawnerScript : MonoBehaviour
{

    // Use this for initialization
    void Start()
    {
        SpawnObject = SpawnObjects[Random.Range(0, SpawnObjects.Length)];
        Spawn();
    }

    void Spawn()
    {
        if (GameStateManager.GameState == GameState.Playing)
        {
            //random y position
            float y = Random.Range(-0.5f, 1f);
            GameObject go = Instantiate(SpawnObject, this.transform.position + new Vector3(0, y, 0), Quaternion.identity) as GameObject;
        }
        Invoke("Spawn", Random.Range(timeMin, timeMax));
    }

    private GameObject SpawnObject;
    public GameObject[] SpawnObjects;

    public float timeMin = 0.7f;
    public float timeMax = 2f;
}

The PipeDestroyer GameObject does the job of destroying (and thus, saving performance and memory) the pipes that our bird surpasses. The script code destroys the parent of the Pipe or Pipeblank, i.e. the entire prefab.

    class PipeDestroyerScript : MonoBehaviour
    {
        void OnTriggerEnter2D(Collider2D col)
        {
            if (col.tag == "Pipe" || col.tag == "Pipeblank")
                Destroy(col.gameObject.transform.parent.gameObject); //free up some memory
        }
    }

Before we dive in to the Flappy script, let’s take a look at the self-documented code of the GameState class

public enum GameState
{
    Intro,
    Playing,
    Dead
}

public static class GameStateManager
{
    public static GameState GameState { get; set; }

    static GameStateManager ()
    {
        GameState = GameState.Intro;
    }

}

The Flappy Bird is a Rigidbody2D, has a pretty basic Circle Collider and passes some parameters to the Flappy Script.

Onto the biggest script of our Game, the FlappyScript!

In order to move our Bird to the right, we use this method

    void MoveBirdOnXAxis()
    {
        transform.position += new Vector3(Time.deltaTime * XSpeed, 0, 0);
    }

On the released game, one thing to notice is that during gameplay, the bird begins to look downwards as it falls and looks up when jumping. Consequently, the bird has two states, one going up and one going down.

    FlappyYAxisTravelState flappyYAxisTravelState;

    enum FlappyYAxisTravelState
    {
        GoingUp, GoingDown
    }

We use the below method to make sure that the Flappy bird always has the proper rotation on the z axis.

    private void FixFlappyRotation()
    {
        if (GetComponent().velocity.y > 0) flappyYAxisTravelState = FlappyYAxisTravelState.GoingUp;
        else flappyYAxisTravelState = FlappyYAxisTravelState.GoingDown;

        float degreesToAdd = 0;

        switch (flappyYAxisTravelState)
        {
            case FlappyYAxisTravelState.GoingUp:
                degreesToAdd = 6 * RotateUpSpeed;
                break;
            case FlappyYAxisTravelState.GoingDown:
                degreesToAdd = -3 * RotateDownSpeed;
                break;
            default:
                break;
        }
        //solution with negative eulerAngles found here: http://answers.unity3d.com/questions/445191/negative-eular-angles.html

        //clamp the values so that -90<rotation<45 *always*
        birdRotation = new Vector3(0, 0, Mathf.Clamp(birdRotation.z + degreesToAdd, -90, 45));
        transform.eulerAngles = birdRotation;
    }

[Self note: this thread might contain a better solution: http://forum.unity3d.com/threads/transform-lookat-or-quaternion-lookrotation-on-1-axis-only.36377/]

While on the playing state, we give a boost on the bird each time the user clicks on taps the screen.

    void BoostOnYAxis()
    {
        GetComponent().velocity = new Vector2(0, VelocityPerJump);
        GetComponent().PlayOneShot(FlyAudioClip);
    }

We use this method to get if the user touched or clicked, FYI we could also use Input.GetButtonDown(“Fire1”) that works for both touch and mouse.

    bool WasTouchedOrClicked()
    {
        if (Input.GetButtonUp("Jump") || Input.GetMouseButtonDown(0) ||
            (Input.touchCount > 0 && Input.touches[0].phase == TouchPhase.Ended))
            return true;
        else
            return false;
    }

On the FixedUpdate method, we give the bird a bit of a boost on the Y axis each time the bird starts to drop(to simulate up and down movement). This is accomplished in this way (even though as I’m writing this I’m quite sure that a Sin position transformation could work).

    void FixedUpdate()
    {
        //just jump up and down on intro screen
        if (GameStateManager.GameState == GameState.Intro)
        {
            if (GetComponent().velocity.y < -1) //when the speed drops, give a boost
                GetComponent().AddForce(new Vector2(0, GetComponent().mass * 5500 * Time.deltaTime)); //lots of play and stop
                                                        //and play and stop etc to find this value, feel free to modify
        }
        else if (GameStateManager.GameState == GameState.Playing || GameStateManager.GameState == GameState.Dead)
        {
            FixFlappyRotation();
        }
    }

Floor is a non-trigger collider so we use the OnCollision2D method that sets the game as over

    void OnCollisionEnter2D(Collision2D col)
    {
        if (GameStateManager.GameState == GameState.Playing)
        {
            if (col.gameObject.tag == "Floor")
            {
                FlappyDies();
            }
        }
    }

whereas our pipes prefab is made of trigger colliders, thus we use the OnTriggerEnter2D method

    void OnTriggerEnter2D(Collider2D col)
    {
        if (GameStateManager.GameState == GameState.Playing)
        {
            if (col.gameObject.tag == "Pipeblank") //pipeblank is an empty gameobject with a collider between the two pipes
            {
                GetComponent().PlayOneShot(ScoredAudioClip);
                ScoreManagerScript.Score++;
            }
            else if (col.gameObject.tag == "Pipe")
            {
                FlappyDies();
            }
        }
    }

The Flappy dies method sets the proper game state, activates the DeathGUI and plays the death sound

    void FlappyDies()
    {
        GameStateManager.GameState = GameState.Dead;
        DeathGUI.SetActive(true);
        GetComponent().PlayOneShot(DeathAudioClip);
    }

Last but not least, we’ll see the Update method!

• The Escape key is bound to the Back Windows Phone key, so we must handle it. We could (and should!) display a message here “Do you want to exit the game” and pause it, for a better user experience. We do not want the user to press the back key by mistake when his score is huge, right?
• On the intro state, we just move the bird. On Tap we give the bird a boost, change the state, deactivate the introGUI and reset the score
• On the playing state, we move the bird, and we boost it on the y axis
• On the dead state, we do a Physics.OverlapPoint to check if the user has pressed on the restart button on the DeathGUI. If so, we reset the game state and reload the scene, in order for the game to begin again.

    void Update()
    {
        //handle back key in Windows Phone
        if (Input.GetKeyDown(KeyCode.Escape))
            Application.Quit();

        if (GameStateManager.GameState == GameState.Intro)
        {
            MoveBirdOnXAxis();
            if (WasTouchedOrClicked())
            {
                BoostOnYAxis();
                GameStateManager.GameState = GameState.Playing;
                IntroGUI.SetActive(false);
                ScoreManagerScript.Score = 0;
            }
        }

        else if (GameStateManager.GameState == GameState.Playing)
        {
            MoveBirdOnXAxis();
            if (WasTouchedOrClicked())
            {
                BoostOnYAxis();
            }

        }

        else if (GameStateManager.GameState == GameState.Dead)
        {
            Vector2 contactPoint = Vector2.zero;

            if (Input.touchCount > 0)
                contactPoint = Input.touches[0].position;
            if (Input.GetMouseButtonDown(0))
                contactPoint = Input.mousePosition;

            //check if user wants to restart the game
            if (restartButtonGameCollider == Physics2D.OverlapPoint
                (Camera.main.ScreenToWorldPoint(contactPoint)))
            {
                GameStateManager.GameState = GameState.Intro;
                Application.LoadLevel(Application.loadedLevelName);
            }
        }

    }

Thanks for reading! I promised the source code, so here it is! Check the project on GitHub https://github.com/dgkanatsios/FlappyBirdStyleGame