UI Redesign
achimmihca opened this issue · comments
Actual behaviour
The current UI and logo is mostly based on the previous game instance "UltraStar Deluxe".
Expected behaviour
A redesign is currently in progress.
People with corresponding access can view it in the design tool Figma
Preferably, styling will be implemented using the current JSON based themes.
As part of the redesign, the following needs to be implemented:
- define colors in theme file (mic profiles, sentence ratings, song editor layers)
- BTW: could also define custom background music in theme file
- single scene for options
- can be implemented by swapping parts of the UI and GameObjects. See the branch anst/options-scene-chooser
- refactor Labels, i.e. use Label field of UI elements (#388)
- dropdown component
- new font for the game, e.g. Inter
- possibly new icons, e.g. Feather Icons (GitHub, also available as font)
- use game icon as default player profile image
- sing scene
- radial progress bar to show scores, uses color of mic profile
- do not color player profile image (mic color is used instead for the radial progress bar)
- option for lyrics background opacity (in theme file)
- make it more like other media players (e.g. YouTube, VLC), i.e. overlay to play/pause, change settings, see time line
- results scene
- new layout
- switch between current results and all time highscore
- song select scene
- use radial progress bar to show mic input (e.g. when assigning mics to players)
- "normal" ListView for songs in song select
- main scene: new layout
- gradient as background for VisualElements
- CSS supports gradients as background, but UIToolkit not yet.
- however, it might be possible to apply this approach, i.e. generate a small texture with the gradient. The graphics engine can then interpolate values as needed.
- make everything theme-able
- test everything with keyboard navigation