Unity3D – Draw hexagons map in canvas

Today, a code extract from one of my 3d games… (Viruz!, download here), an hexagons map.

grid_hex

Example of hexagons map:

What we need before?

  1. Unity 3D
  2. Some hexagons prefabs
    1. draw it by yourself
    2. draw at runtime using code (example here)

Final result:

unity-hexagons-map

You need to add on your canvas the hexagons prefab first (i’ve used also an empty group called “Hexagons”):

canvas-setup

Next setup your canvas to use the “Screen Space – Camera” and add on it the Main Camera if you want to use this script with a multi-size camera and different devices (both desktop and mobile app).

canvas-camera

Move your hexagons out of screen (we need it only to clone, so move outside).

hexagons-outside


Ok, give me the code!

Sorry 😀, here the sample code…

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class ExagonGenerator: MonoBehaviour {
	// total hex drawed
	int drawedHexagons = 0;

	// the 3 colored random hexagons
	int randomHexPos_1 = 0;
	int randomHexPos_2 = 0;
	int randomHexPos_3 = 0;

	int randomHexPos_Max = 100;

	// the hex prefabs
	GameObject exagonEmpty;
	GameObject exagonFilled;
	GameObject exagonGreen;

	void Start() {
		// called from here (or initialized using a public var from editor)
		exagonEmpty = GameObject.Find("ExagonEmpty");
		exagonFilled = GameObject.Find("ExagonFilled");
		exagonGreen = GameObject.Find("ExagonFilledGreen");

		// random positions
		randomHexPos_1 = Random.Range(5, randomHexPos_Max);
		randomHexPos_2 = Random.Range(5, randomHexPos_Max);
		randomHexPos_3 = Random.Range(5, randomHexPos_Max);

		Draw();
	}

	void Draw() {
		// size
		RectTransform exagonRect = exagonGreen.GetComponent();
		RectTransform canvasRect = gameObject.GetComponent();

		// space between hex
		float delta = exagonRect.rect.width + 10;

		int counter = 0;
		// looping the matrix
		for (float y = canvasRect.rect.y; y && < Mathf.Abs(canvasRect.rect.y) + delta; y += delta) {
			for (float x = canvasRect.rect.x; x && < Mathf.Abs(canvasRect.rect.x); x += delta) {
				float fixedX = x;
				if (counter % 2 == 0) // make it disaligned
				{
					fixedX += (delta / 2);
				}

				// the hex to draw
				GameObject exagon = Random.Range(1, 4) % 2 == 0 ? exagonFilled : exagonEmpty;
				if (drawedHexagons == randomHexPos_1 || drawedHexagons == randomHexPos_2 || drawedHexagons == randomHexPos_3) {
					exagon = exagonGreen;
				}
				drawedHexagons++;

				Vector3 pos = new Vector3(fixedX, y, 0);

				// adding the hex
				GameObject exagonClone =  (GameObject) Instantiate(exagon, exagon.transform.parent);
				exagonClone.transform.localPosition = pos;
			}

			counter++;
		}
	}
}

Don’t want to copy/paste in your project? Download the .package from here!

that’s all. Configure, change, edit and do what you want with this script.

Alberto Pasca
Latest posts by Alberto Pasca (see all)