Up to date

This page is up to date for Godot 4.3. 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

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 í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