Sansan
78e1facaf0
The players' pictures sit on the right in even lines of at most four, each ending at the row's right edge, so five pictures are 3 + 2 and seven 4 + 3. The text takes the room they leave and wraps only when it does not fit, and the row is as tall as the taller of the two, instead of a width fixed by the number of pictures. Rows are rounded and alternate like the other lists, are highlighted under the mouse, and the playing song has an orange edge. Clicking a picture clicks its song.
72 lines
4.0 KiB
Markdown
72 lines
4.0 KiB
Markdown
# 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
|
|
|
|
1. Copy `main_theme.tres`, e.g. to `dark_blue_theme.tres`.
|
|
2. 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.
|
|
3. Point Project Settings → GUI → Theme → Custom at the copy.
|
|
|
|
The **font** is the theme's default font, Godot's own Open Sans with Noto Sans JP for
|
|
Japanese text; see `fonts/README.md`.
|
|
|
|
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`, `SongRowOdd` | PanelContainer | Alternating songs in that list |
|
|
| `SongRowHover`, `SongRowPlaying` | PanelContainer | The song under the mouse, and the one that is playing |
|
|
| `SongRowPictureLines`, `SongRowPictureLine` | VBoxContainer, HBoxContainer | The space between the lines of player pictures on a song, and between the pictures |
|
|
| `ShortcutRowDark` | PanelContainer | Every other row in the shortcuts popup |
|
|
| `ListRowEven`, `ListRowOdd` | PanelContainer | Alternating rows in the inspiration, sync and statistics song lists |
|
|
| `ListRowHover` | PanelContainer | A row in the statistics song list under the mouse |
|
|
| `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 |
|
|
| `TabButton` | Button | The Quiz and Statistics tabs; the chosen one is orange |
|
|
| `StatisticsCard`, `StatisticsCardHover` | PanelContainer | A soundtrack card in the statistics, and the one under the mouse |
|
|
| `StatisticsGrid` | GridContainer | The grid of soundtrack cards, with the space between them |
|
|
| `SongStatsHeader` | PanelContainer | The column titles above the statistics song list, spaced like its rows |
|
|
| `SongStatsText`, `SongStatsSecondary` | RichTextLabel | A song's name and its soundtrack (dimmer) in the statistics song list |
|
|
|
|
**Palette**: colours used from code.
|
|
|
|
| Colour | Used for |
|
|
|---|---|
|
|
| `backdrop` | The dimming behind an open popup |
|
|
|
|
**ScoreGraph**: the graph of the game on the Winner popup, drawn from code.
|
|
|
|
| Item | Used for |
|
|
|---|---|
|
|
| `player_1` … `player_7` | Each player's line, dots, score and legend square, by their place in the player list |
|
|
| `grid`, `axis_text` | The gridlines and the numbers along the axes |
|
|
| `winning_line` | The dashed line at the winning score |
|
|
| `line_width`, `dot_radius` | How thick the lines are and how big the dots |
|
|
| `font_size` | The axis numbers and the scores at the end of the lines |
|