Skip to content

Search Algorithms Visualized!

Meet your neighbors

In this section, we will add the code necessary to link up each tile with its immediate neighbors. At most, a tile can have 8 neighbors:

First, we need to enhance our Tile class a bit by adding a set of neighbors to it: 

public class Tile : MonoBehaviour 
{
    private HashSet neighbors;
    ...

    public Tile()
    {
        weight = 1;
        neighbors = new HashSet<Tile>();
    }

    public void AddNeighbor(Tile neighbor)
    {
        neighbors.Add(neighbor);
    }

    public HashSet GetNeighbors()
    {
        return neighbors;
    }
}

Next, we update the GridCreator class by adding an array of Tiles. In addition, we create a new private method to add all the neighbors:

public class GridCreator : MonoBehaviour 
{
    ...
    private Tile[,] tiles;

    void Start() 
    {
        tiles = new Tile[gridWidth, gridHeight];

        for (int w = 0; w < gridWidth; w++)
        {
            for (int h = 0; h < gridHeight; h++) 
            {
                GameObject tileGameObject = Instantiate(
                    tilePrefab,
                    new Vector2(w, h), 
                    Quaternion.identity
                );

                Tile tile = tileGameObject.GetComponentInChildren<Tile>();
                tile.SetWeight(w * gridWidth + h);

                tiles[w, h] = tile;
            }
        }

        AddNeighbors();
    }
}

private void AddNeighbors()
{

}

The implementation of AddNeighbors() while initially looking somewhat complex is fairly straight-forward. We iterate through each tile and identify all its neighbors based on the tile's current position (w, h):

private void AddNeighbors()
{
    for (int w = 0; w < gridWidth; w++)
    {
        for (int h = 0; h < gridHeight; h++)
        {
            Tile currentTile = tiles[w, h];

            if (w > 0)
            {
                // W neighbor
                currentTile.AddNeighbor(tiles[w - 1, h]);
            }

            if (w < gridWidth - 1)
            {
                // E neighbor
                currentTile.AddNeighbor(tiles[w + 1, h]);
            }

            if (h > 0)
            {
                // S neighbor
                currentTile.AddNeighbor(tiles[w, h - 1]);
            }

            if (h < gridHeight - 1)
            {
                // N neighbor
                currentTile.AddNeighbor(tiles[w, h + 1]);
            }

            if (w > 0 && h > 0)
            {
                // SW neighbor
                currentTile.AddNeighbor(tiles[w - 1, h - 1]);
            }

            if (w < gridWidth - 1 && h < gridHeight - 1)
            {
                // NE neighbor
                currentTile.AddNeighbor(tiles[w + 1, h + 1]);
            }

            if (w > 0 && h < gridHeight - 1)
            {
                // NW neighbor
                currentTile.AddNeighbor(tiles[w - 1, h + 1]);
            }

            if (w < gridWidth - 1 && h > 0)
            {
                // SE neighbor
                currentTile.AddNeighbor(tiles[w + 1, h - 1]);
            }
        }
    }
}

Next, let's add the ability to change a tile's color. This will come in handy later when we visualize the search algorithm. Update the Tile class by adding a SetColor method:

public class Tile : MonoBehaviour 
{
    ...
    private Renderer rend;

    public void Awake()
    {
        ...
        rend = GetComponent<Renderer>();
    }

    public void SetColor(Color color)
    {
        rend.material.SetColor("_Color", color);
    }
}

Let's test this out by changing the color of a tile. In the GridCreator class, add the following (temporary - we'll remove this again since it's just for testing purposes) code after calling the AddNeighbours() method:

foreach (Tile neighbor in tiles[4, 5].GetNeighbors())
{
    neighbor.SetColor(Color.green);
}

Feel free to chose any other tile. If we now run the program, you should get the following result:

Once we confirmed that our neighbour code works, remove the above for loop again since we don't want to keep colorizing those tiles.

In the next chapter, we will start implementing the search algorithm. 

2 thoughts on “Search Algorithms Visualized!

Leave a Reply

Your email address will not be published. Required fields are marked *