noobtuts

Unity 2D Bejeweled Tutorial

Unity 2D Bejeweled

Foreword

Let's make a Bejeweled style game in Unity. For those who never heard of it, Bejeweled is a match-three game that was released in 2001 and later copied as the popular Candy Crush game (which pretty much makes this a Unity Candy Crush Tutorial, too).

We will focus on the core mechanics of the game. We will implement a 8x8 grid of Gems that can be swapped around. The goal is to always match at least three gems of the same type either horizontally or vertically.

The game will be implemented with less than 140 lines of code. And 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, Prefabs and Transforms before, then you are ready to go. And if you didn't, don't worry about it too much.

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

Unity Version

Our Bejeweled 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.

Project Setup

Alright, let's start developing. We will start Unity and select New Project:
Unity New Project

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

If we select the Main Camera in the Hierarchy then we can set the Background Color to black, adjust the Size and the Position like shown in the following image:
Camera Properties

The Gems

The Blue Gem

Let's create the Gems first. We will begin by drawing a 16 x 16 image of a blue Gem, just like this one:
Blue Gem
Note: right click on the image, select Save As..., navigate to the project's Assets folder and save it in a new Sprites folder.

Now we can select the image in the Project Area:
Blue Gem select in Project Area

And then modify the Import Settings in the Inspector:
Blue Gem 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 Gems. The other values like Filter Mode are mostly to balance the compression vs. the quality.

Creating the GameObject

With the Import Settings set, we can now drag the Gem from the Project Area into the Scene, so that it's part of the game world:
Drag Blue Gem into Scene
Note: the Gem image in our Project Area is just an image, nothing more. But once we drag it into the Scene, it becomes a GameObject with a position, a rotation, a scale, a renderer and all kinds of other components that we can add to it.

Creating the Gem Script

We will need all kinds of custom behaviours for our Gems. Custom Behaviors and most of the game logic are usually implemented with a Script. We can add one to our blue Gem by selecting Add Component->New Script, name it Gem and select CSharp for the language:
Create Gem Script

As result, we can see that the Script was added to our Gem:
Blue Gem with default Gem Script

We can also see the Script in the Project Area. Let's move it into a new Scripts folder, just to keep things clean:
Gem Script in Project Area

Afterwards we double click the Gem Script in order to open it:

using UnityEngine;
using System.Collections;

public class Gem : MonoBehaviour {

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

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

using UnityEngine;
using System.Collections;

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

Let's add a function that allows us to find out if two Gems are of the same type. If we would just compare two blue Gems with ==, they would never be equal because they are different GameObjects. We only want to know if they are of the same Gem type, or in other words, if they use the same Sprite:

public bool sameType(Gem other) {
    return GetComponent<SpriteRenderer>().sprite == other.GetComponent<SpriteRenderer>().sprite;
}

Note: if this is still unclear, imagine two Gems in a row. If we would compare them with == then they are unequal because they are different GameObjects on different positions and so on. However if we would compare them with our sameType function then they would be equal if they were both blue gems, or both red gems. They would be unequal if one of them was blue and another one was red. And whenever three Gems in a line are equal, then they are a match and can be removed from the game.

Let's also save the Script so that Unity can work with it.

Creating the Gem Prefab

We don't really want the blue Gem to be in the Scene from the beginning. Instead we want to be able to load it into the Scene whenever we want. Let's create a Prefab, or in other words: let's save the Gem in our Project Area.

All we have to do is drag it from the Hierarchy into a new Prefabs folder in our Project Area:
Create blue Gem Prefab

Afterwards we can right click the blue Gem in the Hierarchy and select Delete, so it's not in the game world anymore. But since we now have a Prefab, we can just drag it back into the Scene whenever we want, or use the Instantiate function in a Script.

The Red Gem

We will need a few more Gems in our game. With the Gem Script already created, it's now really easy to create more Gem Prefabs.

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

We will use the same Import Settings that we used for the blue Gem:
Red Gem Import Settings

Now we can drag it from the Project Area into the Scene again, so that Unity creates a GameObject from it. Afterwards we select Add Component->Scripts->Gem in the Inspector:
Red Gem in Inspector

We will also create a Prefab from the red Gem, so let's just drag it from the Hierarchy into the Prefabs folder:
Red Gem Prefab

Afterwards we can delete it from the Hierarchy again, because we can now load the Prefab any time.

The other Gems

We will now repeat this workflow for the rest of the Gems:
Brown Gem Green Gem Pink Gem White Gem Yellow Gem

The result is a Prefabs folder full of different Gems:
All Gem Prefabs

The Grid

Alright, now that we have all the Gem Prefabs, we can spawn them into the game world. We will begin by creating a Grid Script that takes care of things like spawning, finding matches and solving matches.

It's only important that our Grid Script is in the game, it is not important what it is attached to. So let's just select the Main Camera and click on Add Component->New Script, select CSharp and name it Grid:
Camera with Grid Script
Note: we attached it to the Main Camera because the Camera is always in the game, and we need the Script to be always in the game, too.

We will also move the Script into the Scripts folder, just to keep things clean:
Grid in Project Area

Let's double click the Grid Script in order to open it:

using UnityEngine;
using System.Collections;

public class Grid : MonoBehaviour {

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

We can delete the Start function, because we won't need it:

using UnityEngine;
using System.Collections;

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

The Grid Size

Let's add a width and height variable to control the amount of horizontal and vertical Gems later on:

using UnityEngine;
using System.Collections;

public class Grid : MonoBehaviour {
    // Grid size
    public static int w = 8;
    public static int h = 8;
   
    // Update is called once per frame
    void Update () {
   
    }
}

Note: w means width and h means height. We will use 8 for both, so that in the end we get a Grid of 8 x 8 Gems. We made the two variables public static so that they can be accessed from any other Script by simply writing Grid.w or Grid.h.

. . .

Premium Tutorial

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

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