Cómo crear PropertyDrawers en Unity

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:0019:28

Cómo crear PropertyDrawers en Unity

Curso de Herramientas de Unity

Clase 12 de 20

Clase 12 / 20

Recursos

Crear atributos personalizados en Unity te permite extender el inspector con comportamientos propios, como un botón que randomiza valores entre un rango definido. Esta guía muestra cómo dibujar tus propios attributes usando PropertyDrawer, una técnica clave para desarrolladores que quieren editores más interactivos y limpios.

Por qué separar scripts y editor en Unity

La organización del proyecto marca la diferencia cuando trabajas con código que afecta al inspector. Unity necesita saber qué archivos pertenecen al juego compilado y cuáles solo viven dentro del editor.

La buena práctica consiste en mantener dos carpetas separadas:

Una carpeta Scripts donde defines el atributo y recolectas los parámetros que usará el desarrollador.
Una carpeta llamada exactamente Editor, que Unity reconoce automáticamente y no incluye en la compilación final.

Esta separación evita que el código del editor termine en el build del juego y mantiene el proyecto limpio [01:00].

¿Qué es un PropertyDrawer en Unity? Es una clase del API de editor que define cómo se dibuja una propiedad o un atributo dentro del inspector. Permite reemplazar la interfaz por defecto con controles personalizados.

Cómo definir un atributo personalizado heredando de PropertyAttribute

El primer paso es crear el script del atributo dentro de la carpeta de scripts normal. Una convención útil es nombrarlo con el sufijo Attribute, por ejemplo RandomizerAttribute, aunque Unity lo oculte al momento de usarlo [01:45].

Para que Unity lo reconozca como atributo, la clase debe heredar de PropertyAttribute. Dentro defines las variables que recibirá el atributo, en este caso un valor mínimo y un valor máximo de tipo float, junto con un constructor que los inicialice [02:30].

Una vez creado, lo aplicas sobre cualquier campo serializado de un MonoBehaviour usando la sintaxis de corchetes:

csharp [Randomizer(0, 10)] public float valueRandom;

En este punto el atributo existe en el código, pero todavía se dibuja como un campo normal porque falta el drawer que lo represente visualmente [04:10].

Cómo dibujar el atributo con CustomPropertyDrawer y OnGUI

Dentro de la carpeta Editor creas un script que herede de PropertyDrawer e importe la librería UnityEditor. Para vincular el drawer con el atributo, agregas el atributo CustomPropertyDrawer pasando el typeof de la clase objetivo, similar a cómo funciona RequiredComponent [05:20].

El método clave es OnGUI, que sobrescribes para definir el dibujado. Recibe tres parámetros:

position: el Rect donde se dibujará la propiedad en el inspector.
property: el SerializedProperty que representa el campo.
label: la etiqueta visible del campo.

Los SerializedProperty permiten comunicarse con propiedades serializables del editor sin importar su tipo exacto. Ofrecen accesores como floatValue, intValue o stringValue según corresponda [06:40].

¿Para qué sirve EditorGUI.PropertyField? Dibuja automáticamente la propiedad en el inspector con el tipo correcto, sin que tengas que verificar manualmente si es entero, flotante o string.

Cómo agregar un botón que randomiza el valor en el inspector

Con la propiedad ya dibujada usando EditorGUI.PropertyField, el siguiente paso es añadir un botón funcional. Aquí entra GUI.Button, que recibe un Rect y un texto, y devuelve true cuando se presiona [08:15].

Para acceder a los parámetros del atributo desde el drawer, usas la propiedad attribute que provee PropertyDrawer. Como devuelve un PropertyAttribute genérico, debes castearlo al tipo concreto:

csharp RandomizerAttribute randomizer = attribute as RandomizerAttribute;

Dentro del bloque del botón, asignas el resultado de Random.Range al floatValue de la propiedad, usando randomizer.minimum y randomizer.maximum como límites [09:30].

Cómo organizar las posiciones con Rect

Si dibujas el botón con la misma position que la propiedad, ambos se superponen. Necesitas crear un Rect nuevo desplazado verticalmente:

Suma un Vector2 de altura 20 a la posición original para bajar el botón.
Ajusta el tamaño con un Vector2 que mantenga el ancho y defina la altura.
Limita la altura de la propiedad original también a 20 píxeles.

El orden importa: si cambias el valor después del botón, debes aplicar la asignación antes de dibujar el campo para que el cambio se refleje en pantalla [11:00].

Cómo reservar espacio con GetPropertyHeight

Unity por defecto asigna la altura de un campo simple, así que el botón queda recortado. La solución es sobrescribir GetPropertyHeight y devolver el espacio total que necesitas, en este caso 40 píxeles para sumar la propiedad y el botón [12:20].

Cómo validar el tipo de propiedad y evitar errores

Un atributo aplicado al campo equivocado puede romper el inspector. Si alguien pone Randomizer sobre un GameObject, el botón aparece pero al presionarlo lanza errores impredecibles.

La solución es validar property.propertyType antes de dibujar. Si coincide con SerializedPropertyType.Float, ejecutas el dibujado normal. Si no, muestras un Debug.LogError indicando que el atributo solo funciona para flotantes [13:45].

Esta validación protege a otros desarrolladores del equipo y deja claro el contrato de uso del atributo.

Habilidades y conceptos para dominar PropertyDrawer

Los elementos que vale la pena reforzar son:

PropertyAttribute: clase base de Unity para crear atributos personalizados [02:30].
PropertyDrawer: clase del editor que define cómo dibujar un atributo o propiedad [05:20].
CustomPropertyDrawer: atributo que vincula un drawer con su tipo objetivo mediante typeof [05:40].
SerializedProperty: representación de propiedades serializables del editor con accesores tipados [06:40].
EditorGUI y EditorGUILayout: clases del API de editor equivalentes a GUI y GUILayout del runtime [07:30].
OnGUI y GetPropertyHeight: métodos sobrescribibles que controlan dibujado y altura reservada [12:20].

¿Qué atributo personalizado te gustaría construir primero? Comparte tus ideas y experimenta con casos como rangos, sliders o validadores propios.

Resumen

Por qué separar scripts y editor en Unity

La buena práctica consiste en mantener dos carpetas separadas:

Una carpeta Scripts donde defines el atributo y recolectas los parámetros que usará el desarrollador.
Una carpeta llamada exactamente Editor, que Unity reconoce automáticamente y no incluye en la compilación final.

Esta separación evita que el código del editor termine en el build del juego y mantiene el proyecto limpio [01:00].

¿Qué es un PropertyDrawer en Unity? Es una clase del API de editor que define cómo se dibuja una propiedad o un atributo dentro del inspector. Permite reemplazar la interfaz por defecto con controles personalizados.

Cómo definir un atributo personalizado heredando de PropertyAttribute

Una vez creado, lo aplicas sobre cualquier campo serializado de un MonoBehaviour usando la sintaxis de corchetes:

csharp [Randomizer(0, 10)] public float valueRandom;

En este punto el atributo existe en el código, pero todavía se dibuja como un campo normal porque falta el drawer que lo represente visualmente [04:10].

Cómo dibujar el atributo con CustomPropertyDrawer y OnGUI

El método clave es OnGUI, que sobrescribes para definir el dibujado. Recibe tres parámetros:

position: el Rect donde se dibujará la propiedad en el inspector.
property: el SerializedProperty que representa el campo.
label: la etiqueta visible del campo.

¿Para qué sirve EditorGUI.PropertyField? Dibuja automáticamente la propiedad en el inspector con el tipo correcto, sin que tengas que verificar manualmente si es entero, flotante o string.

Cómo agregar un botón que randomiza el valor en el inspector

csharp RandomizerAttribute randomizer = attribute as RandomizerAttribute;

Dentro del bloque del botón, asignas el resultado de Random.Range al floatValue de la propiedad, usando randomizer.minimum y randomizer.maximum como límites [09:30].

Cómo organizar las posiciones con Rect

Si dibujas el botón con la misma position que la propiedad, ambos se superponen. Necesitas crear un Rect nuevo desplazado verticalmente:

Suma un Vector2 de altura 20 a la posición original para bajar el botón.
Ajusta el tamaño con un Vector2 que mantenga el ancho y defina la altura.
Limita la altura de la propiedad original también a 20 píxeles.

El orden importa: si cambias el valor después del botón, debes aplicar la asignación antes de dibujar el campo para que el cambio se refleje en pantalla [11:00].

Cómo reservar espacio con GetPropertyHeight

Cómo validar el tipo de propiedad y evitar errores

Un atributo aplicado al campo equivocado puede romper el inspector. Si alguien pone Randomizer sobre un GameObject, el botón aparece pero al presionarlo lanza errores impredecibles.

Esta validación protege a otros desarrolladores del equipo y deja claro el contrato de uso del atributo.

Habilidades y conceptos para dominar PropertyDrawer

Los elementos que vale la pena reforzar son:

PropertyAttribute: clase base de Unity para crear atributos personalizados [02:30].
PropertyDrawer: clase del editor que define cómo dibujar un atributo o propiedad [05:20].
CustomPropertyDrawer: atributo que vincula un drawer con su tipo objetivo mediante typeof [05:40].
SerializedProperty: representación de propiedades serializables del editor con accesores tipados [06:40].
EditorGUI y EditorGUILayout: clases del API de editor equivalentes a GUI y GUILayout del runtime [07:30].
OnGUI y GetPropertyHeight: métodos sobrescribibles que controlan dibujado y altura reservada [12:20].

¿Qué atributo personalizado te gustaría construir primero? Comparte tus ideas y experimenta con casos como rangos, sliders o validadores propios.

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

Cómo crear PropertyDrawers en Unity

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