Oh, beautiful GUI!¶
However, many types of games often need complex user interfaces, like MMOs, traditional RPGs, Simulators, Strategy, etc. These kinds of interface are also common in some games that include editors to create content, or interfaces for network connectivity.
Godot's user interface uses these kinds of control with the default theme, but they can be skinned to resemble pretty much any kind of user interface.
The GUI is skinned through the Theme resource. Theme contains all the information required to change the entire visual styling of all controls. Theme options are named, so it's not obvious which name changes what (especially from code), but several tools are provided. The ultimate place to look at what each theme option is for each control, which will always be more up to date than any documentation, is the file scene/resources/default_theme/default_theme.cpp. The rest of this document will explain the different tools used to customize the theme.
A Theme can be applied to any control in the scene. As a result, all children and grand-children controls will use that same theme, too (unless another theme is specified further down the tree). If a value is not found in a theme, it will be searched in themes higher up in the hierarchy, towards the root. If nothing was found, the default theme is used. This system allows for flexible overriding of themes in complex user interfaces.
Don't use the custom theme option in the Project Settings, as there are known bugs with theme propagation. Instead, apply your theme to the root Control node's Theme property. It will propagate to instanced scenes automatically. To get correct theming in the editor for instanced scenes, you can apply the theme resource to the instanced scene's root node as well.
A Texture: A single image. Textures are not often used, but when they are, they represent handles to pick or icons in a complex control (such as a file dialog).
风格箱: 风格箱是一种资源, 用以定义如何绘制不同大小的面板 (之后见更多信息)。
Every option is associated with:
In the example above, a new theme is created. The "font_color" option is changed and then applied to a label. Therefore, the label's text (and all children and grandchildren labels) will be red.
It is possible to override those options without using the theme directly, and only for a specific control, by using the override API in Control.add_color_override():
In the inline help of Godot (in the Script tab), you can check which theme options are overridable, or check the Control class reference.
如果只需要外观定制少数几个控件, 通常没有必要创建一个新主题。控件提供其主题选项作为特殊类型的属性(在检查面板上)。一旦勾选, 覆写就会生效:
As can be seen in the image above, theme options have little check boxes. If checked, they can be used to override the value of the theme just for that control.
The simplest way to create a theme is to edit a theme resource. Create a Theme from the resource menu; the editor will appear immediately. After that, save it (for example, with the name mytheme.theme):