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.

编辑器图标

当一个新类被创建并暴露于脚本时, 编辑器的界面将显示一个默认图标, 表示它从中继承的基类. 在大多数情况下, 仍然建议为新类创建图标以改善用户体验.

创建图标

要创建新图标,你首先需要安装一个向量图形编辑器。例如,你可以使用开源的 Inkscape 编辑器。

克隆包含所有编辑器图标的 godot 资源库:

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

图标必须使用矢量图形编辑器以 SVG 格式创建。需要遵循以下三个主要要求:

  • 图标必须是16×16. 在Inkscape中, 你可以在 文件>文档属性 中配置文档大小.

  • 线条应该尽可能地被捕捉到像素, 以便在较低的DPI下保持清晰, 你可以在Inkscape中创建一个16×16的网格来简化这个过程.

  • 如果用户将编辑器配置为了浅色主题,Godot 会根据 一组预定义的颜色映射 来自动转换图标的颜色。这样做是为了确保图标始终能保持足够的对比度。请尽量将你的图标配色限制在上述列表中的颜色范围内。否则,你的图标在浅色背景下可能会变得难以辨认。

一旦你对图标的设计感到满意, 就把图标保存在拷贝版本库的 editor/icons 文件夹中. 图标的名称应该与预期的名称相匹配, 并区分大小写. 例如, 要为CPUParticles2D创建一个图标, 将文件命名为 CPUParticles2D.svg .

小技巧

你也可以在 Godot 编辑器图标 网站上浏览所有现有的图标。

自定义图标的导入选项

对于项目中自带的自定义图标(而不是引擎源代码里自带的那些),你应该启用以下两个导入选项:

高分辨率(hiDPI)屏幕的缩放适配

图标需要在高分辨率(hiDPI)显示器上进行适当的缩放,以确保它们依然保持清晰,并且足够大、易于阅读。

为了确保图标在高分辨率(hiDPI)显示器上能以正确的比例渲染,请在文件系统(FileSystem)面板中选中该 SVG 文件,然后在导入(Import)面板中启用 Editor > Scale with Editor Scale (编辑器 > 随编辑器缩放)选项,最后点击 Reimport 按钮。请注意,该选项仅适用于 SVG 格式的图标,因为它必须依赖矢量格式才能生效。

为浅色编辑器主题转换颜色

为了确保当用户使用亮色主题(light theme)时,图标的颜色能正确地进行转换适配,请在文件系统(FileSystem)面板中选中该 SVG 文件,然后在导入(Import)面板中启用 Editor > Convert Colors with Editor Theme (编辑器 > 随编辑器主题转换颜色)选项,最后点击 Reimport 按钮。请注意,该选项仅适用于 SVG 格式的图标,因为它必须依赖矢量格式才能生效。

图标优化

编辑器会在加载时渲染一次 SVG 文件,因此 SVG 文件需要很小,才能够高效地解析。运行 pre-commit 钩子时,会自动使用 svgo 对 SVG 进行优化。

备注

虽然这个优化步骤不会对图标的质量产生明显影响, 但还是会删除指南等只属于编辑器的信息. 因此, 如果你需要做进一步的修改, 建议将源SVG保留下来.

集成和分享图标

如果你对引擎本身有贡献, 你应该pull request, 在主仓库的 editor/icons 中添加优化的图标. 重新编译引擎, 使其获取新的类图标.

也可以在模块内创建自定义图标. 如果你要创建自己的模块, 并且不打算将其与Godot集成, 则不需要单独的拉取请求即可在编辑器中使用图标, 因为它们可以独立存在.

关于如何创建模块图标的具体说明,请参阅:Creating custom module icons

故障排除

如果图标没有出现在编辑器中, 请确保:

  1. 每个图标的文件名都符合前面所述的命名要求.

  2. svg 模块必须在编译时开启(默认情况下它是开启的)。如果没有这个模块,图标就完全无法在编辑器中显示。

参考