Iconos del editor

Cuando se crea una nueva clase y se expone a los scripts, la interfaz del editor la mostrará con un icono predeterminado que representa la clase base de la cual hereda. En la mayoría de los casos, se recomienda crear íconos para las nuevas clases para mejorar la experiencia del usuario.

Crear iconos

Para crear nuevos íconos, primero necesitas tener instalado un editor de gráficos vectoriales. Por ejemplo, puedes utilizar el editor de código abierto Inkscape.

Clona el repositorio godot que contiene todos los íconos del editor:

git clone https://github.com/godotengine/godot.git

Los íconos deben ser creados en un editor de gráficos vectoriales en formato SVG. Hay dos requisitos principales que debes seguir:

  • Los íconos deben tener un tamaño de 16×16 píxeles. En Inkscape, puedes configurar el tamaño del documento en Archivo > Propiedades del documento.

  • Las líneas deben alinearse con los píxeles siempre que sea posible para mantenerse nítidas en DPI más bajos. Puedes crear una cuadrícula de 16×16 en Inkscape para facilitar esto.

Una vez que estés satisfecho con el diseño del icono, guarda el icono en la carpeta editor/icons del repositorio clonado. El nombre del icono debe coincidir con el nombre previsto de manera sensible a mayúsculas y minúsculas. Por ejemplo, para crear un icono para CPUParticles2D, nombra el archivo CPUParticles2D.svg.

Conversión de color para temas de editor claros

If the user has configured their editor to use a light theme, Godot will convert the icon's colors based on a set of predefined color mappings. This is to ensure the icon always displays with a sufficient contrast rate. Try to restrict your icon's color palette to colors found in the list above. Otherwise, your icon may become difficult to read on a light background.

Nota

Para habilitar la conversión de color para los temas de editor claros:

  1. Import > Import As > Texture2D

  2. Set editor/convert_colors_with_editor_theme to true

Optimización de iconos

Because the editor renders SVGs once at load time, they need to be small in size so they can be efficiently parsed. When the pre-commit hook runs, it automatically optimizes the SVG using svgo.

Nota

Si bien este paso de optimización no afectará notablemente la calidad del icono, aún eliminará información específica del editor, como guías. Por lo tanto, se recomienda mantener el archivo SVG original si necesitas realizar cambios adicionales.

Integrar y compartir los iconos

Si estás contribuyendo al motor en sí, debes hacer una solicitud de extracción (pull request) para agregar los íconos optimizados a la carpeta editor/icons en el repositorio principal. Luego, vuelve a compilar el motor para que tome los nuevos íconos para las clases.

También es posible crear íconos personalizados dentro de un módulo. Si estás creando tu propio módulo y no planeas integrarlo con Godot, no es necesario hacer una solicitud de extracción separada para que tus íconos estén disponibles dentro del editor, ya que pueden ser autocontenidos.

Para obtener instrucciones específicas sobre cómo crear íconos para módulos, véase Creación de íconos personalizados para módulos.

Solución De Problemas

Si los íconos no aparecen en el editor, asegúrate de que:

  1. El nombre de archivo de cada icono coincide con el requisito de nomenclatura descrito anteriormente.

  2. modules/svg está habilitado (debería estar habilitado de forma predeterminada). Sin él, los íconos no aparecerán en el editor en absoluto.

Referencias