GUI.Box y Rects en las esquinas de pantalla

Contenido del curso

Introducción a las herramientas de desarrollo para videojuegos

Dibujando en el editor

Prácticando en el editor

Herramientas de Editor

Cierre del curso

20
Cierre del curso
01:10 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:50

GUI.Box y Rects en las esquinas de pantalla

Curso de Herramientas de Unity

Clase 6 de 20

Clase 6 / 20

Recursos

Dibujar interfaces en Unity con el sistema IMGUI requiere entender cómo funcionan los Rect, cómo posicionar elementos respecto a la pantalla y cómo combinar controles como GUI.Box, GUI.Toolbar y GUILayout.Button sin que se pisen entre sí. Aquí verás cómo lograrlo paso a paso, pensado para quienes ya programan en Unity y quieren dominar la GUI nativa.

Qué es un Rect y cómo posicionar GUI Box en las cuatro esquinas

Un Rect es la estructura que define posición y tamaño de cualquier control de la GUI inmediata de Unity. Recibe cuatro valores: x, y, width y height. El origen (0,0) está en la esquina superior izquierda del viewport del juego.

Para dibujar cuatro cajas, una en cada esquina, se usa GUI.Box, que funciona como un botón pero sin recibir input, ideal para mostrar información [01:00].

Cómo calcular las posiciones con Screen.width y Screen.height

Unity expone la clase Screen, que entrega el tamaño actual de la pantalla en píxeles. Esto permite anclar controles a esquinas dinámicas sin importar si el usuario redimensiona la ventana [02:10].

Las cuatro esquinas se calculan así:

Top left: new Rect(0, 0, 100, 50).
Bottom left: new Rect(0, Screen.height - 50, 100, 50).
Top right: new Rect(Screen.width - 100, 0, 100, 50).
Bottom right: new Rect(Screen.width - 100, Screen.height - 50, 100, 50).

Fíjate en el detalle: hay que restar el alto y ancho del propio control. Si no lo haces, la caja se dibuja fuera del área visible porque su origen está en la esquina superior izquierda del Rect, no en su centro.

¿Por qué resto el tamaño del botón a Screen.height? Porque el Rect se posiciona desde su esquina superior izquierda. Si pones la y en Screen.height, el control queda fuera de pantalla. Restar la altura lo trae de vuelta al área visible.

csharp Rect topLeft = new Rect(0, 0, 100, 50); GUI.Box(topLeft, "arriba izquierda");

Rect bottomLeft = new Rect(0, Screen.height - 50, 100, 50); GUI.Box(bottomLeft, "abajo izquierda");

Rect topRight = new Rect(Screen.width - 100, 0, 100, 50); GUI.Box(topRight, "arriba derecha");

Rect bottomRight = new Rect(Screen.width - 100, Screen.height - 50, 100, 50); GUI.Box(bottomRight, "abajo derecha");

Por qué GUI y GUILayout se interponen al dibujarse

Al probar el código en play y redimensionar la ventana, las cajas mantienen su posición relativa a cada esquina. Pero algo curioso pasa cuando agregas un GUILayout.Button encima [05:30].

GUI y GUILayout son dos sistemas independientes. Cada uno se dibuja por su cuenta y no se respetan mutuamente: el orden de llamada decide cuál queda encima. Por eso un botón con layout automático puede tapar tus cajas posicionadas a mano.

¿Cuál es la diferencia entre GUI y GUILayout? GUI exige que tú escribas las posiciones con un Rect. GUILayout las calcula automáticamente y apila los controles en orden vertical.

Cómo usar GUI Toolbar para alternar entre controles

Para decidir en tiempo de ejecución qué sistema usar sin que se pisen, entra en juego GUI.Toolbar. Una toolbar funciona parecido a un enumerador del inspector: muestra varias opciones y devuelve el índice seleccionado [07:00].

La función recibe tres parámetros: un Rect para la posición, un entero con el índice actual y un array de strings con las etiquetas.

Cómo conectar la Toolbar con un switch case

Primero declara una variable entera fuera del método para conservar el estado entre frames:

csharp int currentIndexGUI;

void OnGUI() { Rect toolbarRect = new Rect(Screen.width / 2, 200, 200, 25); currentIndexGUI = GUI.Toolbar(toolbarRect, currentIndexGUI, new string[] { "GUI", "GUI Layout" });

switch (currentIndexGUI)
{
    case 0:
        GUI.Button(new Rect(0, 0, 100, 50), "Botón");
        break;
    case 1:
        GUILayout.Button("Botón");
        break;
}

}

El switch case encaja perfecto aquí porque la toolbar devuelve un índice numérico, igual que un enumerador. Así dibujas solo un sistema a la vez y evitas el conflicto visual.

Un detalle a pulir: dividir Screen.width entre 2 ancla la toolbar a la mitad, pero no centra su ancho. Para centrarla de verdad, restas la mitad del ancho del control: (Screen.width / 2) - 100. Queda como ejercicio para que lo pruebes.

Habilidades y conceptos clave que dominas con esta práctica

Al trabajar con IMGUI en Unity ejercitas varias habilidades técnicas concretas:

Manejo de Rect: estructura base para cualquier control de GUI con x, y, width y height.
Uso de Screen.width y Screen.height: posicionamiento responsive sin hardcodear píxeles.
Diferenciación entre GUI y GUILayout: saber cuándo conviene control manual versus automático.
Implementación de GUI.Toolbar: control de selección múltiple basado en índice entero.
switch case sobre índices: patrón limpio para alternar comportamientos según selección.

¿Qué control usarías tú para tomar decisiones más complejas, un toggle booleano o una toolbar de varias opciones? Cuéntame en los comentarios cómo lo aplicarías en tu propio proyecto.

Introducción a las herramientas de desarrollo para videojuegos

Cómo crear herramientas propias en Unity

Qué son las herramientas en Unity

Herramientas comunes para crear videojuegos

Dibujando en el editor

Ciclo de vida del editor en Unity IMGUI

Controles: creando un botón

GUI.Box y Rects en las esquinas de pantalla

Gizmos en Unity para depurar IA visual

Handles para mover waypoints en Unity

Prácticando en el editor

Shortcuts útiles del editor

Menús contextuales en el Inspector de Unity

Menús personalizados con MenuItem en Unity

Herramientas de Editor

Cómo crear PropertyDrawers en Unity

Crea una base de datos RPG con Scriptable Objects

Serialized properties

Optimizando nuestro custom editor

Guardar y cargar data de herramientas: json, scriptable objects, txt y csv

Crea una Editor Window con AssetDatabase

Scroll view con botones en Unity Editor

Editor windows: agregando funcionalidades

Cierre del curso

Cierre del curso

GUI.Box y Rects en las esquinas de pantalla

Progreso del curso

Introducción a las herramientas de desarrollo para videojuegos

Dibujando en el editor

Prácticando en el editor

Herramientas de Editor

Cierre del curso

Recursos

Recursos