Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Iconos del editor

Cuando se crea una nueva clase y se expone a los scripts, la interfaz del editor la mostrará con un ícono 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.

Creando 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 ícono, guarda el ícono en la carpeta editor/icons del repositorio clonado. El nombre del ícono debe coincidir con el nombre previsto de manera sensible a mayúsculas y minúsculas. Por ejemplo, para crear un ícono 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.

Optimización de iconos

Debido a que el editor renderiza los SVG una sola vez en el momento de carga, deben ser pequeños en tamaño para que puedan ser analizados de manera eficiente. Los íconos del editor deben ser optimizados antes de ser agregados al motor, para hacerlo:

  1. Instala svgcleaner descargando un archivo binario desde su pestaña de lanzamientos y colocándolo en una ubicación dentro de la variable de entorno PATH.

  2. Ejecuta el siguiente comando, reemplazando svg_source.svg con la ruta a tu archivo SVG (que puede ser una ruta relativa o absoluta):

    svgcleaner --multipass svg_source.svg svg_optimized.svg

El interruptor --multipass mejora la compresión, así que asegúrate de incluirlo. El ícono optimizado se guardará en svg_optimized.svg. También puedes cambiar el parámetro de destino a cualquier ruta relativa o absoluta que desees.

Nota

Si bien este paso de optimización no afectará notablemente la calidad del ícono, 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.

Integrando y compartiendo 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, consulta 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 ícono 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