Pagine    Articoli    Prodotti    Forum    Cerca  
Nickname

Password


Non sei registrato?
Registrati a GPI qui!

Puoi anche attivare un vecchio utente GPI e chiedere una nuova password.
I Team

Mappa Team
I nostri utenti

Mappa Utenti
  AHug: A Hex Unity Game - Griglia esagonale
Pubblicato da Dario Oliveri il 2013-08-28 11:04:52

Premessa: Voglio fare un gioco con gli esagoni.. senza nemmeno sapere quale sarà il gameplay. :) Resto aperto a modifiche/proposte  tipo JAM, altrimenti andrò avanti a seconda dell'umore :). (ne approfitto per ringraziare la community di GPI che mi da la possibilità di scrivere questi articoli e imparare cose nuove.).

 

 

Organizzazione base:

Ok visto che gli esagoni ce li voglio mettere sicuramente comincerò dal visualizzare una griglia di esagoni. Ma prima è meglio organizzarsi un pochino il lavoro.

 

Creo un nuovo progetto Unity (l'ho chiamato semplicemente "hex").

Mi creo i folders che penso di utilizzare (piccola nota, siccome penso di basare la grafica su "tiles", ho creato un folder apposta per i tiles):

 

Sicuramente manca qualche folder, ma lo si può aggiungere dopo (mi da un senso di sicurezza avere qualche folder).. Per ora intanto userò grafica di test che inserirò nel folder "Varie" (All'inizio volevo chiamarlo "Test", ma usando la "V" rimane alfabeticamente ultimo). In linea teorica anche "Textures e Shaders" sono folders superflui per ora..

 

Il folder "Varie" lo uso come cestino: avere una piccola area di "brainstorming" mi aiuta a velocizzare un poco. Poi potete fare come più vi garba. Finito il gioco "Varie" dovrebbe essere vuoto.

 

Non siamo grafici ma..

Un po di grafica fai da te dobbiamo saperla fare anche solo per testare che tutto funzioni. Intanto ci serve un esagono (prendo Diametro D = 2).

 

Apro Blender, cancello il cubetto di default e creo un esagono (piccola nota: usate  l'ultima versione di blender, le versioni vecchie hanno l'incoveniente che creano esagoni che hanno una rotazione iniziale "casuale", noi invece vogliamo un esagono "dritto"):

(Se l'esagono vi si spostasse per sbaglio ricominciate da capo. Fate prima che a rimetterlo al centro.)

 

Io ho esportato il file come "hex.obj" dentro al folder "Varie". (cancellate pure il file "hex.mtl" che blender ha aggiunto)

 

Ora il file OBJ, può essere aperto con blocco note, io ho migliorato un pochino la formattazione, e rimosso le cose inutili:

 

FILE: hex.obj (DOWNLOAD QUI)

 

Per sapere se l'esagono è centrato basta guardare la posizione del primo  vertice:

# posizione dei vertici
v 0.000000 0.000000 0.000000
...

(0, 0, 0) ok è centrato perfettamente.

 

Ritorniamo a unity (che avrete tenuto sottomano).

Salviamo subito la scena come "test.unity" e mettiamola dentro a "Varie". Useremo questa scena per far funzionare il codice di test. Ricordate di salvare spesso e volentieri la scena (anche se è di test ci serve! mi capitano parecchi crash casuali specialmente quando cambio da Unity a Mono per scrivere uno shader o uno script).

 

Fissiamo il sistema di coordinate:

Quello di Unity va già benissimo. I Nostri tiles saranno quindi disposti su una scacchiera lungo le coordinate X,Z e saranno posizionati ad un altezza Y.


Un semplice schema concettuale:

 

Ok, intanto per ora non ci importa ancora di avere oggetti che si spostano o di individuare i vicini degli esagoni, ma vi anticipo già alcune cose:

La scacchiera esagonale è molto simile a una scacchiera coi quadrati, l'unica differenza

è che invece di poterci spostare in 8 direzioni, ci possiamo spostare solo in 6 direzioni. Questo è utile, ma lo vedremo nel prossimo articolo.

 

Ora occupiamoci di visualizzare

Per visualizzare correttamente un esagono, non serve sapere molto. Questo è pressapoco cosa serve conoscere per disegnare un esagono (la visualizzazione infatti è semplice! un pochino più complesso è far spostare le unità sugli esagoni):

In particolare ci interessa sapere "3*a" e "2*b" che sono le lunghezze che useremo come offset per gli esagoni. (Da notare che l'unica cosa che bisogna decidere è D, ovvero il diametro del cerchio dentro cui inscriviamo l'esagono)

 

Creiamo il nostro primo script:

HexCentroids

using UnityEngine;
using System.Collections;

public class HexCentroids {
	
	float D    ; //diametro del cerchio
	int   size ;  //dimensione della griglia

	Vector2[] centers = null;
	
	public HexCentroids (float in_D = 2.0f, int in_size = 32){
		D = in_D;
		size = in_size;

                //grandezze dell'esagono
		float a = D/4.0f;
		float b = Mathf.Sqrt(3.0f)*a;
		centers = new Vector2[size*size];
//...

 

Si tratta di una classe semplicissima (non è nemmeno un monobehaviour), prende in ingresso nel costruttore 2 soli parametri (Diametro e dimensione della griglia) e costruisce una griglia di coordinate "esagonali".

//...
		int idx = 0;
		for( int z = 0; z < size; ++z){
			float pos_x = (y%2==1)? b: 0; //le righe dispari sono spostate di "b" ancora
			float pos_z = 3*a*z; // ecco dove usiamo 3*a
			
			for( int x = 0; x < size; ++x, ++idx){
				centers[idx].x = pos_x;
				centers[idx].y = pos_z; //Vector2 offre solo (X,Y) quindi qui uso y.
				pos_x += 2*b; // ecco dove usiamo 2*b
			}
		}
	}

 

Lo scopo di questa griglia è di aiutarci a "Disegnare nel posto giusto gli esagoni". In pratica noi trasformiamo le coordinate X,Z logiche in coordinate 2D/3D per la visualizzazione. (Lo scopo è avere un riferimento "quadrato".

	// ottiene le coordinate reali a partire da quelle logiche(x,z)
	public Vector2 get( int x, int z){
		return centers[x + z*size];	
	}
	
}

 

Riguardo al gameplay non ho ancora deciso nulla, però avere le coordinate "quadrate" (ovvero niente assi obliqui) può essere utile per leggere i valori di altezza da una heightmap. (In pratica di algoritmi per manipolare immagini/heightmap ne esistono a bizzeffe, in questo modo anzichè adattare gli algoritmi agli esagoni, sono gli esagoni che si adattano agli algoritmi).

 

E ora una classe di test per disegnare gli esagoni:

Non c'è molto da fare, si "esplora" la griglia precedente (HexCentroids) e per ogni posizione che troviamo posizioniamo un esagono:

 

using UnityEngine;
using System.Collections;

public class testDrawManyHex : MonoBehaviour {
	
	HexCentroids hmodel = new HexCentroids(2,32);
	
	public Mesh	hex; //qui impostate dall'unity editor inspector l'esagono di prima
	
	// Use this for initialization
	void Start () {

		//siccome è dispendioso disegnare 32*32 esagoni, li combiniamo in un'unica mesh
		CombineInstance[] istances = new CombineInstance[32*32];
		
		GameObject obj = new GameObject();
		Transform transf =  obj.transform; // non possiamo creare un oggetto "Transform" direttamente
					           // allora creiamo un GameObject temporaneo
				
		for( int y = 0; y < 32; ++y){
			for( int x = 0; x < 32; ++x){
				int idx = x + y*32;
				
				// prendiamo la posizione degli esagoni dalla griglia e assegnamo un altezza casuale
				transf.position = new Vector3 ( hmodel.get(x,y).x, Random.Range(1f,6f), hmodel.get(x,y).y);
				
				istances[idx].transform = transf.localToWorldMatrix;
				istances[idx].mesh = hex;
			}
		}
		
		Destroy(obj); // il GameObject temporaneo non ci serve più

		MeshFilter filter = GetComponent < MeshFilter > ();
		
		filter.mesh = new Mesh();
		filter.mesh.CombineMeshes(istances);

		gameObject.SetActive(true);
	}
	
	// Update is called once per frame
	void Update () {

	}
}

 

 

Ricordatevi di impostare dall'inspector l'esagono. Ovvero andate a prendervi la mesh (il file .obj) e fate drag n' drop sopra alla proprietà "hex" del vostro script.

 

Ora la classe di test per disegnare gli esagoni  all'opera:

 

Sostituendo l'altezza casuale con un'altezza prefissata ci da questo risultato:

 

 

(piccola nota io per il rendering sto usando uno shader* (era l'ora che imparassi Cg oltre a GLSL), quindi è probabile che voi vedrete gli esagoni rosa :P. Come già detto le cose base dovete farvele da soli ^^. risponderò ai commenti comunque sia)

 

*Non temete prima o poi li faremo diventare "carini" questi esagoni. Ovviamente prima ci concentreremo su altre cose (nel frattempo cercherò di postare screenshots che fanno gola così voi provate a fare per i conti vostri quello che non spiego). Come potete vedere mancano ancora un sacco di cose (ad esempio le "gonne" degli esagoni.. sempre che vogliate aggiungerle ovviamente).

 

Per approfondire:

Raccolta di link sugli esagoni

 

Prossimo Articolo

 

Campagne crowfunding

Just One Line
Siamo presenti su

     
Copyright ©2016 - Manifesto - Privacy - Termini di Servizio - Community - Collaboratori - Contattaci