Skip to content

8-Puzzle Problem Using A* in C# and Unity

8-Puzzle Problem Using A* in C# and Unity

Page 2 – The Unity Project and the UI

This tutorial is divided into 5 pages.

  • Page 1: The first page of the tutorial introduces the 8-Puzzle game and its integration with A* pathfinding in Unity. It covers the problem’s history, its complexity, and heuristic search methods like A*. It also explains the puzzle’s state representation and neighbor construction for pathfinding, providing foundational knowledge for implementing and solving the 8-Puzzle.
  • Page 2: The second of the tutorial guides you through creating a new Unity 3D project named “8-Puzzle”. It details setting up the main camera, importing assets, and configuring a tile prefab. You create a puzzle board frame using cubes with wood textures and set up a basic UI with four buttons and two text fields for randomization, image cycling, resetting, and solving the puzzle using A*.
  • Page 3: The third covers the implementation of the PuzzleState class for the 8-puzzle game in C#. This class represents a unique puzzle state with an array of tile indices and includes constructors, equality checks, a hash code generator, and methods for finding the empty tile, swapping tiles, and calculating Manhattan cost. Additionally, it details creating neighbor indices for grid cells and generating neighboring puzzle states by moving the empty tile.
  • Page 4: In the fourth page, we implement the Path Finder using the three commonly used path finding algorithms, viz., the Dijkstra, the A* and the Gree-best-first search algorithms.
  • Page 5: In the fifth page, we apply the A* Path Finder to solve our 8-Puzzle game. We also create the necessary functionality to interactively play the game using the basic UI created in Page 2.

Contact me


Find the GitHub repository of this tutorial at https://github.com/shamim-akhtar/gamdev-unity/tree/8-puzzle.


View the tutorial on YouTube.


The Unity Project

Let’s start by creating a new Unity 3D project. Name it 8-Puzzle. 

  1. Download the images provided in the link to assist you with the tutorial (Download images).
  2. Once the project is loaded, Go to the project window and create a new folder called Resources. Drag and drop the downloaded assets folder called Images to the Resources folder. We will use it later in our tutorial.
  3. After that, select the Main Camera, go to the inspector and set the Clear Flag to Solid Color. 
  4. Change the projection to orthographic and size to 2.5.
  5. Set the position to be 0, -0.2 and -10 in the x, y and z axis and then change the RGB color to 50, 100 and 255 to make the background bright blue.

The Tile Prefab

  1. From the project window, go to the Resources folder. Right-click and create a new material. Name it TileMaterial.
  2. In the hierarchy window, right-click and create a Quad game object. Rename it to Tile.
  3. Go to the inspector and reset the transform. Then, set the scale values to 0.98, 0.98, and 1 on the x, y, and z axes.
  4. Add a box collider component so that we can perform a ray intersection on it.
  5. After that, drag the TileMaterial to this game object to associate the material. 
  6. In the Resources folder, create a new folder called Prefabs. Drag and drop the Tile game object to this folder and make it a prefab. 
  7. Remove or hide the Tile game object from the scene.

The Puzzle Board

Right-click on the hierarchy window and create a new empty game object. Name it PuzzleBoard. Select this game object, go to the inspector and reset the transform.

We shall now create the frame for the puzzle board. You could implement this frame in many ways. For this tutorial, we are going to use cubes.

  1. Select the Puzzle Board game object from the hierarchy window. Right click on it and create a new empty game object. Name it, Frame.
  2. Select the Frame game object, right click on it and create a new cube game object.
  3. Resize it by setting the scale values to 3.1, 0.1 and 0.1 on the x, y and z axis.
  4. From the images folder in Resources, drag and drop the wood_dark texture to the cube. 
  5. Duplicate this cube 3 times. Rename them to Up, Right, Down and Left.
  6. Select the Up cube and set the position to 0, 1.575 and 0 in the x, y and z axis.
  7. Select the Down cube and set the position to 0, -1.575 and 0 in the x, y and z axis.
  8. Select the Right cube and set the position to -1.575, 0 and 0 in the x, y and z axis.
  9. Set the rotation values to 0, 0, and 90.
  10. Similarly, Select the left cube and set the position to 1.575, 0 and 0 in the x, y and z axis. Set the rotation values to 0, 0, and 90.
  11. Once again, select the Frame game object from the hierarchy. Right click and create a quad game object. 
  12. Set the position to 0, 0, and 0.1. 
  13. Set the scale to 3.1, 3.1 and 1 on the x, y and z axis.
  14. From the images folder in Resources, drag and drop the wood_light texture to the quad. 

The Basic UI

We shall now implement a basic UI for our 8-Puzzle game. The UI will contain four buttons and two texts. You can use legacy buttons and texts or TextMeshPro buttons and texts.

For this tutorial, I have created legacy buttons and texts.

The four buttons are for randomisation, going to next image, resetting the tiles to the rendomised state after you have made some moves and solving the puzzle by A* algorithm. The two text fields are to show status messages and the number of moves.

Go ahead and implement these UI elements into a canvas.

This picture shows the basic UI setup with the Canvas, the four buttons and the two texts.

In the next page we will implement the PuzzleState class to represent a state of the 8-Puzzle.

Pages: 1 2 3 4 5

2 thoughts on “8-Puzzle Problem Using A* in C# and Unity”

    1. Hi Bladin,

      The codes are all there. You should be able to see in the PuzzleMap section. Below extracted from the post.
      public List> GetNeighbours(PuzzleNode loc)
      {
      List> neighbours = new List>();
      int zero = loc.Value.GetEmptyTileIndex();
      List intArray = GetNeighbors(zero);
      for (int i = 0; i < intArray.Count; ++i) { PuzzleNode state = new PuzzleNode(this, new PuzzleState(loc.Value)); state.Value.SwapWithEmpty(intArray[i]); neighbours.Add(state); } return neighbours; }

Leave a Reply

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