noobtuts

Unity 2D Angry Birds Tutorial

Unity 2D Angry Birds

Foreword

Angry Birds was released in December 2009 and thanks to its highly addictive gameplay it soon became the most successful mobile game of all time.

In this Tutorial we will implement a Angry Birds clone in Unity. The most complex part of the game is the physics system, but thanks to Unity we won't have to worry about that too much. Using Unity will make it so easy that we will only need about 100 lines of code!

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

Here is a preview of the final game:
Unity Angry Birds

Requirements

Knowledge

Our Tutorial does not require any special skills. If you know your way around Unity and heard about GameObjects, Prefabs and Transforms before, then you are ready to go.

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

Unity Version

In this Tutorial we 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.

Project Setup

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

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

Afterwards we can select the Main Camera in the Hierarchy and then set the Background Color to a friendly blue tone (red=187, green=238, blue=255) and adjust the Size and the Position like shown in the following image:
Camera Properties

The Ground

The Ground Sprite

In order to prevent Copyright issues we can't use the original Angry Birds graphics in this Tutorial. Instead we will draw our own Sprites and make them look similar to the original game.

Let's start by drawing the ground with our drawing tool of choice:

After saving it into our Project, we can select it in the Project Area:
Ground in Project Area

And then modify the Import Settings in the Inspector:
Ground Import Settings
Note: a Pixels to 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. We chose 16 because the bird will have a size of 16 x 16 pixels later on and we want it to have the size of 1 unit in the game world.

Alright, now we can drag the ground image from the Project Area into the Scene:
Drag Ground into Scene

Let's take a look at the Inspector and position the ground at (0, -2) so that everything above y=0 is not part of the ground:
Ground Position

Ground Physics

Right now the ground is only an image, nothing more. It's not part of the physics world, things won't collide with it and can't stand on top of it. We will need to add a Collider to make it part of the physics world, which means that things will be able to stand on top of it instead of falling right through it.

We can add a Collider to it by selecting Add Component->Physics 2D->Box Collider 2D in the Inspector:
Ground Collider

The invisible Borders

We will add three borders around the level to make sure that things won't just fall out of it. Let's select GameObject->Create Empty from the top menu and then rename it to borders in the Inspector:
Borders renamed

We will set its position to (0, 0):
Borders positioned

Now we will add some kind of invisible area to the left, right and top of our level. And whenever something enters that area then it should simply be destroyed. This kind of behavior can be implemented with a Trigger, which is pretty much just a Collider that receives collision info but does not collide with anything.

We can add a Trigger by selecting Add Component->Physics 2D->Box Collider 2D in the Inspector and then enabling the Is Trigger option. We will also adjust its size and center so it will be positioned at the left of our level:
Borders with first Collider

Afterwards we can add two more triggers for the right and top sides of our level:
Borders with all Colliders

If we take a look in the Scene then we can see how the Triggers are nicely aligned around our level:
Borders in Scene

Now we still have to make sure that whatever enters the borders will be destroyed immediately. This kind of behavior can be implemented with a Script. We can add a Script to the borders by selecting Add Component->New Script in the Inspector. We will name it Borders and select CSharp as the language:
Create Borders Script

Unity then creates a new Script, stores it in our Project Area and adds it to the borders GameObject. We can even see it in the Inspector now:
Borders Script in Inspector

Let's also move the Script into a new Scripts folder, just to keep things clean:
Borders Script in Project Area

Let's double click the Script to open it:

using UnityEngine;
using System.Collections;

public class Borders : MonoBehaviour {

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

We won't need the Start or the Update function, so let's remove them. Instead we will use the OnTriggerEnter2D function that will automatically be called by Unity whenever something enters one of the border triggers:

using UnityEngine;
using System.Collections;

public class Borders : MonoBehaviour {

    void OnTriggerEnter2D(Collider2D co) {

    }
}

And in this function we will simply Destroy whatever enters the Trigger:

using UnityEngine;
using System.Collections;

public class Borders : MonoBehaviour {

    void OnTriggerEnter2D(Collider2D co) {
        Destroy(co.gameObject);
    }
}

After saving the Script, our borders are finished. We will see later on that if we try to fire a bird outside of the level, it will simply disappear.

The Clouds

We will take a few extra minutes to add clouds to the background in order to make the level look better. As usual we will begin by drawing one:

Let's select it in the Project Area and then modify the cloud's Import Settings in the Inspector:
Cloud Import Settings

Now all that's left for us to do is to drag it from the Project Area into the Scene a few times and position each cloud where we want it to be:
Clouds ingame
Note: by just using a few repeating patterns and some very colors we can make the level look pretty good without much effort.

The Slingshot

The Slingshot Image

A Slingshot will spawn new birds and allow the user to fire them into the level. As usual we will begin by drawing the sprite:
Slingshot
Note: right click on the image, select Save As... and save it in the project's Assets/Sprites folder.

Here are the Import Settings:
Slingshot Import Settings

Later on we will create a Script that spawns a new bird at the slingshot's position, or to be exact at the slingshot's Pivot. We will want to spawn the bird at the top of the slingshot instead of the center, this is why we set the Pivot to Top in the Import Settings.

The following image shows the difference between Center and Top:
Slingshot Pivots

Note: if we set the Pivot to Center then transform.position is the point at the center of the slingshot. If we set the Pivot to Top, then transform.position is the point at the top of the slingshot.

Alright, now with the Pivot set to Top we can drag the Slingshot into the Scene to the position (-22, 3):
Slingshot positioned

The Spawn Script

As mentioned before, our Slingshot is supposed to spawn the birds. To be exact, it should spawn one in the beginning, then wait for the user to fire it and then spawn another one as soon as all the physics calculations are finished (when nothing moves anymore).

We can implement such behavior with Scripting. Let's select the Slingshot in the Hierarchy and then click on Add Component->New Script in the Inspector.

. . .

Premium Tutorial

Enjoyed this preview? Become a Premium member and access the full Unity 2D Angry Birds Tutorial!

All Tutorials. All Source Codes & Project Files. One time Payment.
Get Premium today!