Posicionar elementos en pantalla con el sistema GUI de Unity requiere entender cómo funcionan las coordenadas, los rects y la diferencia entre dibujar con GUI y con GUI Layout. A continuación se explican los puntos centrales que permiten crear cajas, barras de herramientas y tomar decisiones de dibujado directamente desde código.
¿Cómo se posicionan elementos con rects en las cuatro esquinas de la pantalla?
El punto de partida es recordar que en el sistema GUI de Unity el origen (0, 0) corresponde a la esquina superior izquierda del viewport [0:42]. A partir de ahí se construye un Rect indicando posición X, Y, ancho (width) y alto (height).
Para colocar una caja en cada esquina se siguen estas reglas:
Arriba izquierda:Rect(0, 0, 100, 50) — se parte del origen sin desplazamiento.
Abajo izquierda: la X permanece en cero, pero la Y debe ser Screen.height - 50, restando la altura del control para que no quede fuera de pantalla [1:30].
Arriba derecha: la X pasa a Screen.width - 100 (se resta el ancho del control) y la Y se mantiene en cero [2:15].
Abajo derecha: combina ambas: Screen.width - 100 en X y Screen.height - 50 en Y [2:40].
Screen.width y Screen.height son propiedades que Unity expone para conocer el tamaño actual de la pantalla en píxeles, lo que permite que las posiciones se recalculen si la ventana cambia de tamaño [1:18].
El control utilizado aquí es GUI.Box, que funciona de forma similar a un botón pero sin recibir input: solo muestra contenido de texto en la posición indicada [1:05].
¿Qué ocurre al redimensionar la ventana?
Al mover o cambiar el tamaño de la pantalla durante el play mode, las cajas se reposicionan respecto a los bordes porque dependen de Screen.width y Screen.height [3:10]. Sin embargo, el tamaño del control en sí no se ajusta automáticamente; eso requiere cálculos adicionales.
¿Por qué GUI y GUI Layout se interponen al combinarse?
Si dentro del mismo OnGUI se mezclan controles de GUI (posicionados con rect) y controles de GUI Layout (posicionados automáticamente), ambos sistemas se dibujan de forma independiente [3:50]. El layout no conoce las posiciones manuales del GUI y viceversa, por lo que los elementos pueden solaparse.
El orden de dibujado también importa: el control que se declara primero en el código se pinta primero y queda por debajo de los siguientes [3:30].
¿Cómo decidir qué sistema dibujar con un toolbar?
Para elegir entre uno u otro en tiempo de ejecución se puede usar GUI.Toolbar [4:35]. Este control recibe:
Un Rect con su posición (en este ejemplo, centrado con Screen.width / 2 y Screen.height / 2).
Una variable entera que representa el índice seleccionado.
Un arreglo de strings con las opciones visibles, por ejemplo new string[] { "GUI", "GUI Layout" }.
El toolbarretorna el índice actualizado cada vez que el usuario hace clic en una opción distinta [5:20]. Esa misma variable se evalúa con un switch case: si el índice es 0 se dibujan los controles de GUI; si es 1, los de GUI Layout [5:50].
csharp
int currentIndexGUI = 0;
void OnGUI()
{
Rect toolbarRect = new Rect(Screen.width / 2, Screen.height / 2, 200, 25);
currentIndexGUI = GUI.Toolbar(toolbarRect, currentIndexGUI,
new string[] { "GUI", "GUI Layout" });
switch(currentIndexGUI){case0:// dibujar controles con GUI y Rectbreak;case1:// dibujar controles con GUILayoutbreak;}
}
¿Qué otros controles de decisión ofrece el sistema GUI?
Además del toolbar, Unity incluye GUI.Toggle, que funciona con un valor booleano: el usuario marca o desmarca una casilla y el control devuelve true o false [4:25]. Ambos controles permiten condicionar qué se dibuja sin salir del sistema immediate mode de GUI.
Experimenta combinando toggles, toolbars y cajas para construir interfaces de depuración rápidas. Comparte en los comentarios qué controles te resultaron más útiles para tus prototipos.
