Unity3D – Draw hexagons map in canvas

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

Example of hexagons map:
grid_hex

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 and 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.;
public  class  ExagonGenerator :  MonoBehaviour {
    // total hex drawed
      drawedHexagons  =  0;

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

      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;

          counter  =  0;
        // looping the matrix
        for  (float  y  =  canvasRect.rect.y;  y  & lt;  Mathf.Abs(canvasRect.rect.y)  +  delta;  y  +=  delta) {
            for  (float  x  =  canvasRect.rect.x;  x  & lt;  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.