Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Icônes de l'éditeur

Lorsqu'une nouvelle classe est créée et exposée au scripting, l'interface de l'éditeur l'affiche avec une icône par défaut représentant la classe de base dont elle hérite. Cependant, dans la plupart des cas, il est recommandé de créer des icônes pour les nouvelles classes afin d'améliorer l'expérience utilisateur.

Création d'icônes

Pour créer de nouvelles icônes, vous devez d'abord installer un éditeur de graphiques vectoriels. Par exemple, vous pouvez utiliser l'éditeur open-source Inkscape.

Clonez le dépôt godot contenant toutes les icônes originelles de l'éditeur :

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

The icons must be created in a vector graphics editor in SVG format. There are three main requirements to follow:

  • Les icônes doivent être de format 16×16. Dans Inkscape, vous pouvez configurer la taille du document dans Fichier > Propriétés du document.

  • Les lignes doivent être accrochées au pixel près chaque fois que possible pour rester nettes à un niveau de DPI inférieur. Vous pouvez créer une grille 16×16 dans Inkscape pour vous faciliter la tâche.

  • Si l'utilisateur a configuré son éditeur pour utiliser un thème clair, Godot convertira les couleurs d'icône en se basant sur un ensemble de mappages de couleurs prédéfinis. Cela permet de s'assurer que l'icône s'affiche toujours avec un taux de contraste suffisant. Essayez de limiter la palette de couleurs de votre icône aux couleurs de la liste ci-dessus. Sinon, votre icône peut devenir difficile à lire sur un fond clair.

Une fois que vous êtes satisfait du design de l'icône, enregistrez là dans le dossier editor/icons du dépôt cloné. Le nom de l'icône doit correspondre au nom prévu, en respectant la casse. Par exemple, pour créer une icône pour CPUParticles2D, nommez le fichier CPUParticles2D.svg.

Astuce

You can also browse all existing icons on the Godot editor icons website.

Import options for custom icons

For custom icons that are present in projects (as opposed to the engine source code), there are two import options you should enable:

Scaling for hiDPI displays

Icons need to be scaled properly on hiDPI displays to ensure they remain crisp and large enough to be readable.

To ensure the icon is rendered at a correct scale on hiDPI displays, select the SVG file in the FileSystem dock, enable the Editor > Scale with Editor Scale option in the Import dock and click Reimport. Note that this option is only available for icons in SVG format, as it requires the use of a vector format to work.

Conversion des couleurs pour les thèmes clairs de l'éditeur

To ensure the icon has its colors converted when the user is using a light theme, select the SVG file in the FileSystem dock, enable the Editor > Convert Colors with Editor Theme option in the Import dock and click Reimport. Note that this option is only available for icons in SVG format, as it requires the use of a vector format to work.

Optimisation des icônes

Comme l'éditeur rend les SVGs une fois au moment du chargement, ils doivent être de petite taille pour pouvoir être parsés efficacement. Quand le hook de pre-commit s'exécute, il optimise automatiquement les SVGs en utilisant svgo.

Note

Bien que cette étape d'optimisation n'ait pas d'impact notable sur la qualité de l'icône, elle supprime néanmoins les informations réservées à éditeur, telles que les guides. Il est donc recommandé de conserver le SVG source si vous devez apporter d'autres modifications.

Intégration et partage des icônes

Si vous contribuez au moteur lui-même, vous devez faire une pull request pour ajouter des icônes optimisées à editor/icons dans le dépôt principal. Recompilez le moteur pour qu'il récupère de nouvelles icônes pour les classes.

Il est également possible de créer des icônes personnalisées au sein d'un module. Si vous créez votre propre module et que vous ne prévoyez pas de l'intégrer à Godot, vous n'avez pas besoin de faire une pull request pour que vos icônes soient disponibles dans l'éditeur car elles peuvent être indépendantes.

For specific instructions on how to create module icons, refer to Creating custom module icons.

Dépannage

Si les icônes n'apparaissent pas dans l'éditeur, assurez-vous que :

  1. Le nom de fichier de chaque icône correspond aux exigences de nommage telles que décrites précédemment.

  2. The svg module is enabled at compile-time (it is enabled by default). Without this module, icons won't appear in the editor at all.

References