Devlogs
Tips for customizing Godot's HTML5 Loading Screen
Hey, ever wanted to change Godot's HTML5 loading screen?
I mean, consider the page for Lights Out, a game we made for the Nokia Jam #4:
It is thematically consistent, isn't it? However, as soon as the player presses the Run game button...
However, changing this loading screen styling is quite easy! I haven't found a guide on this, so below is my take on this.
Here is what I found out by testing stuff:
The body tag basically refers to the background of the loading. By changing the background-color parameter, for instance, you can change the black BG for another color. This will already boost quite a bit the consistency! Also, be sure to insert de hex values for the colors you want. For instance, Nokia's dark green is #43523d in hex.
Status progress refers to the outer part of the loading bar. By changing the background-color and the border parameters, you'll change the, well, the BG and the border color. Notice that there also is a padding parameter, that correponds to the space between the loading bar "filling" and the border. Also, another important parameter is the border-radius: by changing it to 0px, you'll have a more blocky loading bar. Removing the box-shadow line will also help with this.
Status-progress-inner correponds to the "filling" to the loading bar. Here, the most interesting parameters to play around with are also the background-color, border, box-shadow, and box-radius. I suppose transition could be used to create interesting behaviours for the loading bar.
As an example, for Lights Out I used the following configuration:
And the result is:
Much better, isn't it? At least I think it is a lot better now.
Well, this was quite a small guide, but I hope it at least gave you some ideas on how to customize more your web builds.
Anyway, thanks for reading! Feel free to leave a comment down if you have any questions or anything like that :)