Scroll view con botones en Unity Editor

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:007:58

Scroll view con botones en Unity Editor

Curso de Herramientas de Unity

Clase 18 de 20

Clase 18 / 20

Recursos

Dibujar una base de datos dentro de una herramienta personalizada en Unity requiere combinar OnGUI, áreas delimitadas y un scroll view funcional. Aprenderás a renderizar tus scriptable objects como botones interactivos dentro de un panel scrolleable, ideal para desarrolladores que construyen editor tools en Unity.

Cómo dibujo el área base con OnGUI y BeginArea

Todo arranca con OnGUI, el método que actúa como el update visual de la ventana. Ahí es donde defines qué se pinta y dónde.

Lo primero es declarar un Rect que delimite la zona de dibujo. En el ejemplo, el Rect empieza en el origen (esquina superior izquierda), mide 220 píxeles de ancho y abarca toda la altura de la pantalla. Ese rectángulo le dice a Unity exactamente dónde vas a trabajar.

Después viene GUILayout.BeginArea, que funciona igual que los BeginHorizontal o BeginVertical: siempre necesita su pareja de cierre. Por eso al final cierras con GUILayout.EndArea. Si olvidas el cierre, Unity te tira error.

¿Para qué sirve BeginArea en Unity? Define una región delimitada dentro de un Editor Window para que los controles de GUILayout se organicen automáticamente dentro de esa zona, sin desbordarse al resto de la ventana.

Cómo funciona el ScrollView dentro de un Editor Window

Un scroll view es una zona scrolleable que muestra contenido cuando este excede el espacio visible. En Unity se crea con GUILayout.BeginScrollView.

Este control pide un parámetro clave: scrollPosition. Es una variable Vector2 que guarda la posición actual del scroll. Solo declárala vacía a nivel de clase, pásala al método y Unity la actualiza sola conforme el usuario scrollea.

El control también acepta dos booleans importantes:

El primero indica si quieres mostrar siempre el scroll horizontal.
El segundo controla el scroll vertical.
En este caso, solo se activa el vertical porque la lista crece hacia abajo.

Y como todo Begin, necesita su EndScrollView al final para cerrar correctamente el bloque.

Cómo dibujo cada item como botón con icono y texto

Dentro del scroll view recorres la lista de ítems con un foreach y dibujas cada uno como un botón usando GUILayout.Button. Los botones siempre van dentro de un if, porque devuelven true cuando el usuario los presiona.

Para que el botón muestre nombre e icono, le pasas un GUIContent. Aquí aparece un detalle técnico importante: el campo item del scriptable object estaba privado, así que hay que cambiarlo a público para acceder a su displayName y a su icon.

Cómo manejo el icono cuando es un Sprite y no Texture2D

El GUIContent espera una Texture, pero el icono del scriptable object es un Sprite. La solución es crear una variable Texture2D iconTex inicializada en null y validar antes de asignar.

Si item.icon es diferente de null, asignas iconTex = item.icon.texture. Esa validación evita un error común: pasar una textura nula al GUIContent rompe el render del botón.

¿Por qué falla un GUIContent con textura nula en Unity? Porque GUIContent no tolera referencias nulas en su parámetro de imagen. Siempre valida que el sprite exista antes de extraer su .texture y asignarla.

Cómo capturo la selección al presionar el botón

Cuando el botón se presiona, guardas el ítem en una variable llamada currentItem. Esa será la referencia que la siguiente clase usará para desplegar la información detallada.

El botón se dibuja con un width de 200 y un height de 50, aunque puedes ajustar esos valores al tamaño que mejor se vea en tu herramienta.

Cómo se ve el resultado dentro del editor de Unity

Al abrir la ventana personalizada desde el menú de la herramienta, aparece la base de datos renderizada como una lista vertical de botones. Cada botón muestra el displayName y el icono del scriptable object.

Para probar el comportamiento del scroll, basta con duplicar los ítems dos o tres veces. Cuando la lista supera el alto del área, el scroll vertical se activa automáticamente y permite navegar sin desbordar el panel.

El flujo completo queda así:

Defines el Rect y abres el área con BeginArea.
Inicias el ScrollView con su scrollPosition.
Recorres los ítems y dibujas cada uno como botón con icono.
Cierras con EndScrollView y EndArea.

Con esa estructura ya tienes una base sólida para tu herramienta. En el siguiente paso vas a desplegar la información del ítem seleccionado y agregar controles de edición directamente desde la ventana, sin depender del custom editor. ¿Qué controles te gustaría agregar primero a tu herramienta? Cuéntame en los comentarios.

Resumen

Cómo dibujo el área base con OnGUI y BeginArea

Todo arranca con OnGUI, el método que actúa como el update visual de la ventana. Ahí es donde defines qué se pinta y dónde.

¿Para qué sirve BeginArea en Unity? Define una región delimitada dentro de un Editor Window para que los controles de GUILayout se organicen automáticamente dentro de esa zona, sin desbordarse al resto de la ventana.

Cómo funciona el ScrollView dentro de un Editor Window

Un scroll view es una zona scrolleable que muestra contenido cuando este excede el espacio visible. En Unity se crea con GUILayout.BeginScrollView.

El control también acepta dos booleans importantes:

El primero indica si quieres mostrar siempre el scroll horizontal.
El segundo controla el scroll vertical.
En este caso, solo se activa el vertical porque la lista crece hacia abajo.

Y como todo Begin, necesita su EndScrollView al final para cerrar correctamente el bloque.

Cómo dibujo cada item como botón con icono y texto

Cómo manejo el icono cuando es un Sprite y no Texture2D

El GUIContent espera una Texture, pero el icono del scriptable object es un Sprite. La solución es crear una variable Texture2D iconTex inicializada en null y validar antes de asignar.

Si item.icon es diferente de null, asignas iconTex = item.icon.texture. Esa validación evita un error común: pasar una textura nula al GUIContent rompe el render del botón.

¿Por qué falla un GUIContent con textura nula en Unity? Porque GUIContent no tolera referencias nulas en su parámetro de imagen. Siempre valida que el sprite exista antes de extraer su .texture y asignarla.

Cómo capturo la selección al presionar el botón

Cuando el botón se presiona, guardas el ítem en una variable llamada currentItem. Esa será la referencia que la siguiente clase usará para desplegar la información detallada.

El botón se dibuja con un width de 200 y un height de 50, aunque puedes ajustar esos valores al tamaño que mejor se vea en tu herramienta.

Cómo se ve el resultado dentro del editor de Unity

El flujo completo queda así:

Defines el Rect y abres el área con BeginArea.
Inicias el ScrollView con su scrollPosition.
Recorres los ítems y dibujas cada uno como botón con icono.
Cierras con EndScrollView y EndArea.

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

Scroll view con botones en Unity Editor

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