Gizmos en Unity para depurar IA visual

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:0013:12

Gizmos en Unity para depurar IA visual

Curso de Herramientas de Unity

Clase 7 de 20

Clase 7 / 20

Recursos

Depurar el comportamiento de un personaje en Unity puede volverse un dolor de cabeza cuando solo ves números en consola. Los gizmos en Unity resuelven justo eso: te permiten dibujar formas, líneas y esferas dentro de la escena para visualizar qué está haciendo tu lógica en tiempo real. Esta guía está pensada para desarrolladores que quieren depurar sistemas de IA, rangos de visión y colisiones sin adivinar.

¿Qué son los gizmos y para qué sirven en Unity?

Los gizmos son una librería que Unity ofrece para hacer debug visual dentro del editor. Con ella puedes dibujar líneas, esferas y otras formas que aparecen en la vista de Scene, ayudándote a entender qué ocurre detrás del código.

¿Qué es un gizmo en Unity? Es una representación gráfica que se dibuja en la vista de escena para depurar visualmente el comportamiento de objetos, como rangos de detección o trayectorias de un raycast.

En la clase trabajamos con una escena de un bosque donde un fantasma persigue a un leñador. El problema inicial es claro: el fantasma se mueve, pero no hay forma de ver su rango de detección ni cuándo realmente entra en contacto con el jugador.

¿Cómo preparar la escena y los layers para que funcione el script?

Antes de dibujar nada, hay que preparar el entorno. Al importar el paquete del recurso, Unity no trae los layers personalizados, así que toca crearlos a mano [01:30].

Abre la sección de Layers en el editor.
Añade un nuevo layer llamado Player.
Asigna ese layer al leñador.
Verifica que el script del fantasma (Ghost) reconozca Player como objetivo.

El script del fantasma maneja dos estados: patrullar y seguir. Tiene variables para la visión, la velocidad, la distancia de chequeo de paredes (wallCheckDistance) y un booleano isInRange que indica si el target está dentro del rango. Si la distancia entre el fantasma y el target supera la visión, el target vuelve a ser nulo y el fantasma regresa a patrullar [03:45].

¿Cómo dibujar una esfera de rango con OnDrawGizmos?

La primera mejora visual es pintar una esfera alrededor del fantasma que represente su rango de detección. Esto se hace dentro del método OnDrawGizmos, donde defines el color, la transparencia y el radio.

Una vez dibujada, la esfera aparece en la vista de Scene con la transparencia que configuraste. En Game view no se ve por defecto, aunque Unity ya incluye un botón para activar gizmos ahí también. La recomendación es trabajarlos en la vista de escena para mayor claridad [05:20].

¿Cómo cambiar el color de un gizmo según una condición?

Una esfera estática ayuda, pero no te dice cuándo el fantasma realmente detecta al jugador. Aquí entra una técnica simple: condicionar el color del gizmo a una variable booleana.

En el código, aprovechamos la variable isInRange. Usando un operador ternario en C#:

csharp Gizmos.color = isInRange ? Color.green : Color.red;

Es equivalente a un if/else, pero más compacto. Ahora la esfera se pinta verde cuando el fantasma detecta al leñador y roja cuando no [07:10]. Al darle play, el cambio de color confirma de inmediato si la lógica de detección funciona.

¿Cuándo conviene usar Gizmos.color con un ternario? Cuando quieres reflejar visualmente un estado booleano del objeto, como detección activa, colisión o validación, sin escribir bloques if/else largos.

¿Cómo dibujar un raycast con Debug.DrawRay para ver colisiones?

El fantasma también lanza un raycast hacia adelante para detectar paredes, pero ese rayo es invisible por defecto. Para visualizarlo tienes dos caminos: usar gizmos directamente o usar Debug.DrawRay, que internamente Unity convierte en un gizmo.

Dentro del FixedUpdate, agregamos:

csharp Debug.DrawRay(transform.position, direction * wallCheckDistance, hit ? Color.green : Color.red);

Tres detalles importantes de esta línea:

El origen es la posición del fantasma.
La dirección se multiplica por wallCheckDistance para que el rayo tenga la longitud real del chequeo.
El color depende de si el raycast impactó o no.

Al ejecutar la escena, el rayo aparece saliendo del fantasma y cambia de color en tiempo real [09:50]. Cuando aumentas wallCheckDistance en el inspector, el rayo se alarga y notas cómo el fantasma reacciona girando con más sensibilidad. Si lo subes demasiado, gira sin parar, lo cual también es información útil para ajustar el balance del personaje.

¿Por qué multiplicar la dirección por la distancia en un Debug.DrawRay?

Un rayo dibujado solo con la dirección normalizada se ve muy corto y no representa el alcance real del chequeo. Multiplicar por wallCheckDistance hace que el rayo visual coincida exactamente con la distancia que el código está evaluando. Sin esa multiplicación, estarías viendo una mentira visual.

Beneficios concretos de usar gizmos para depurar IA

Ves el rango de detección sin abrir la consola.
Confirmas en qué momento exacto se activa una colisión.
Ajustas valores en el inspector y observas el efecto al instante.
Detectas comportamientos raros, como giros descontrolados por rangos mal configurados.

La diferencia entre adivinar y depurar visualmente es enorme. Pasamos de ver un fantasma moviéndose sin contexto a entender por qué toma cada decisión.

Explora la documentación oficial de Unity para descubrir otras formas de dibujo: cubos, mallas, íconos personalizados. Y cuéntame en los comentarios qué tipo de gizmo te gustaría implementar 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

Gizmos en Unity para depurar IA visual

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