Can't work out a way to set background color for a new build in 5.6

Unity Engine
1

UnityLoader.instantiate appears to overwrite the style set on the game div with a background color (#222C36) it’s pulling from mygame.json from the build folder. While this is indeed a very nice color it’s not the one I want.

I can’t work out how to stop it doing this … as far as I can see the only way to deal with this is to manually edit the mygame.json in the build folder every single time I make a build. This is really annoying, is there a way to stop it?

I’m also baffled as to why it’s being done in the first place … why not let the custom / default template files set the background color of the div instead of burying that away in a json file?

2

The background color is the one you set under Player Settings > Splash Image/Screen > Background Color

3

Hrm, that’s really odd … if I create a new project I see that setting along with a bunch of others under the splash section but in the project I updated from 5.5 it wasn’t there so this appears to be a bug in upgrading a 5.5 project.

Edit - Here’s a screenshot of 5.6 not showing the BG color / other spash screen properties:

1199×511 117 KB

1 Like
4

All the settings are in the splash screen section!
I dont know why, but they are there. You have to enable the splash screen checkbox.

1 Like
5

this is … so bad.

Enabling the splash screen to switch it off ??? I can’t even … Unity, please change this!

Edit - specifically we shouldn’t have to toggle the splash screen ‘on’ in order to stop the background color from changing.

It also looks like regardless of the splash screen setting the output UnityLoader.js includes the Dark & Light Styles which include base64 encoded pngs.

1 Like
6

You can pass the backgroundColor to UnityLoader.instantiate in your custom template:

var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {Module: {backgroundColor: "#ff00ff "}});

Again sorry for the lack of documentation. This will be covered by the new WebGL Templates manual page, which should be online in the next few days.

2 Likes
7

Please update the WebGL Template page in the documentation. I was making a new build for my project and it completely broke because of the huge changes in the WebGL build structure.

Also Marco, this workaround you suggested does not work. My build generated something like:

var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json", {onProgress: UnityProgress});

Where should I put this whole {Module: {backgroundColor: "#ff00ff "} stuff?

8

Like this:

var gameInstance = UnityLoader.instantiate("game", "Build/webGLEvolved.json", {
        onProgress: UnityProgress,
        Module: {
          backgroundColor: "#000000",
          onRuntimeInitialized: function () {
            UnityProgress(gameInstance, "complete");
          }
        }});

Obvious, right? /s

1 Like
9

How did you find this out? Are you the one responsible for this undocumented abortion? The documentation is still not updated. Why are you always going ass first Unity? Why do you insist that users are forced to surf the forum pages for basic functionality, every time with this shit.

Unity, If it ain’t broke, don’t fix it.

These new “user friendly” settings are such garbage.

Where is the Unity logo in the build? Why is it included in my build even if I use your “user friendly” splash screen settings without the Unity logo?

Why is there a Unity logo flashing in the beginning of loading my webpage even though I have the Unity logo turned off in the Splash Screen settings? Such confusing garbage. Do I actually have to spend time reverse engineering your “user friendly” Splash Screen settings to get rid of all the bloat? Can’t you guys just document where you hide all this useless garbage?

Why can’t you force this “user friendly” Splash Screen stuff on free users and let us paying customers have a smooth experience?

10

Here we are in 2021 and still nothing in the manual about how to set the background colour…

The template has been updated to:

    <canvas id="unity-canvas" style="width: {{{ WIDTH }}}px; height: {{{ HEIGHT }}}px; background: {{{ BACKGROUND_FILENAME ? 'url(\'Build/' + BACKGROUND_FILENAME.replace(/'/g, '%27') + '\') center / cover' : BACKGROUND_COLOR }}}"></canvas>

But no mention of how to actual set BACKGROUND_COLOR …

11

The background color can be set in the player settings, Splash Image section. However the transparency is not taken into account. The color picker is rgba, however the resulting hex is rgb, transparency is discarded. Probably a bug.

1 Like