Sansan
8b71723a34
themes/main_theme.tres is the project theme. It holds Godot's default look for every control type the game uses, plus named styles for the game's own look (popups, the background, spacers, list rows, title and text sizes, highlights) and a palette for the popup dimming. Scenes and scripts name these styles instead of setting colours, sizes or style boxes, and the five old theme files are gone. themes/README.md explains the styles and how to make a new theme. The screenshot tour now uses the real character pictures, so the layout baseline is taken again. Screenshots are pixel-identical to before, and test_theme.gd checks that the look stays in the theme.
Themes
The whole look of the game comes from one theme, main_theme.tres. It is the project
theme (Project Settings → GUI → Theme → Custom), so every scene uses it without setting
anything. Scenes and scripts never set colours, font sizes or style boxes themselves;
they name one of the theme's styles instead, and tests/integration/test_theme.gd
checks that it stays that way.
Making a new theme
- Copy
main_theme.tres, e.g. todark_blue_theme.tres. - Open the copy in Godot (double-click it) and change its colours, style boxes and font sizes in the theme editor. Keep every style's name.
- Point Project Settings → GUI → Theme → Custom at the copy.
Icons (play, restart, add player, the slider and switch knobs) are not part of the theme;
they come from the image files in icons/ and Godot's built-in theme.
What is in the theme
Godot's default look for every kind of control the game uses (Button, Label, Panel, CheckButton, sliders, scroll bars, text fields and so on), copied in so it can be changed here.
Named styles (theme type variations), picked with Theme Type Variation in a node's
inspector or theme_type_variation in code:
| Style | Based on | Used for |
|---|---|---|
WindowBackground |
Panel | The background behind everything in the main window |
PopupBackground |
Panel | The panel of every popup: dark, bordered and rounded |
DarkSpacer |
Panel | The dark gaps in the player list and the add player row |
CharacterCard |
Panel | A character in the character select popup |
MusicList |
PanelContainer | The list of songs in the quiz |
SongRow |
PanelContainer | One song in that list |
ShortcutRowDark |
PanelContainer | Every other row in the shortcuts popup |
ListRowEven, ListRowOdd |
PanelContainer | Alternating rows in the inspiration and sync lists |
TitleLarge |
Label | The soundtrack that is playing (50) |
TitleMedium |
Label | The song that is playing, and the winner (35) |
Title |
Label | The window title and popup titles (25) |
TextLarge |
Label | Log rows, shortcuts and the inspiration list (20) |
TextMedium |
Label | Rows in the sync result (18) |
HighlightLarge, HighlightMedium |
Label | Orange text: sync headers and every other sync row |
SongRowLabel, SongRowLabelPlaying |
Label | A song's text, and the one that is playing |
The PopupPanel type itself is styled too, for the Statistics popup.
Palette: colours used from code.
| Colour | Used for |
|---|---|
backdrop |
The dimming behind an open popup |