Facepunch / garrysmod-requests

Feature requests for Garry's Mod
86 stars 24 forks source link

Allow loading screens to set loading box colour #2451

Open DarthTealc opened 3 months ago

DarthTealc commented 3 months ago

What

Allow loading screens to set the loading box colour

How - for developers

Developers would set a theme-color meta tag on their loading screen eg <meta name="theme-color" content="#FF00FF" /> Developers may choose to use a different colour or image for the loading screen background, it does not have to align with the theme-color. Developers may additionally use HTML elements behind the expected loading box location to make it look even more integrated, such as a border or drop shadow.

How - for the game

Gmod would look at the page and extract the theme-color. If a valid #RRGGBB colour, Gmod would set the loading box to that colour, and would set the buttons/borders/text to 2 contrasting colours. These contrasting colours are handled by the game to ensure they are readable and that loading pages can't use them to make the box invisible. If no theme-color or an invalid theme-color is specified, Gmod sticks with the default loading box colours.

Example

(theme-color is indicated for demonstration) image

Alternative Method

Instead of using a single theme-color metatag with Gmod automatically calculating the 2nd and 3rd colours, developers could instead use gmod-color-a, gmod-color-b, gmod-color-c meta tags. This would allow developers to have more control over the colours. Example of where the gmod-colors apply

<meta name="gmod-color-a" content="#FF0000" />
<meta name="gmod-color-b" content="#0000FF" />
<meta name="gmod-color-c" content="#00FF00" />

image Gmod would check to make sure they pass a basic contrast calculation to ensure the status/progress and cancel buttons aren't hidden. If the check fails, Gmod would use the default loading box colours instead.

Accessibility

The basic contrast check would not be accessible for high-contrast users. If a user has high-contrast set in their OS, Gmod would ignore the custom colours and apply hardcoded ones.

DarthTealc commented 2 months ago

Here's an actual in-game example

I defined these manually, the game would do it at runtime and calculate colours B and C.

"LoadColA" "177 59 249 255" // as if the game had extracted a #b13bf9 theme-color meta tag
"LoadColB" "232 203 255 255" // calculated by game based on A, usually lighter. 
"LoadColC" "28 4 44 255" // calculated by game based on A, usually darker.

After extracting and defining the colours, Gmod would modify Resource/LoadingDialog.res at runtime (done manually for this example by editing Resource/LoadingDialogNoBanner.res) and would add the following properties for the following fields

LoadingDialog
   "infocus_bgcolor_override" "LoadColA"
InfoLabel
   "fgcolor_override" "LoadColB"
progress
   "fgcolor_override" "LoadColB"
   "bgcolor_override" "LoadColC"
CancelButton
   "defaultFgColor_override" "LoadColC"
   "defaultBgColor_override" "LoadColB"
   "armedFgColor_override" "LoadColB"
   "armedBgColor_override" "LoadColC"

The result looks like this in-game image

DarthTealc commented 2 months ago

I've updated the original comment with an alternative method. Instead of only allowing developers to specify a single theme-color, developers could specify all three colours. Gmod would run a very basic contrast check to make sure the status/button is visible to people with standard vision. High-contrast users would get the default colours. See the original comment "Alternative Method" section for more detail.

(don't use these colours) image

DarthTealc commented 2 months ago

Here's a few examples of loading screens. Demos thanks to physgun and gmod-lsm.

image image image image image