Quickly Learn to Create Isometric Games Like Clash of Clans or AOE

Objective

With the advancement of technology in computer games, 3D games are becoming very common. But years back when there was no support for 3D elements, it was quite hard to develop 3D games but solution found at that time was an Isometric view, of 2D elements.

Top 10 Most Popular Isometric Games:

Let's see what we are going to make:

Step 1 What is Isometric view?

isometric

Step 2 Issues while Developing Isometric Games in Unity

You might face some of the following issues while Developing Isometric Games in Unity:

Step 3 Then How to Develop Isometric Games in Unity?

While researching for this, I checked a lot of tools from Unity Asset Store. But the one, which I really found impressive was the asset called Ultimate Isometric Toolkit

Step 4 Overview of Ultimate Isometric Toolkit

Here is an overview of Ultimate Isometric Toolkit:

Let us understand this Toolkit with a very simple example

Step 5 Isometric View Example

We will try to understand following things from this example:

Let's get started.

Step 6 Create a simple Isometric Level

This is how you can create Isometric Level:

Step 7 Understanding LevelGenerator

Let us now understand LevelGenerator:

Set these properties as shown in the Following image (click to enlarge):

levelgenerator

Note

This will create a plane like in the following picture:

create-plane-picture

Now If you check, each tile (gameobject) created, will have two scripts attached to it

TIP: Do not forget to add IsoCollider and IsoObject while creating prefab for the map

We have created something like this for the demo:

gridwithborder

Tip: You can also manually create the boundary but it will be time-consuming. So, here I have made some modifications in the GenericGridMap script of Ultimate Isometric Toolkit for creating Boundary as per my need.

creating-scene

This shows how easy it is to create an isometric map, using this tool. We do not have to worry about all the sorting algorithms at all. This tool takes care of all and allows us to concentrate on the core functionality of the game.

Step 8 Moving an object in the current map

Let us create a script for translation/movement of an object on the isometric map. Attach this

CarController script on the prefab of the car.

CarController Script:

public class CarController : MonoBehaviour
{
    public float speed = 10;
    public SpriteRenderer spriteRenderer;
    public Sprite carSpriteNorth;
    public Sprite carSpriteSouth;
    public Sprite carSpriteWest;
    public Sprite carSpriteEast;
    public GameObject explisionPrefeb;
    private IsoDirection currentDirection;	
    private Vector3 targetPosition;	

    void Start()
    {
        currentDirection = IsoDirection.North;
        spriteRenderer.sprite = carSpriteNorth;
    }

    void Update()
    {
        if (!GameManager.Instance.isGameRunning)
            return;

        //North
        if (Input.GetKeyDown(KeyCode.UpArrow))
        {
            currentDirection = IsoDirection.North;
            spriteRenderer.sprite = carSpriteNorth;
        }
        //South
        else if (Input.GetKeyDown(KeyCode.DownArrow))
        {
            currentDirection = IsoDirection.South;
            spriteRenderer.sprite = carSpriteSouth;
        }
        //West
        else if (Input.GetKeyDown(KeyCode.LeftArrow))
        {
            currentDirection = IsoDirection.West;
            spriteRenderer.sprite = carSpriteWest;
        }
        //East
        else if (Input.GetKeyDown(KeyCode.RightArrow))
        {
            currentDirection = IsoDirection.East;
            spriteRenderer.sprite = carSpriteEast;
        }

        targetPosition = Isometric.vectorToIsoDirection (currentDirection);
       transform.Translate (targetPosition * Time.deltaTime * speed);
    }


    void OnCollisionEnter(Collision other)
    {
        if (other.gameObject.CompareTag("Finish") && GameManager.Instance.isGameRunning)
        {
            spriteRenderer.sprite = null;
            Instantiate(explisionPrefeb, transform.position, transform.rotation);
            GameManager.Instance.OnGameOver();
        }
    }
}

Step 9 Sprite management

As shown in the script, we will have four different sprites for each direction. So, the car will have a separate sprite for each of the four directions.

Step 10 Translation in Isometric MAP

The translation process of an isometric object is quite different than what we do while we are doing the normal transform.

For isometric translation, we will have to calculate the direction with respect to the isometric map.

For that, we will use Isometric class function

Isometric. vectorToIsoDirection (IsoDirection)

Here, we are using this function for moving a car in one of the IsoDirection i.e. North, South, East or West.

This function returns the projection vector of IsoDirection in Isometric map. Projected vector will represent the actual location/position of the car in a game space of Unity.

So, after getting the target position to move the car, we can pass that target position to Translate method of Transform class in Unity.

This is how we can create a simple Isometric game using this powerful tool.

This demo took me around an hour to complete, which is not bad considering I had to do some research in the tool itself. If I had known this tool already, it wouldn’t have taken more than 10 minutes to create the demo.

Step 11 Other Advantages of Ultimate Isometric Toolkit

Here are some of the other advantages of Ultimate Isometric Toolkit:

Conclusion:

Creating isometric view games become very easy and very less time taking by using the Ultimate isometric toolkit. Toolkit’s structure is very powerful. which is very easily understandable. Which makes it class apart from other isometric toolkits.

Feel free to contact us if you really liked this blog. And don’t forget to share your comments below!