Sansan
4a934840f6
The bar is rounded and a little taller, with a round orange play button and a restart button that lights up orange under the mouse. The icons sit inside their buttons with room around them, and are one colour, cropped to their shape. Progress fills in orange, the volume slider gets a speaker icon, and the buttons say their shortcut keys in their tooltips. Buttons grow a little under the mouse and shrink while held down, and the play button pops when it switches between play and pause. ButtonBounce holds these animations so other buttons can use them too.
76 lines
4.4 KiB
Markdown
76 lines
4.4 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 |
|
|
| `PlayerBar` | PanelContainer | The music player's rounded bar |
|
|
| `PlayerButtonPrimary`, `PlayerButton` | Button | The round play button, and the restart button; the icon's colour on hover comes from here |
|
|
| `ProgressSlider`, `VolumeBar` | HSlider | How far the song has played (orange), and the volume |
|
|
| `PlayerTime` | Label | The time played and the song's length |
|
|
| `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 |
|