[SOLVED] Load loading screen assets first

Help & Support
1

Hi everyone,

I’m looking for a way to load the assets of the loading screen first and still preload all other assets. I use six images in the loading screen, that currently get loaded among the other 12 MB of assets. Using preload only for loading screen assets and dynamically loading the other assets on demand is not favoured, because this app will mainly run in China, where such loading processes can take a long time.
I already tried to modify the preload function by moving tagged assets to the front of the asset array, but without success so far.

Any ideas?

Cheers, Patrick

EDIT: resource.getFileUrl() is favoured over direct links in the loading screen script.

2

If you need the image URLs for the loading screen, they don’t need to be preloaded as they don’t need to be converted to textures, elements etc for HTML.

If you must use resource.getFileUrl(), you can get those when the app fires it’s preload start event as shown here: https://playcanvas.com/editor/scene/783637

Otherwise, it is recommended to use externally hosted images/direct URLS for the preload screen so you don’t have to wait for the asset system to initialise.

1 Like
3

Thanks yaustar for clarifying my options. Since I won’t maintain my app after deploy, I would like to keep all files in one place, as simply as possible. As a workaround I’ll place them in the project folder and link them directly.

4

Personally, I would base64 encode the images and embed them directly in the loading screen script.

For example, you could turn this:

        var logo = document.createElement('img');
        logo.src = 'https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/images/play_text_252_white.png';
        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
        };

Into this:

        var logo = document.createElement('img');
        logo.src = 'data:image/png;base64,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';
        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
        };

Use this tool to do the encoding:

4 Likes
5

Thanks will! I thought about base64 too, but then the ~30% size increase comparing to binary scared me off, since the app is going to run mainly on mobiles. I will test, if it really makes a big difference with the small loading screen assets. Cheers!

6

With base64, it should compress down pretty pretty well if the server has gzip enabled. It be worth checking the download size on the client using base64

2 Likes
7

When I download the project as a .zip, the project is already gzipped? I just need to enable gzip on the server? On Unity for example I can select no compression, or compress with gzip or brotli.

8

Hi @Marks,

Yes, gzip compression works by enabling it on the server for each file type. Then the server is responsible for gzipping each file when it’s requested.

1 Like