GUI Multi-Resolution & Bandes noires

Voici une technique que l'on peut utiliser afin de fabriquer une GUI qui soit valide quelque soit la résolution et le ratio, ce qui permet de faire des applications compatibles web/ios/android sans avoir trop à gerer les différences de ratio entre toutes les résolutions possibles (surtout pour Android).

Tout d'abord il faut choisir une resolution "idéale" dans laquelle il faut designer toute la gui (prendre de preference la résolution la plus élevée parmis toutes celles que vous souhaitez supporter).
Pour l'exemple 1024*768

On va utiliser une classe qui va tracer des bandes noires sur les cotés Gauche/Droite ou Haut/Bas en fonction du ratio courant et qui va seter la matrice de GUI (GUI.matrix) afin que celle ci s'adapte à la résolution courante.

On va utiliser une classe "cGUIRatio" (voir le code plus bas).
Dans un callback OnGUI() on va appeller notre fonction cGUIRatio.DrawBandesNoires().
Toute la gui tracée apres cet appel sera redimentionnée et replacée en fonction de la résolution.
Notons que tous les elements de gui doivent etres positionnés comme si vous etiez dans la resolution native (1024*768 pour notre exemple).


void OnGUI()
{
cGUIRatio.DrawBandesNoires();
.... le reste de la gui...
}



Voila la classe cGUIRatio:


using UnityEngine;
using System.Collections;

public class cGUIRatio
{
//Resolution native de la gui
const int WIDTH = 1024;
const int HEIGHT = 768;

//-----------------------------------------
//
//-----------------------------------------
public static void DrawBandesNoires()
{
Texture2D white = Resources.Load("Textures/white") as Texture2D; //texture blanche 8*8 dans "Resources/Textures"
float sw = Screen.width;
float sh = Screen.height;
float refw = WIDTH;
float refh = HEIGHT;
float rCurrentRatio = sw / sh;
float guiScale;
if (rCurrentRatio > (refw/refh))
{
//Bandes Droite/Gauche guiScale = sh / refh;
}
else
{
//Bandes Haut/Bas
guiScale = sw / refw;
}
float cw = refw * guiScale;
float ch = refh * guiScale;
Vector3 v = new Vector3((sw - cw) / 2, (sh - ch) / 2, 0);

GUI.matrix = Matrix4x4.identity;
if (v.x > 0)
{
//Bandes sur les cotés
GUI.color = Color.black;
GUI.DrawTexture(new Rect(0, 0, v.x, Screen.height), white);
GUI.DrawTexture(new Rect(Screen.width - v.x, 0, v.x, Screen.height), white);
}
if (v.y > 0)
{
//Bandes Haut et Bas
GUI.color = Color.black;
GUI.DrawTexture(new Rect(0, 0, Screen.width, v.y), white);
GUI.DrawTexture(new Rect(0, Screen.height - v.y, Screen.width, v.y), white);
}
GUI.color = Color.white;

//Setup matrix for next gui draw
Vector3 translation = new Vector3(v.x,v.y,0);
GUI.matrix = Matrix4x4.TRS(translation, Quaternion.identity, Vector3.one*guiScale);
}
}