Libgdx - Remove HTML greybackground/recompile button/ load splash

Question

What is the proper way to remove the grey background that covers the entire screen, the recompile button, and the default libGDX load and/or load splash in a HTML build of my game?

Deity

Answer 1

Note: This answer applies only to the gdx-setup tool as of late 2022. The gdx-liftoff tool is similar but has a slightly less boneheaded configuration out of the box. Additionally, I would like to get some of libGDX's HTML backend reworked one day, as there is no point in the padding and it's applied unevenly, plus less obvious things like the way it creates a table for layout.

Grey background

The background colour can be customised by changing background: #222222 in html/webapp/styles.css to some other colour. Or apply it directly to the body in index.html and delete styles.css (plus the link to it) as it doesn't contain anything important once the superdev button has been removed.

Grey border

The border around the game can be removed by editing HtmlLauncher like so:

@Override
public GwtApplicationConfiguration getConfig () {
  GwtApplicationConfiguration config = new GwtApplicationConfiguration(true);
  config.padHorizontal = 0;
  config.padVertical = 0;
  return config;
}

Separating GwtApplicationConfiguration into a config variable brings it in line with the other launchers (desktop, Android, iOS) and setting the padding to 0 is self-explanatory. While we're here, passing true into the app config's constructor tells it to render at native resolution on high-DPI/"retina" displays instead of upscaling.

Recompile button

Or the superdev button, as I call it. Just remove the <a class="superdev"... line from html/webapp/index.html. If you need access to it during development, it's recommended you add its link to your bookmark bar. Visibility of the bookmark bar can be toggled using Ctrl+Shift+B in Chrome and Firefox.

Load/splash screen

You're probably best referring to https://libgdx.com/wiki/html5-backend-and-gwt-specifics#changing-the-load-screen-progress-bar for this (which may not have existed when the question was asked). In short, getPreloaderCallback() and adjustMeterPanel() can be overridden in HtmlLauncher. I typically just overwrite logo.png after building instead of using the recommended method for changing the logo.

Other changes

Things you might want to change before a final release:

• styles.css isn't very important beyond changing the background colour, as noted earlier.
• In index.html, a comma should be added to between device-width and initial-scale for it to be valid HTML.
• In index.html, applying align="center" to a div is deprecated behaviour. Probably best remove that alignment. If you need it, apply via CSS instead.
• In index.html, handleMouseDown() and handleMouseUp() are completely pointless, as far as I can see. I don't use them for my own projects and have had no complaints.
• html/build/dist/assets/assets.txt references some files that may not be necessary. The default font (arial or lsans, depending on libGDX version) is only needed if you use it and the vertex/fragment shaders are only needed if you do 3D stuff, I believe. Removing these can remove load times ever so slightly, especially on HTTP/1.1 connections. But I don't have an automated way to remove those lines (except on Linux - head -n -8).
• Setting an asset filter as seen at https://libgdx.com/wiki/html5-backend-and-gwt-specifics#speeding-up-preload-process is an easy way to reduce your load times. I return false for music files to reduce load times greatly - it ends up streaming music instead of preloading it (if using Music, not AssetManager).

Corduroy