Up to date

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

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

Les icônes doivent être créées dans un éditeur de graphiques vectoriels au format SVG. Il y a deux exigences principales à respecter :

  • 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.

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.

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

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.

Optimisation des icônes

Comme l'éditeur rend les SVG une fois au moment du chargement, ils doivent être de petite taille pour pouvoir être analysés efficacement. Pour ce faire, les icônes de l'éditeur doivent d'abord être optimisées avant d'être ajoutées au moteur :

  1. Installez svgcleaner en téléchargeant un binaire depuis son onglet Releases et en le plaçant dans un emplacement de votre variable d'environnement PATH.

  2. Exécutez la commande ci-dessous, en remplaçant svg_source.svg par le chemin d'accès à votre fichier SVG (qui peut être un chemin relatif ou absolu) :

    svgcleaner --multipass svg_source.svg svg_optimized.svg

L'option --multipass améliore la compression, alors assurez-vous de l'inclure. L'icône optimisée sera sauvegardée dans le fichier svg_optimized.svg. Vous pouvez également changer le paramètre de destination pour n'importe quel chemin relatif ou absolu que vous souhaitez.

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.

Pour des instructions spécifiques sur la manière de créer des icônes pour un module, vous pouvez vous référer à Création d'icônes de module personnalisées.

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. modules/svg est activé (il devrait être activé par défaut). Sans cela, les icônes n'apparaîtront pas dans l'éditeur.

References