Usare la GUI, mantenere le proporzioni > Unity3D

Unity permette di definire la grafica di uno specifico elemento della GUI attraverso degli oggetti chiamati GUIStyle, definibili via codice e attraverso l’inspector. Proprietà di questi oggetti sono le immagini assegnate per ogni stato dell’elemento (Normal, Hover, Active), font utilizzato dal testo, bordi, margini, padding, ecc.
Tutto quello che deve essere visualizzato nella Graphical User Interface deve essere definito via codice all’interno della funzione OnGUI; anche gli eventi come la pressione di un bottone sono richiamati a partire da OnGUI.
Posizione e dimensione degli elementi sono gestiti attraverso un tipo di variabile chiamato Rect; i valori utilizzati sono relativi alla finestra dell’applicazione e hanno origine nel suo angolo in alto a sinistra. Non è raro che un applicazione giri su schermi che hanno diverse risoluzioni, soprattutto nel caso di dispositivi android, in cui ogni telefono ha uno schermo di dimensioni differenti dagli altri. Il risultato ottenuto con le Rect è quello di elementi di dimensione o posizione differenti a seconda della risoluzione degli schermi.
Per mantenere la GUI invariata è possibile giocare sulle proporzioni, partendo da due valori di altezza e larghezza fissati. Nell’esempio vediamo come applicare una trasformazione sulla matrice della GUI, in modo da mantenerla invariata per ogni diverso tipo di risoluzione:

private var originalWidth = 480.0; // risoluzione scelta per creare 
private var originalHeight = 800.0; // i contenuti della GUI 
private var scala : Vector3; 
function OnGUI() { 
scala.x = Screen.width/originalWidth; // calcola il rapporto orizzontale 
scala.y = Screen.height/originalHeight; // calcola il rapporto verticale 
scala.z = 1; var svMat = GUI.matrix; // Sostituisco la matrice, solo le proporzioni sono invariate rispetto l'originale 
GUI.matrix = Matrix4x4.TRS(Vector3.zero, Quaternion.identity, scala);
/////////////////////////////////////////////// 
//Definizione della GUI 
/////////////////////////////////////////////// 
GUI.matrix = svMat; // ripristino la matrice originale 
}

Una volta definita la matrice di scala possiamo iniziare a definire gli elementi appartenenti alla nostra GUI.