Unity3D – Draw hexagons map in canvas

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

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 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…

[code lang=”csharp” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]
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  & 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++;
}
}
}
[/code]

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)