Tips for customizing Godot's HTML5 Loading Screen

Share this post:

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...

Aaaaaaaaaaaaaaaand now, our consistency is lost.

However, changing this loading screen styling is quite easy! I haven't found a guide on this, so below is my take on this.

First step is to open the .html file Godot generates when you export your game: however, don't open it with your browser! Use a software like Window's Notepad, or Notepad++, or VSCode... you decide.
Now, we just need to change the correct CSS parameters on this file! And that's it. In case you don't know CSS, however, well, me neither! But you can always poke things in the file and find out what they do.

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 :)

Get Lights Out

Download NowName your own price

Lights Out

It's up to you to fix a lightbulb on a factory

Add Game To Collection

Status	Released
Author	Escada Games
Genre	Platformer
Tags	1-bit, 2D, godot-engine, Minimalist, Pixel Art, Short

Comments

محمد انور - light1 year ago(+1)

ty for this tutorial, it's really helpful.
also i found this video, i will put here to help others

HumbeDev1 year ago(+1)

Good Staffs!